From a96c52b21e7e590bbdd70b80896780a446fa2e8b Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Mon, 13 Dec 2021 02:07:04 +0100
Subject: build: separate module for frontend

This allows us to simplify the webpack configuration and the gradle
build scripts.
---
 subprojects/frontend/src/theme/ThemeStore.ts | 64 ++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 subprojects/frontend/src/theme/ThemeStore.ts

(limited to 'subprojects/frontend/src/theme/ThemeStore.ts')

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;
+  }
+}
-- 
cgit v1.2.3-70-g09d2