feat(App): Lay groundwork for general themeing support

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

src/components/settings/navigation/SettingsNavigation.js

@@ -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/containers/layout/AppLayoutContainer.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/stores/UIStore.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;