diff --git a/app/soapbox/actions/theme.js b/app/soapbox/actions/theme.js
new file mode 100644
index 000000000..809170730
--- /dev/null
+++ 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,
+ };
+}
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 63c732509..7ca447e4c 100644
--- 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 {
{theme && }
+ {themeCss && }
diff --git a/app/soapbox/reducers/index.js b/app/soapbox/reducers/index.js
index c91f2f0cb..7d3f59a98 100644
--- 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);
diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js
new file mode 100644
index 000000000..c5c29c60a
--- /dev/null
+++ 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;
+ }
+};
diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js
new file mode 100644
index 000000000..017cce544
--- /dev/null
+++ b/app/soapbox/utils/theme.js
@@ -0,0 +1,5 @@
+export const themeDataToCss = themeData => (
+ themeData
+ .entrySeq()
+ .reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
+);
diff --git a/app/styles/azure.scss b/app/styles/azure.scss
index 5539c142d..4b6c3c708 100644
--- 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';