p5.js-web-editor/client/theme.js
Andrew Nicolaou 000f6d0ea3 Adds theme
2020-01-19 22:05:16 +01:00

54 lines
1.1 KiB
JavaScript

export const Theme = {
contrast: 'contrast',
dark: 'dark',
light: 'light',
};
export const colors = {
p5pink: '#ed225d',
yellow: '#f5dc23',
};
export const common = {
baseFontSize: 12
};
export const remSize = size => `${size / common.baseFontSize}rem`;
export const prop = key => props => props.theme[key];
export default {
[Theme.light]: {
colors,
...common,
primaryTextColor: '#333',
buttonColor: '#f10046',
buttonColorBackground: '#fff',
buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#fff',
buttonHoverColorBackground: colors.p5pink,
},
[Theme.dark]: {
colors,
...common,
primaryTextColor: '#FFF',
buttonColor: '#f10046',
buttonColorBackground: '#fff',
buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#fff',
buttonHoverColorBackground: colors.p5pink,
},
[Theme.contrast]: {
colors,
...common,
primaryTextColor: '#F5DC23',
buttonColor: '#333',
buttonColorBackground: colors.yellow,
buttonBorderColor: '#b5b5b5',
buttonHoverColor: '#333',
buttonHoverColorBackground: '#fff',
},
};