bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Action to set theme, render theme CSS

Browse source
This commit is contained in:
Alex Gleason 2020-05-30 19:05:01 -05:00
parent 170b436705
commit 67a7adb9a9
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
6 changed files with 47 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/soapbox/actions/theme.js Normal file
View file

@ -0,0 +1,8 @@
export const SET_THEME = 'SET_THEME';
export function setTheme(themeData) {
return {
type: SET_THEME,
themeData,
};
}

15
app/soapbox/containers/soapbox.js
View file

@ -23,6 +23,9 @@ import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
import { fetchMe } from 'soapbox/actions/me'; import { fetchMe } from 'soapbox/actions/me';
import PublicLayout from 'soapbox/features/public_layout'; import PublicLayout from 'soapbox/features/public_layout';
import { getSettings } from 'soapbox/actions/settings'; 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(); export const store = configureStore();
const hydrateAction = hydrateStore(initialState); const hydrateAction = hydrateStore(initialState);
@ -48,6 +51,7 @@ const mapStateToProps = (state) => {
dyslexicFont: settings.get('dyslexicFont'), dyslexicFont: settings.get('dyslexicFont'),
demetricator: settings.get('demetricator'), demetricator: settings.get('demetricator'),
locale: settings.get('locale'), locale: settings.get('locale'),
themeCss: themeDataToCss(state.get('theme')),
}; };
}; };
@ -63,6 +67,8 @@ class SoapboxMount extends React.PureComponent {
dyslexicFont: PropTypes.bool, dyslexicFont: PropTypes.bool,
demetricator: PropTypes.bool, demetricator: PropTypes.bool,
locale: PropTypes.string.isRequired, locale: PropTypes.string.isRequired,
themeCss: PropTypes.string,
dispatch: PropTypes.func,
}; };
getThemeChunk = theme => { getThemeChunk = theme => {
@ -70,8 +76,14 @@ class SoapboxMount extends React.PureComponent {
return cssChunks.filter(chunk => chunk.startsWith(theme))[0]; return cssChunks.filter(chunk => chunk.startsWith(theme))[0];
}; };
componentDidMount() {
this.props.dispatch(setTheme(ImmutableMap({
'brand-color': 'green',
})));
}
render() { 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; if (me === null) return null;
const { localeData, messages } = getLocale(); const { localeData, messages } = getLocale();
@ -98,6 +110,7 @@ class SoapboxMount extends React.PureComponent {
<Helmet> <Helmet>
<body className={bodyClass} /> <body className={bodyClass} />
{theme && <link rel='stylesheet' href={`/packs/css/${this.getThemeChunk(theme)}.chunk.css`} />} {theme && <link rel='stylesheet' href={`/packs/css/${this.getThemeChunk(theme)}.chunk.css`} />}
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
</Helmet> </Helmet>
<BrowserRouter> <BrowserRouter>
<ScrollContext> <ScrollContext>

2
app/soapbox/reducers/index.js
View file

@ -42,6 +42,7 @@ import soapbox from './soapbox';
import instance from './instance'; import instance from './instance';
import me from './me'; import me from './me';
import auth from './auth'; import auth from './auth';
import theme from './theme';
const reducers = { const reducers = {
dropdown_menu, dropdown_menu,
@ -87,6 +88,7 @@ const reducers = {
instance, instance,
me, me,
auth, auth,
theme,
}; };
export default combineReducers(reducers); export default combineReducers(reducers);

15
app/soapbox/reducers/theme.js Normal file
View file

@ -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;
}
};

5
app/soapbox/utils/theme.js Normal file
View file

@ -0,0 +1,5 @@
export const themeDataToCss = themeData => (
themeData
.entrySeq()
.reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
);

6
app/styles/azure.scss
View file

@ -8,9 +8,9 @@ $ui-highlight-color: $gab-brand-default;
$nav-ui-highlight-color: #149dfb; $nav-ui-highlight-color: #149dfb;
$ui-base-lighter-color: #b0c0cf; $ui-base-lighter-color: #b0c0cf;
:root { // :root {
--brand-color: #0482d8; // --brand-color: #0482d8;
} // }
@import 'application'; @import 'application';
@import 'soapbox-light/diff'; @import 'soapbox-light/diff';