language-web/src/main/js/theme/EditorTheme.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import { PaletteMode } from '@material-ui/core';

import cssVariables from '../../css/themeVariables.module.scss';

export enum EditorTheme {
  Light,
  Dark,
}

export class EditorThemeData {
  className: string;

  paletteMode: PaletteMode;

  toggleDarkMode: EditorTheme;

  foreground!: string;

  background!: string;

  paper!: string;

  primary!: string;

  secondary!: string;

  constructor(className: string, paletteMode: PaletteMode, toggleDarkMode: EditorTheme) {
    this.className = className;
    this.paletteMode = paletteMode;
    this.toggleDarkMode = toggleDarkMode;
    Reflect.ownKeys(this).forEach((key) => {
      if (!Reflect.get(this, key)) {
        const cssKey = `${this.className}--${key.toString()}`;
        if (cssKey in cssVariables) {
          Reflect.set(this, key, cssVariables[cssKey]);
        }
      }
    });
  }
}

export const DEFAULT_THEME = EditorTheme.Dark;

export const EDITOR_THEMES: { [key in EditorTheme]: EditorThemeData } = {
  [EditorTheme.Light]: new EditorThemeData('light', 'light', EditorTheme.Dark),
  [EditorTheme.Dark]: new EditorThemeData('dark', 'dark', EditorTheme.Light),
};