diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js index 7da3be86d..4e0b41f5f 100644 --- a/app/soapbox/actions/soapbox.js +++ b/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)); }); diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js index 878f78b3c..b668b5a57 100644 --- a/app/soapbox/containers/soapbox.js +++ b/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, diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js index f4582473a..42f379b68 100644 --- a/app/soapbox/reducers/theme.js +++ b/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,