Action to set theme, render theme CSS

4 years ago · 67a7adb9a9
parent 170b436705
commit 67a7adb9a9
6 changed files with 47 additions and 4 deletions
--- a/app/soapbox/actions/theme.js
+++ b/app/soapbox/actions/theme.js
@ -0,0 +1,8 @@
+export const SET_THEME = 'SET_THEME';
+
+export function setTheme(themeData) {
+  return {
+    type: SET_THEME,
+    themeData,
+  };
+}
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@ -23,6 +23,9 @@ import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
 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 { setTheme } from 'soapbox/actions/theme';
+import { Map as ImmutableMap } from 'immutable';

 export const store = configureStore();
 const hydrateAction = hydrateStore(initialState);
@ -48,6 +51,7 @@ const mapStateToProps = (state) => {
    dyslexicFont: settings.get('dyslexicFont'),
    demetricator: settings.get('demetricator'),
    locale: settings.get('locale'),
+    themeCss: themeDataToCss(state.get('theme')),
  };
 };

@ -63,6 +67,8 @@ class SoapboxMount extends React.PureComponent {
    dyslexicFont: PropTypes.bool,
    demetricator: PropTypes.bool,
    locale: PropTypes.string.isRequired,
+    themeCss: PropTypes.string,
+    dispatch: PropTypes.func,
  };

  getThemeChunk = theme => {
@ -70,8 +76,14 @@ class SoapboxMount extends React.PureComponent {
    return cssChunks.filter(chunk => chunk.startsWith(theme))[0];
  };

+  componentDidMount() {
+    this.props.dispatch(setTheme(ImmutableMap({
+      'brand-color': 'green',
+    })));
+  }
+
  render() {
-    const { me, theme, reduceMotion, systemFont, dyslexicFont, demetricator, locale } = this.props;
+    const { me, theme, themeCss, reduceMotion, systemFont, dyslexicFont, demetricator, locale } = this.props;
    if (me === null) return null;

    const { localeData, messages } = getLocale();
@ -98,6 +110,7 @@ class SoapboxMount extends React.PureComponent {
          <Helmet>
            <body className={bodyClass} />
            {theme && <link rel='stylesheet' href={`/packs/css/${this.getThemeChunk(theme)}.chunk.css`} />}
+            {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
          </Helmet>
          <BrowserRouter>
            <ScrollContext>
--- a/app/soapbox/reducers/index.js
+++ b/app/soapbox/reducers/index.js
@ -42,6 +42,7 @@ import soapbox from './soapbox';
 import instance from './instance';
 import me from './me';
 import auth from './auth';
+import theme from './theme';

 const reducers = {
  dropdown_menu,
@ -87,6 +88,7 @@ const reducers = {
  instance,
  me,
  auth,
+  theme,
 };

 export default combineReducers(reducers);
--- a/app/soapbox/reducers/theme.js
+++ b/app/soapbox/reducers/theme.js
@ -0,0 +1,15 @@
+import {
+  SET_THEME,
+} from '../actions/theme';
+import { Map as ImmutableMap } from 'immutable';
+
+const initialState = ImmutableMap();
+
+export default function theme(state = initialState, action) {
+  switch(action.type) {
+  case SET_THEME:
+    return action.themeData;
+  default:
+    return state;
+  }
+};
--- a/app/soapbox/utils/theme.js
+++ b/app/soapbox/utils/theme.js
@ -0,0 +1,5 @@
+export const themeDataToCss = themeData => (
+  themeData
+    .entrySeq()
+    .reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
+);
--- a/app/styles/azure.scss
+++ b/app/styles/azure.scss
@ -8,9 +8,9 @@ $ui-highlight-color: $gab-brand-default;
 $nav-ui-highlight-color: #149dfb;
 $ui-base-lighter-color: #b0c0cf;

-:root {
-  --brand-color: #0482d8;
-}
+// :root {
+//   --brand-color: #0482d8;
+// }

@import 'application';
@import 'soapbox-light/diff';