Theme mode set in Preferences

app/soapbox/actions/settings.js

@@ -20,7 +20,7 @@ const defaultSettings = ImmutableMap({
   boostModal: false,
   deleteModal: true,
   defaultPrivacy: 'public',
-  theme: 'azure',
+  themeMode: 'light',
   // locale: navigator.language.slice(0, 2) || 'en', // FIXME: Dynamic locales
   locale: 'en',
 

app/soapbox/actions/soapbox.js

@@ -1,6 +1,4 @@
 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';
@@ -8,9 +6,7 @@ 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

@@ -24,6 +24,7 @@ import { fetchMe } from 'soapbox/actions/me';
 import PublicLayout from 'soapbox/features/public_layout';
 import { getSettings } from 'soapbox/actions/settings';
 import { themeDataToCss } from 'soapbox/utils/theme';
+import { generateTheme } from 'soapbox/actions/theme';
 
 export const store = configureStore();
 const hydrateAction = hydrateStore(initialState);
@@ -49,6 +50,8 @@ const mapStateToProps = (state) => {
     demetricator: settings.get('demetricator'),
     locale: settings.get('locale'),
     themeCss: themeDataToCss(state.get('theme')),
+    themeMode: settings.get('themeMode'),
+    brandColor: state.getIn(['soapbox', 'brandColor']),
   };
 };
 
@@ -64,9 +67,25 @@ class SoapboxMount extends React.PureComponent {
     demetricator: PropTypes.bool,
     locale: PropTypes.string.isRequired,
     themeCss: PropTypes.string,
+    brandColor: PropTypes.string,
+    themeMode: PropTypes.string,
     dispatch: PropTypes.func,
   };
 
+  maybeUpdateTheme = prevProps => {
+    const updates = [
+      this.props.brandColor !== prevProps.brandColor,
+      this.props.themeMode  !== prevProps.themeMode,
+    ];
+    if (updates.some(u => u)) this.props.dispatch(
+      generateTheme(this.props.brandColor, this.props.themeMode)
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    this.maybeUpdateTheme(prevProps);
+  }
+
   render() {
     const { me, themeCss, reduceMotion, systemFont, dyslexicFont, demetricator, locale } = this.props;
     if (me === null) return null;

app/soapbox/features/preferences/index.js

@@ -19,12 +19,6 @@ const messages = defineMessages({
   heading: { id: 'column.preferences', defaultMessage: 'Preferences' },
 });
 
-// TODO: Pull dynamically
-const themes = {
-  'azure':       'Light',
-  'purple-dark': 'Dark',
-};
-
 const mapStateToProps = state => ({
   settings: state.get('settings'),
 });
@@ -41,7 +35,7 @@ class Preferences extends ImmutablePureComponent {
 
   onThemeChange = e => {
     const { dispatch } = this.props;
-    dispatch(changeSetting(['theme'], e.target.value));
+    dispatch(changeSetting(['themeMode'], e.target.value));
   }
 
   onDefaultPrivacyChange = e => {
@@ -57,9 +51,9 @@ class Preferences extends ImmutablePureComponent {
         <SimpleForm>
           <FieldsGroup>
             <SelectDropdown
-              label='Site theme'
+              label='Theme mode'
-              items={themes}
+              items={{ light: 'Light', dark: 'Dark' }}
-              defaultValue={settings.get('theme')}
+              defaultValue={settings.get('themeMode')}
               onChange={this.onThemeChange}
             />
           </FieldsGroup>

static/instance/soapbox.example.json

@@ -1,5 +1,6 @@
 {
   "logo": "https://media.gleasonator.com/site_uploads/files/000/000/002/original/logo.svg",
+  "brandColor": "#0482d8",
   "promoPanel": {
     "items": [{
       "icon": "area-chart",
@@ -16,7 +17,7 @@
   },
   "defaultSettings": {
     "autoPlayGif": false,
-    "theme": "azure"
+    "themeMode": "light"
   },
   "copyright": "♡2020. Copying is an act of love. Please copy and share.",
   "navlinks": {