feat(App): Lay groundwork for general themeing support

Author: adlk

gulpfile.babel.js

@@ -7,11 +7,20 @@ import { exec } from 'child_process';
 import dotenv from 'dotenv';
 import sassVariables from 'gulp-sass-variables';
 import { removeSync } from 'fs-extra';
+import kebabCase from 'kebab-case';
+import hexRgb from 'hex-rgb';
 
 import config from './package.json';
 
+import * as rawStyleConfig from './src/theme/default/legacy.js';
+
 dotenv.config();
 
+const styleConfig = Object.keys(rawStyleConfig).map((key) => {
+  const isHex = /^#[0-9A-F]{6}$/i.test(rawStyleConfig[key]);
+  return ({ [`$raw_${kebabCase(key)}`]: isHex ? hexRgb(rawStyleConfig[key], { format: 'array' }).splice(0, 3).join(',') : rawStyleConfig[key] });
+});
+
 const paths = {
   src: 'src',
   dest: 'build',
@@ -83,9 +92,9 @@ export function html() {
 
 export function styles() {
   return gulp.src(paths.styles.src)
-    .pipe(sassVariables({
+    .pipe(sassVariables(Object.assign({
       $env: process.env.NODE_ENV === 'development' ? 'development' : 'production',
-    }))
+    }, ...styleConfig)))
     .pipe(sass({
       includePaths: [
         './node_modules',

package-lock.json

@@ -11,7 +11,7 @@
   "private": true,
   "scripts": {
     "prestart": "npm run rebuild",
-    "start": "DEBUG=Franz:* electron ./build",
+    "start": "electron ./build",
     "start:local": "cross-env LOCAL_API=1 npm start",
     "start:live": "cross-env LIVE_API=1 npm start",
     "dev": "cross-env NODE_ENV=development gulp dev",
@@ -67,6 +67,7 @@
     "react-dropzone": "^4.2.1",
     "react-electron-web-view": "^2.0.1",
     "react-intl": "^2.3.0",
+    "react-jss": "8.6.1",
     "react-loader": "^2.4.0",
     "react-router": "^3.0.2",
     "react-router-transition": "^0.1.1",
@@ -108,7 +109,9 @@
     "gulp-sass": "^4.0.2",
     "gulp-sass-variables": "^1.1.1",
     "gulp-server-livereload": "^1.9.2",
+    "hex-rgb": "3.0.0",
     "husky": "^1.1.4",
+    "kebab-case": "1.0.0",
     "node-sass": "^4.7.2",
     "prettier": "1.15.2"
   },

package.json

@@ -32,8 +32,7 @@ const messages = defineMessages({
   },
 });
 
-@inject('stores') @observer
-export default class SettingsNavigation extends Component {
+export default @inject('stores') @observer class SettingsNavigation extends Component {
   static propTypes = {
     serviceCount: PropTypes.number.isRequired,
   };

src/components/settings/navigation/SettingsNavigation.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
+import { ThemeProvider } from 'react-jss';
 
 import AppStore from '../../stores/AppStore';
 import RecipesStore from '../../stores/RecipesStore';
@@ -109,26 +110,28 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
     );
 
     return (
-      <AppLayout
-        isFullScreen={app.isFullScreen}
-        isOnline={app.isOnline}
-        showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
-        appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
-        sidebar={sidebar}
-        services={servicesContainer}
-        news={news.latest}
-        removeNewsItem={hide}
-        reloadServicesAfterUpdate={reloadUpdatedServices}
-        installAppUpdate={installUpdate}
-        globalError={globalError.error}
-        showRequiredRequestsError={requests.showRequiredRequestsError}
-        areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
-        retryRequiredRequests={retryRequiredRequests}
-        areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
-        darkMode={settings.all.app.darkMode}
-      >
-        {React.Children.count(children) > 0 ? children : null}
-      </AppLayout>
+      <ThemeProvider theme={ui.theme}>
+        <AppLayout
+          isFullScreen={app.isFullScreen}
+          isOnline={app.isOnline}
+          showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
+          appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
+          sidebar={sidebar}
+          services={servicesContainer}
+          news={news.latest}
+          removeNewsItem={hide}
+          reloadServicesAfterUpdate={reloadUpdatedServices}
+          installAppUpdate={installUpdate}
+          globalError={globalError.error}
+          showRequiredRequestsError={requests.showRequiredRequestsError}
+          areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
+          retryRequiredRequests={retryRequiredRequests}
+          areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
+          darkMode={settings.all.app.darkMode}
+        >
+          {React.Children.count(children) > 0 ? children : null}
+        </AppLayout>
+      </ThemeProvider>
     );
   }
 }

src/containers/layout/AppLayoutContainer.js

@@ -1,6 +1,8 @@
 import { action, observable, computed } from 'mobx';
 
 import Store from './lib/Store';
+import * as themeDefault from '../theme/default';
+import * as themeDark from '../theme/dark';
 
 export default class UIStore extends Store {
   @observable showServicesUpdatedInfoBar = false;
@@ -20,6 +22,14 @@ export default class UIStore extends Store {
     return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted;
   }
 
+  @computed get theme() {
+    if (this.stores.settings.all.app.darkMode) {
+      return Object.assign({}, themeDefault, themeDark);
+    }
+
+    return themeDefault;
+  }
+
   // Actions
   @action _openSettings({ path = '/settings' }) {
     const settingsPath = path !== '/settings' ? `/settings/${path}` : path;