Support theme-based overrides beyond light/dark mode

__tests__/src/selectors/config.test.js

@@ -44,8 +44,8 @@ describe('getShowZoomControlsConfig', () => {
 
 describe('getTheme', () => {
   it('returns the theme', () => {
-    const state = { config: { theme: 'dark' } };
-    expect(getTheme(state)).toEqual('dark');
+    const state = { config: { theme: { whatever: 'dark' } } };
+    expect(getTheme(state)).toEqual({ whatever: 'dark' });
   });
 });
 

src/components/ChangeThemeDialog.js

@@ -29,13 +29,7 @@ export class ChangeThemeDialog extends Component {
   handleThemeChange(theme) {
     const { updateConfig, handleClose } = this.props;
 
-    updateConfig({
-      theme: {
-        palette: {
-          type: theme,
-        },
-      },
-    });
+    updateConfig({ selectedTheme: theme });
     handleClose();
   }
 

src/config/settings.js

@@ -3,9 +3,18 @@ export default {
     height: 50,
     width: 50,
   },
+  selectedTheme: 'light', // dark also available
   theme: { // Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/
+    dark: {
       palette: {
-      type: 'light', // dark also available
+        type: 'dark',
+        primary: {
+          main: '#4db6ac',
+        }
+      }
+    },
+    palette: {
+      type: 'light',
       primary: {
         main: '#1967d2',
       },

src/containers/App.js

@@ -2,6 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
+import { getTheme } from '../state/selectors';
 import { App } from '../components/App';
 
 
@@ -14,7 +15,7 @@ const mapStateToProps = state => (
   {
     isFullscreenEnabled: state.workspace.isFullscreenEnabled,
     language: state.config.language,
-    theme: state.config.theme,
+    theme: getTheme(state),
     translations: state.config.translations,
   }
 );

src/containers/ChangeThemeDialog.js

@@ -21,7 +21,7 @@ const mapDispatchToProps = {
  * @private
  */
 const mapStateToProps = state => ({
-  theme: state.config.theme.palette.type,
+  theme: state.config.selectedTheme,
 });
 
 /** */

src/state/selectors/config.js

 import { createSelector } from 'reselect';
+import deepmerge from 'deepmerge';
 
 /** */
 function getConfig(state) {
@@ -26,7 +27,7 @@ export const getShowZoomControlsConfig = createSelector(
 
 export const getTheme = createSelector(
   [getConfig],
-  ({ theme }) => theme,
+  ({ theme, selectedTheme }) => deepmerge(theme, theme[selectedTheme] || {}),
 );
 
 export const getWorkspaceType = createSelector(