Frontend color theme

3 files changed, 115 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 @@
+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),
+};
diff --git a/language-web/src/main/js/theme/ThemeProvider.tsx b/language-web/src/main/js/theme/ThemeProvider.tsx
new file mode 100644
index 00000000..e7574725
--- /dev/null
+++ b/language-web/src/main/js/theme/ThemeProvider.tsx
@@ -0,0 +1,15 @@
+import { ThemeProvider as MaterialUiThemeProvider } from '@material-ui/core/styles';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useRootStore } from '../RootStore';
+
+export const ThemeProvider: React.FC = observer(({ children }) => {
+  const { themeStore } = useRootStore();
+
+  return (
+    <MaterialUiThemeProvider theme={themeStore.materialUiTheme}>
+      {children}
+    </MaterialUiThemeProvider>
+  );
+});
diff --git a/language-web/src/main/js/theme/ThemeStore.ts b/language-web/src/main/js/theme/ThemeStore.ts
new file mode 100644
index 00000000..0f283c98
--- /dev/null
+++ b/language-web/src/main/js/theme/ThemeStore.ts
@@ -0,0 +1,53 @@
+import {
+  Theme,
+  createTheme,
+  responsiveFontSizes,
+} from '@material-ui/core/styles';
+import { makeAutoObservable } from 'mobx';
+
+import {
+  EditorTheme,
+  EditorThemeData,
+  DEFAULT_THEME,
+  EDITOR_THEMES,
+} from './EditorTheme';
+
+export class ThemeStore {
+  currentTheme: EditorTheme = DEFAULT_THEME;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  toggleDarkMode(): void {
+    this.currentTheme = this.currentThemeData.toggleDarkMode;
+  }
+
+  private get currentThemeData(): EditorThemeData {
+    return EDITOR_THEMES[this.currentTheme];
+  }
+
+  get materialUiTheme(): Theme {
+    const themeData = this.currentThemeData;
+    const materialUiTheme = createTheme({
+      palette: {
+        mode: themeData.paletteMode,
+        background: {
+          default: themeData.background,
+          paper: themeData.paper,
+        },
+        primary: {
+          main: themeData.primary,
+        },
+        secondary: {
+          main: themeData.secondary,
+        },
+      },
+    });
+    return responsiveFontSizes(materialUiTheme);
+  }
+
+  get codeMirrorTheme(): string {
+    return `problem-${this.currentThemeData.className}`;
+  }
+}