3 files changed, 126 insertions, 0 deletions

diff --git a/subprojects/frontend/src/theme/EditorTheme.ts b/subprojects/frontend/src/theme/EditorTheme.ts
new file mode 100644
index 00000000..294192fa
--- /dev/null
+++ b/subprojects/frontend/src/theme/EditorTheme.ts
@@ -0,0 +1,47 @@
+import type { PaletteMode } from '@mui/material';
+
+import cssVariables from '../themeVariables.module.scss';
+
+export enum EditorTheme {
+  Light,
+  Dark,
+}
+
+export class EditorThemeData {
+  className: string;
+
+  paletteMode: PaletteMode;
+
+  toggleDarkMode: EditorTheme;
+
+  foreground!: string;
+
+  foregroundHighlight!: string;
+
+  background!: 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/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
new file mode 100644
index 00000000..f5b50be1
--- /dev/null
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -0,0 +1,15 @@
+import { observer } from 'mobx-react-lite';
+import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles';
+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/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
new file mode 100644
index 00000000..ffaf6dde
--- /dev/null
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -0,0 +1,64 @@
+import { makeAutoObservable } from 'mobx';
+import {
+  Theme,
+  createTheme,
+  responsiveFontSizes,
+} from '@mui/material/styles';
+
+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.background,
+        },
+        primary: {
+          main: themeData.primary,
+        },
+        secondary: {
+          main: themeData.secondary,
+        },
+        error: {
+          main: themeData.secondary,
+        },
+        text: {
+          primary: themeData.foregroundHighlight,
+          secondary: themeData.foreground,
+        },
+      },
+    });
+    return responsiveFontSizes(materialUiTheme);
+  }
+
+  get darkMode(): boolean {
+    return this.currentThemeData.paletteMode === 'dark';
+  }
+
+  get className(): string {
+    return this.currentThemeData.className;
+  }
+}