refactor(frontend): move from Webpack to Vite

Also overhaulds the building and linting for frontend assets.

1 files changed, 54 insertions, 7 deletions

diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index c6194c69..cf18e21c 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -1,15 +1,62 @@
+import {
+  createTheme,
+  responsiveFontSizes,
+  type ThemeOptions,
+  ThemeProvider as MaterialUiThemeProvider,
+} from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import { ThemeProvider as MaterialUiThemeProvider } from '@mui/material/styles';
 import React, { type ReactNode } from 'react';
 
 import { useRootStore } from '../RootStore';
 
-export const ThemeProvider: React.FC<{ children: ReactNode }> = observer(({ children }) => {
-  const { themeStore } = useRootStore();
+import EditorTheme from './EditorTheme';
+
+function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
+  switch (currentTheme) {
+    case EditorTheme.Light:
+      return {
+        palette: {
+          primary: {
+            main: '#56b6c2',
+          },
+        },
+      };
+    case EditorTheme.Dark:
+      return {
+        palette: {
+          primary: {
+            main: '#56b6c2',
+          },
+        },
+      };
+    default:
+      throw new Error(`Unknown theme: ${currentTheme}`);
+  }
+}
+
+function ThemeProvider({ children }: { children?: ReactNode }) {
+  const {
+    themeStore: { currentTheme, darkMode },
+  } = useRootStore();
+
+  const themeOptions = getMUIThemeOptions(currentTheme);
+  const theme = responsiveFontSizes(
+    createTheme({
+      ...themeOptions,
+      palette: {
+        mode: darkMode ? 'dark' : 'light',
+        ...(themeOptions.palette ?? {}),
+      },
+    }),
+  );
 
   return (
-    <MaterialUiThemeProvider theme={themeStore.materialUiTheme}>
-      {children}
-    </MaterialUiThemeProvider>
+    <MaterialUiThemeProvider theme={theme}>{children}</MaterialUiThemeProvider>
   );
-});
+}
+
+ThemeProvider.defaultProps = {
+  children: undefined,
+};
+
+export default observer(ThemeProvider);