Skip to content
Snippets Groups Projects
Commit c2488dce authored by Jack Reed's avatar Jack Reed Committed by Chris Beer
Browse files

proof of concept using light and dark themes

parent 9540b316
No related branches found
No related tags found
No related merge requests found
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@material-ui/core/CssBaseline';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Fullscreen from 'react-fullscreen-crossbrowser'; import Fullscreen from 'react-fullscreen-crossbrowser';
import WorkspaceControlPanel from './WorkspaceControlPanel'; import WorkspaceControlPanel from './WorkspaceControlPanel';
import Workspace from '../containers/Workspace'; import Workspace from '../containers/Workspace';
...@@ -16,9 +17,19 @@ class App extends Component { ...@@ -16,9 +17,19 @@ class App extends Component {
* @return {String} - HTML markup for the component * @return {String} - HTML markup for the component
*/ */
render() { render() {
const { workspace, setWorkspaceFullscreen } = this.props; const { workspace, setWorkspaceFullscreen, config } = this.props;
const theme = createMuiTheme({
palette: {
type: config.theme,
},
typography: {
useNextVariants: true,
},
});
return ( return (
<div className={ns('app')}> <div className={ns('app')}>
<MuiThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<Fullscreen <Fullscreen
enabled={workspace.isFullscreenEnabled} enabled={workspace.isFullscreenEnabled}
...@@ -27,12 +38,14 @@ class App extends Component { ...@@ -27,12 +38,14 @@ class App extends Component {
<Workspace /> <Workspace />
</Fullscreen> </Fullscreen>
<WorkspaceControlPanel /> <WorkspaceControlPanel />
</MuiThemeProvider>
</div> </div>
); );
} }
} }
App.propTypes = { App.propTypes = {
config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
workspace: PropTypes.object, // eslint-disable-line react/forbid-prop-types workspace: PropTypes.object, // eslint-disable-line react/forbid-prop-types
setWorkspaceFullscreen: PropTypes.func, setWorkspaceFullscreen: PropTypes.func,
}; };
......
export default { export default {
theme: 'light', // dark also available
windows: [], windows: [],
thumbnailNavigation: { thumbnailNavigation: {
defaultPosition: 'bottom', defaultPosition: 'bottom',
......
...@@ -10,6 +10,7 @@ import App from '../components/App'; ...@@ -10,6 +10,7 @@ import App from '../components/App';
*/ */
const mapStateToProps = state => ( const mapStateToProps = state => (
{ {
config: state.config,
workspace: state.workspace, workspace: state.workspace,
manifests: state.manifests, manifests: state.manifests,
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment