From c4a2a866183bc6ebd615b3a7fa821805b718cec3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 2 Jun 2020 12:16:26 -0500
Subject: [PATCH] Theme mode set in Preferences

---
 app/soapbox/actions/settings.js           |  2 +-
 app/soapbox/actions/soapbox.js            |  4 ----
 app/soapbox/containers/soapbox.js         | 19 +++++++++++++++++++
 app/soapbox/features/preferences/index.js | 14 ++++----------
 static/instance/soapbox.example.json      |  3 ++-
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js
index 7ad8410d8..10005844c 100644
--- a/app/soapbox/actions/settings.js
+++ b/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',
 
diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js
index 4e0b41f5f..7da3be86d 100644
--- a/app/soapbox/actions/soapbox.js
+++ b/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));
     });
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index cd9a43195..86190eb10 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/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;
diff --git a/app/soapbox/features/preferences/index.js b/app/soapbox/features/preferences/index.js
index 3f7ea81be..97225ceee 100644
--- a/app/soapbox/features/preferences/index.js
+++ b/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'
-              items={themes}
-              defaultValue={settings.get('theme')}
+              label='Theme mode'
+              items={{ light: 'Light', dark: 'Dark' }}
+              defaultValue={settings.get('themeMode')}
               onChange={this.onThemeChange}
             />
           </FieldsGroup>
diff --git a/static/instance/soapbox.example.json b/static/instance/soapbox.example.json
index 8fae384ce..3402c9d48 100644
--- a/static/instance/soapbox.example.json
+++ b/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": {