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