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 App = () => (
<ThemeProvider theme={{ ...theme, current: theme[currentTheme] }}>
<ThemeProvider theme={{ ...theme[currentTheme] }}>
<Provider store={store}>
<Router history={history} routes={routes(store)} />
</Provider>

26
client/theme.js
View file

@ -15,7 +15,15 @@ export const common = {
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 {
[Theme.light]: {
@ -23,32 +31,38 @@ export default {
...common,
primaryTextColor: '#333',
buttonColor: '#f10046',
buttonColorBackground: '#fff',
buttonColor: '#000',
buttonColorBackground: '#f4f4f4',
buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#fff',
buttonHoverColorBackground: colors.p5pink,
buttonDisabledColor: '#f10046',
buttonDisabledColorBackground: '#fff',
},
[Theme.dark]: {
colors,
...common,
primaryTextColor: '#FFF',
buttonColor: '#f10046',
buttonColorBackground: '#fff',
buttonColor: '#000',
buttonColorBackground: '#f4f4f4',
buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#fff',
buttonHoverColorBackground: colors.p5pink,
buttonDisabledColor: '#f10046',
buttonDisabledColorBackground: '#fff',
},
[Theme.contrast]: {
colors,
...common,
primaryTextColor: '#F5DC23',
buttonColor: '#333',
buttonColor: '#000',
buttonColorBackground: colors.yellow,
buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#333',
buttonHoverColorBackground: '#fff',
buttonDisabledColor: '#333',
buttonDisabledColorBackground: colors.yellow,
},
};