diff options
author | 2021-09-17 19:10:19 +0200 | |
---|---|---|
committer | 2021-09-17 19:10:19 +0200 | |
commit | efdb6c6620e9ea7f5861efbef7d3462bf3c7bcd7 (patch) | |
tree | c623e8b3fba326dcbb57228f1ddbfbf55eeec494 /language-web/src/main/js/theme/EditorTheme.ts | |
parent | Add ESLint config (diff) | |
download | refinery-efdb6c6620e9ea7f5861efbef7d3462bf3c7bcd7.tar.gz refinery-efdb6c6620e9ea7f5861efbef7d3462bf3c7bcd7.tar.zst refinery-efdb6c6620e9ea7f5861efbef7d3462bf3c7bcd7.zip |
Frontend color theme
Diffstat (limited to 'language-web/src/main/js/theme/EditorTheme.ts')
-rw-r--r-- | language-web/src/main/js/theme/EditorTheme.ts | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/language-web/src/main/js/theme/EditorTheme.ts b/language-web/src/main/js/theme/EditorTheme.ts new file mode 100644 index 00000000..9420dafa --- /dev/null +++ b/language-web/src/main/js/theme/EditorTheme.ts | |||
@@ -0,0 +1,47 @@ | |||
1 | import { PaletteMode } from '@material-ui/core'; | ||
2 | |||
3 | import cssVariables from '../../css/themeVariables.module.scss'; | ||
4 | |||
5 | export enum EditorTheme { | ||
6 | Light, | ||
7 | Dark, | ||
8 | } | ||
9 | |||
10 | export class EditorThemeData { | ||
11 | className: string; | ||
12 | |||
13 | paletteMode: PaletteMode; | ||
14 | |||
15 | toggleDarkMode: EditorTheme; | ||
16 | |||
17 | foreground!: string; | ||
18 | |||
19 | background!: string; | ||
20 | |||
21 | paper!: string; | ||
22 | |||
23 | primary!: string; | ||
24 | |||
25 | secondary!: string; | ||
26 | |||
27 | constructor(className: string, paletteMode: PaletteMode, toggleDarkMode: EditorTheme) { | ||
28 | this.className = className; | ||
29 | this.paletteMode = paletteMode; | ||
30 | this.toggleDarkMode = toggleDarkMode; | ||
31 | Reflect.ownKeys(this).forEach((key) => { | ||
32 | if (!Reflect.get(this, key)) { | ||
33 | const cssKey = `${this.className}--${key.toString()}`; | ||
34 | if (cssKey in cssVariables) { | ||
35 | Reflect.set(this, key, cssVariables[cssKey]); | ||
36 | } | ||
37 | } | ||
38 | }); | ||
39 | } | ||
40 | } | ||
41 | |||
42 | export const DEFAULT_THEME = EditorTheme.Dark; | ||
43 | |||
44 | export const EDITOR_THEMES: { [key in EditorTheme]: EditorThemeData } = { | ||
45 | [EditorTheme.Light]: new EditorThemeData('light', 'light', EditorTheme.Dark), | ||
46 | [EditorTheme.Dark]: new EditorThemeData('dark', 'dark', EditorTheme.Light), | ||
47 | }; | ||