#533 Added theme mode provider

src/App.js

@@ -1,6 +1,6 @@
 import { Provider } from 'react-redux';
 import { Grid } from '@mui/material';
-import { ThemeProvider } from "@mui/material/styles";
+import { ThemeModeProvider } from 'features/ThemeModeProvider';
 import store from 'app/store';
 import InfoAlert from 'features/alert/InfoAlert.js';
 import WarningAlert from 'features/alert/WarningAlert.js';
@@ -18,31 +18,31 @@ import theme from 'styles/theme.js';
 
 const App = () => {
   return (
-    <ThemeProvider theme={theme}>
       <Provider store={store}>
-        <Grid container>
-          <Nav />
-          <NavDialogs />
-        </Grid>
-        <Grid container sx={{ p: 2 }} spacing={2}>
-          <Grid item xs={12} md={5}>
-            <Board />
+        <ThemeModeProvider theme={theme}>
+          <Grid container>
+            <Nav />
+            <NavDialogs />
           </Grid>
-          <Grid item xs={12} md={7}>
-            <Panel />
+          <Grid container sx={{ p: 2 }} spacing={2}>
+            <Grid item xs={12} md={5}>
+              <Board />
+            </Grid>
+            <Grid item xs={12} md={7}>
+              <Panel />
+            </Grid>
           </Grid>
-        </Grid>
-        <ModeFenDialogs />
-        <ModePlayDialogs />
-        <ModeRavDialogs />
-        <ModeSanDialogs />
-        <ModeSanDialogs />
-        <ModeStockfishDialogs />
-        <ProgressDialog />
-        <InfoAlert />
-        <WarningAlert />
+          <ModeFenDialogs />
+          <ModePlayDialogs />
+          <ModeRavDialogs />
+          <ModeSanDialogs />
+          <ModeSanDialogs />
+          <ModeStockfishDialogs />
+          <ProgressDialog />
+          <InfoAlert />
+          <WarningAlert />
+        </ThemeModeProvider>
       </Provider>
-    </ThemeProvider>
   );
 };
 

src/features/ThemeModeProvider.js

@@ -0,0 +1,20 @@
+import { CssBaseline } from "@mui/material";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { useSelector } from "react-redux";
+
+export const ThemeModeProvider = ({ children, theme }) => {
+  const darkTheme = useSelector(state => state.nav.dialogs.settings.fields.darkTheme);
+  const mode = darkTheme === 'on' ? 'dark' : 'light';
+  theme = createTheme({
+    ...theme,
+    palette: {
+      mode
+    }
+  })
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  )
+}