From c2488dce3ed8811c74da3a6dbec15d922b291d5a Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Wed, 30 Jan 2019 14:47:23 -0700
Subject: [PATCH] proof of concept using light and dark themes
---
src/components/App.js | 31 ++++++++++++++++++++++---------
src/config/settings.js | 1 +
src/containers/App.js | 1 +
3 files changed, 24 insertions(+), 9 deletions(-)
diff --git a/src/components/App.js b/src/components/App.js
index 86b1f1d85..05a4532b4 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CssBaseline from '@material-ui/core/CssBaseline';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Fullscreen from 'react-fullscreen-crossbrowser';
import WorkspaceControlPanel from './WorkspaceControlPanel';
import Workspace from '../containers/Workspace';
@@ -16,23 +17,35 @@ class App extends Component {
* @return {String} - HTML markup for the component
*/
render() {
- const { workspace, setWorkspaceFullscreen } = this.props;
+ const { workspace, setWorkspaceFullscreen, config } = this.props;
+ const theme = createMuiTheme({
+ palette: {
+ type: config.theme,
+ },
+ typography: {
+ useNextVariants: true,
+ },
+ });
+
return (
<div className={ns('app')}>
- <CssBaseline />
- <Fullscreen
- enabled={workspace.isFullscreenEnabled}
- onChange={isFullscreenEnabled => setWorkspaceFullscreen(isFullscreenEnabled)}
- >
- <Workspace />
- </Fullscreen>
- <WorkspaceControlPanel />
+ <MuiThemeProvider theme={theme}>
+ <CssBaseline />
+ <Fullscreen
+ enabled={workspace.isFullscreenEnabled}
+ onChange={isFullscreenEnabled => setWorkspaceFullscreen(isFullscreenEnabled)}
+ >
+ <Workspace />
+ </Fullscreen>
+ <WorkspaceControlPanel />
+ </MuiThemeProvider>
</div>
);
}
}
App.propTypes = {
+ config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
workspace: PropTypes.object, // eslint-disable-line react/forbid-prop-types
setWorkspaceFullscreen: PropTypes.func,
};
diff --git a/src/config/settings.js b/src/config/settings.js
index fe3312aa2..c8c6f943c 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -1,4 +1,5 @@
export default {
+ theme: 'light', // dark also available
windows: [],
thumbnailNavigation: {
defaultPosition: 'bottom',
diff --git a/src/containers/App.js b/src/containers/App.js
index dd22661a5..aa351221c 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -10,6 +10,7 @@ import App from '../components/App';
*/
const mapStateToProps = state => (
{
+ config: state.config,
workspace: state.workspace,
manifests: state.manifests,
}
--
GitLab