Cleanup

frontend_reactjs/src/main.tsx

@@ -1,5 +1,5 @@
 import "@fontsource/inter";
-import React from 'react'
+import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
@@ -7,9 +7,9 @@ import { registerSW } from 'virtual:pwa-register'
 import { ThemeProvider } from '@emotion/react'
 import { createTheme } from '@mui/material'
 import { ruRU } from '@mui/material/locale'
-import { usePrefStore } from "./store/preferences.ts";
+import { getDarkMode, usePrefStore } from "./store/preferences.ts";
 
-const theme = createTheme(
+const darkTheme = createTheme(
   {
     typography: {
       fontFamily: [
@@ -29,6 +29,34 @@ const theme = createTheme(
       }
     },
     palette: {
+      mode: "dark",
+      primary: { main: '#1976d2' },
+    },
+  },
+  ruRU,
+);
+
+const lightTheme = createTheme(
+  {
+    typography: {
+      fontFamily: [
+        'Inter'
+      ].join(',')
+    },
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          //disableRipple: true,
+        }
+      },
+      MuiButtonGroup: {
+        defaultProps: {
+          //disableRipple: true,
+        }
+      }
+    },
+    palette: {
+      mode: "light",
       primary: { main: '#1976d2' },
     },
   },
@@ -46,10 +74,22 @@ const updateSW = registerSW({
   },
 });
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
+function ThemedApp() {
+  const prefStore = usePrefStore()
+
+  useEffect(() => {
+    getDarkMode()
+  }, [])
+
+  return (
+    <ThemeProvider theme={prefStore.darkMode ? darkTheme : lightTheme}>
       <App />
     </ThemeProvider>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <ThemedApp />
   </React.StrictMode>,
 )