proof of concept using light and dark themes

src/components/App.js

 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,9 +17,19 @@ 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')}>
+        <MuiThemeProvider theme={theme}>
           <CssBaseline />
           <Fullscreen
             enabled={workspace.isFullscreenEnabled}
@@ -27,12 +38,14 @@ class App extends Component {
             <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,
 };

src/config/settings.js

 export default {
+  theme: 'light', // dark also available
   windows: [],
   thumbnailNavigation: {
     defaultPosition: 'bottom',

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,
   }