Get theme from soapbox.json

app/soapbox/actions/soapbox.js

@@ -1,4 +1,6 @@
 import api from '../api';
+import { get } from 'lodash';
+import { generateTheme } from 'soapbox/actions/theme';
 
 export const SOAPBOX_CONFIG_IMPORT  = 'SOAPBOX_CONFIG_IMPORT';
 export const SOAPBOX_CONFIG_FAIL    = 'SOAPBOX_CONFIG_FAIL';
@@ -6,7 +8,9 @@ export const SOAPBOX_CONFIG_FAIL    = 'SOAPBOX_CONFIG_FAIL';
 export function fetchSoapboxConfig() {
   return (dispatch, getState) => {
     api(getState).get('/instance/soapbox.json').then(response => {
+      const { brandColor, mode } = get(response.data, 'theme');
       dispatch(importSoapboxConfig(response.data));
+      dispatch(generateTheme(brandColor, mode));
     }).catch(error => {
       dispatch(soapboxConfigFail(error));
     });

app/soapbox/containers/soapbox.js

@@ -44,7 +44,6 @@ const mapStateToProps = (state) => {
   return {
     showIntroduction,
     me,
-    theme: settings.get('theme'),
     reduceMotion: settings.get('reduceMotion'),
     systemFont: settings.get('systemFont'),
     dyslexicFont: settings.get('dyslexicFont'),
@@ -60,7 +59,6 @@ class SoapboxMount extends React.PureComponent {
   static propTypes = {
     showIntroduction: PropTypes.bool,
     me: SoapboxPropTypes.me,
-    theme: PropTypes.string,
     reduceMotion: PropTypes.bool,
     systemFont: PropTypes.bool,
     dyslexicFont: PropTypes.bool,
@@ -70,12 +68,8 @@ class SoapboxMount extends React.PureComponent {
     dispatch: PropTypes.func,
   };
 
-  componentDidMount() {
-    this.props.dispatch(generateTheme('#bb0000', 'light'));
-  }
-
   render() {
-    const { me, theme, themeCss, reduceMotion, systemFont, dyslexicFont, demetricator, locale } = this.props;
+    const { me, themeCss, reduceMotion, systemFont, dyslexicFont, demetricator, locale } = this.props;
     if (me === null) return null;
 
     const { localeData, messages } = getLocale();
@@ -89,7 +83,6 @@ class SoapboxMount extends React.PureComponent {
     // }
 
     const bodyClass = classNames('app-body', {
-      [`theme-${theme}`]: theme,
       'system-font': systemFont,
       'no-reduce-motion': !reduceMotion,
       'dyslexic': dyslexicFont,

app/soapbox/reducers/theme.js

@@ -32,7 +32,8 @@ const makeContrast = (percent, color, mode) => {
   return brightness(percent, color);
 };
 
-export const generateTheme = (brandColor, mode) => {
+export const generateTheme = (brandColor, mode = 'light') => {
+  if (!brandColor) return modes.get(mode);
   return modes.get(mode).merge(ImmutableMap({
     'brand-color': brandColor,
     'accent-color': brightness(10, hue(-3, brandColor).hex).hex,