r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Send current theme variables directly into provider

Browse source
This commit is contained in:
Andrew Nicolaou 2020-04-19 20:29:17 +02:00
parent 1e5e47ad25
commit c2734ab5be
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/index.jsx
View file

@ -22,7 +22,7 @@ const store = configureStore(initialState);
const currentTheme = Theme.light; const currentTheme = Theme.light;
const App = () => ( const App = () => (
<ThemeProvider theme={{ ...theme, current: theme[currentTheme] }}> <ThemeProvider theme={{ ...theme[currentTheme] }}>
<Provider store={store}> <Provider store={store}>
<Router history={history} routes={routes(store)} /> <Router history={history} routes={routes(store)} />
</Provider> </Provider>

26
client/theme.js
View file

@ -15,7 +15,15 @@ export const common = {
export const remSize = size => `${size / common.baseFontSize}rem`; export const remSize = size => `${size / common.baseFontSize}rem`;
export const prop = key => props => props.theme[key]; export const prop = key => (props) => {
const value = props.theme[key];
if (value == null) {
throw new Error(`themed prop ${key} not found`);
}
return value;
};
export default { export default {
[Theme.light]: { [Theme.light]: {
@ -23,32 +31,38 @@ export default {
...common, ...common,
primaryTextColor: '#333', primaryTextColor: '#333',
buttonColor: '#f10046', buttonColor: '#000',
buttonColorBackground: '#fff', buttonColorBackground: '#f4f4f4',
buttonBorderColor: '#b5b5b5', buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#fff', buttonHoverColor: '#fff',
buttonHoverColorBackground: colors.p5pink, buttonHoverColorBackground: colors.p5pink,
buttonDisabledColor: '#f10046',
buttonDisabledColorBackground: '#fff',
}, },
[Theme.dark]: { [Theme.dark]: {
colors, colors,
...common, ...common,
primaryTextColor: '#FFF', primaryTextColor: '#FFF',
buttonColor: '#f10046', buttonColor: '#000',
buttonColorBackground: '#fff', buttonColorBackground: '#f4f4f4',
buttonBorderColor: '#b5b5b5', buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#fff', buttonHoverColor: '#fff',
buttonHoverColorBackground: colors.p5pink, buttonHoverColorBackground: colors.p5pink,
buttonDisabledColor: '#f10046',
buttonDisabledColorBackground: '#fff',
}, },
[Theme.contrast]: { [Theme.contrast]: {
colors, colors,
...common, ...common,
primaryTextColor: '#F5DC23', primaryTextColor: '#F5DC23',
buttonColor: '#333', buttonColor: '#000',
buttonColorBackground: colors.yellow, buttonColorBackground: colors.yellow,
buttonBorderColor: '#b5b5b5', buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#333', buttonHoverColor: '#333',
buttonHoverColorBackground: '#fff', buttonHoverColorBackground: '#fff',
buttonDisabledColor: '#333',
buttonDisabledColorBackground: colors.yellow,
}, },
}; };