feat(frontend): light/dark mode switch

1 files changed, 50 insertions, 15 deletions

diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index cf18e21c..1b8e49f0 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -5,27 +5,70 @@ import {
   ThemeProvider as MaterialUiThemeProvider,
 } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React, { type ReactNode } from 'react';
+import React, { type CSSProperties, type ReactNode } from 'react';
 
 import { useRootStore } from '../RootStore';
 
 import EditorTheme from './EditorTheme';
 
+interface HighlightStyles {
+  number: CSSProperties['color'];
+  parameter: CSSProperties['color'];
+  occurences: {
+    read: CSSProperties['color'];
+    write: CSSProperties['color'];
+  };
+}
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    selection: Palette['primary'];
+    highlight: HighlightStyles;
+  }
+
+  interface PaletteOptions {
+    selection: PaletteOptions['primary'];
+    highlight: HighlightStyles;
+  }
+}
+
 function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
   switch (currentTheme) {
     case EditorTheme.Light:
       return {
         palette: {
-          primary: {
-            main: '#56b6c2',
+          mode: 'light',
+          primary: { main: '#0097a7' },
+          selection: {
+            main: '#c8e4fb',
+            contrastText: '#000',
+          },
+          highlight: {
+            number: '#1976d2',
+            parameter: '#6a3e3e',
+            occurences: {
+              read: '#ceccf7',
+              write: '#f0d8a8',
+            },
           },
         },
       };
     case EditorTheme.Dark:
       return {
         palette: {
-          primary: {
-            main: '#56b6c2',
+          mode: 'dark',
+          primary: { main: '#56b6c2' },
+          selection: {
+            main: '#3e4453',
+            contrastText: '#fff',
+          },
+          highlight: {
+            number: '#6188a6',
+            parameter: '#c8ae9d',
+            occurences: {
+              read: 'rgba(255, 255, 255, 0.15)',
+              write: 'rgba(255, 255, 128, 0.4)',
+            },
           },
         },
       };
@@ -36,19 +79,11 @@ function getMUIThemeOptions(currentTheme: EditorTheme): ThemeOptions {
 
 function ThemeProvider({ children }: { children?: ReactNode }) {
   const {
-    themeStore: { currentTheme, darkMode },
+    themeStore: { currentTheme },
   } = useRootStore();
 
   const themeOptions = getMUIThemeOptions(currentTheme);
-  const theme = responsiveFontSizes(
-    createTheme({
-      ...themeOptions,
-      palette: {
-        mode: darkMode ? 'dark' : 'light',
-        ...(themeOptions.palette ?? {}),
-      },
-    }),
-  );
+  const theme = responsiveFontSizes(createTheme(themeOptions));
 
   return (
     <MaterialUiThemeProvider theme={theme}>{children}</MaterialUiThemeProvider>