diff --git a/src/components/App.js b/src/components/App.js index 86b1f1d8550e0d369391937839595f7fdf7c3082..05a4532b4c9ad7aadfd923034c0075a9147f4d2c 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 fe3312aa23bd651b817acb62eb2f9f24c60954a1..c8c6f943ced85764dd02bb890ec27ba9e0fc2141 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 dd22661a5eea6af1fd5b908b38e069cb1ce22124..aa351221c3c86f47cff6e27be3c63c9b170aacd9 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, }