fix: Fix theme handling

db/app/core/components/DarkModeToggle.tsx

@@ -1,10 +1,11 @@
-import { Box, IconButton, Theme } from '@mui/material'
+import {useTheme as nextUseTheme} from "next-themes"
+import { Box, IconButton, Theme, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles'
 import Brightness4Icon from '@mui/icons-material/Brightness4'
 import Brightness7Icon from '@mui/icons-material/Brightness7'
 import { ThemeMode } from '../state/ThemeMode'
 import { useGlobalState } from '../state/GlobalState'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -12,8 +13,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: 'primary',
     flexGrow: 1,
+    color: theme.palette.text.primary,
   },
   iconButton: {
     ml: 1,
@@ -21,7 +22,9 @@ const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 export const DarkModeToggle = () => {
+  const [mounted, setMounted] = useState(false)
   const theme = useTheme()
+  const {theme: nextTheme, setTheme} = nextUseTheme()
   const classes = useStyles()
   const [preferedColorScheme, setPreferedColorScheme] = useGlobalState(
     useCallback(
@@ -30,17 +33,23 @@ export const DarkModeToggle = () => {
     ),
   )
 
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+
+
   const toggleColor = () => {
     const newTheme =
       preferedColorScheme === ThemeMode.LIGHT_MODE
         ? ThemeMode.DARK_MODE
         : ThemeMode.LIGHT_MODE
+    setTheme(newTheme);
     setPreferedColorScheme(newTheme)
   }
 
+
   return (
     <Box className={classes.modeToggleButtonHolder} id="modeToggleButtonHolder">
-      {theme.palette.mode} mode
+      <Typography>{theme.palette.mode} toggle</Typography>
       <IconButton
         className={classes.iconButton}
         sx={{ ml: 1 }}

db/app/core/components/Footer.tsx

@@ -1,14 +1,16 @@
-import {Box, Typography} from '@mui/material'
+import {Box, Theme, Typography} from '@mui/material'
 import {makeStyles} from '@mui/styles'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: Theme) => ({
     footerHolder: {
         display: 'flex',
         flex: '0 1 3vh',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        padding: '0 10vw 0 10vw'
+        padding: '0 10vw 0 10vw',
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.text.primary
     }
 }))
 

db/app/core/components/Header.tsx

@@ -33,6 +33,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     height: '100%',
     alignItems: 'center',
     borderBottom: `1px solid transparent`,
+    color: theme.palette.text.primary,
     '&:hover': {
       borderBottom: `1px solid ${theme.palette.action.hover}`,
     },

db/app/core/components/JsonTheme.tsx

@@ -9,7 +9,7 @@ import { makeStyles } from '@mui/styles'
 import { ReactJsonViewThemes } from '../state/ReactJsonViewThemes'
 import { LocalStorageKeys } from '../dto/SaveKeys'
 import { useGlobalState } from '../state/GlobalState'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react';
 
 const useStyles = makeStyles((theme: Theme) => ({
   jsonHolder: {
@@ -24,6 +24,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 export const JsonTheme = () => {
+  const [mounted, setMounted] = useState(false)
   const classes = useStyles()
   const [preferedJsonViewerTheme, setPreferedJsonViewerTheme] = useGlobalState(
     useCallback(
@@ -34,6 +35,10 @@ export const JsonTheme = () => {
       [],
     ),
   )
+
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+
   return (
     <>
       <Box className={classes.jsonHolder}>

db/app/core/components/LocaleSelect.tsx

@@ -1,6 +1,6 @@
 import { Select, MenuItem, Theme, Box, FormControl } from '@mui/material'
 import {makeStyles} from '@mui/styles'
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useGlobalState } from '../state/GlobalState'
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -18,12 +18,16 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 
 export const LocaleSelect = () => {
+  const [mounted, setMounted] = useState(false)
   const classes = useStyles()
   const [preferedLocale, setPreferedLocale] = useGlobalState(useCallback(state => [state.preferedLocale, state.setPreferedLocale],[]))
   const [localesList, refreshLocalesList] = useGlobalState(useCallback(state => [state.localesList, state.refreshLocalesList],[]))
 
+  useEffect(() => setMounted(true), [])
   useEffect(()=> {refreshLocalesList();}, [refreshLocalesList])
 
+  if (!mounted) return null
+
   return (
     <>
     <Box className={classes.localeHolder}>

db/app/core/state/GlobalState.ts

@@ -47,7 +47,7 @@ const preferedLocale = isClientSide() ? localStorage?.getItem(LocalStorageKeys.P
 const storedPreferedJsonTheme = isClientSide() ?  localStorage?.getItem(
   LocalStorageKeys.PREFERED_JSON_THEME,
 ) : ThemeMode.DARK_MODE;
-const preferedColorScheme = isClientSide() ? localStorage?.getItem(LocalStorageKeys.PREFERED_COLOR_SCHEME) : ReactJsonViewThemes[0];
+const preferedColorScheme = isClientSide() ? localStorage?.getItem(LocalStorageKeys.PREFERED_COLOR_SCHEME) : null;
 
 export const useGlobalState = create<GlobalState>((set) => ({
   sptarkovWebsiteUrl: process.env.REACT_APP_SPTARKOV_HOME ? process.env.REACT_APP_SPTARKOV_HOME : '',

db/app/core/theme/darkTheme.ts

@@ -1,8 +1,9 @@
 import {ThemeMode} from '../state/ThemeMode';
 import {common, grey, lightBlue, yellow} from '@mui/material/colors';
-import createPalette from "@mui/material/styles/createPalette";
+import { createTheme } from "@mui/material/styles";
 
-export const darkPalette = createPalette({
+export const darkPalette = createTheme({
+    palette:{
         mode: ThemeMode.DARK_MODE,
         background: {
             default: grey[900],
@@ -16,4 +17,5 @@ export const darkPalette = createPalette({
         action: {
             hover: yellow[700]
         },
+    }
 });

db/app/core/theme/lightTheme.ts

@@ -1,8 +1,9 @@
 import {ThemeMode} from '../state/ThemeMode';
 import {blue, common, grey} from "@mui/material/colors";
-import createPalette from "@mui/material/styles/createPalette";
+import {createTheme} from "@mui/material/styles";
 
-export const lightPalette = createPalette({
+export const lightPalette = createTheme({
+    palette: {
         mode: ThemeMode.LIGHT_MODE,
         background: {
             default: grey[100],
@@ -16,4 +17,5 @@ export const lightPalette = createPalette({
         action: {
             hover: blue[500],
         }
+    }
 });

db/app/pages/_app.tsx

@@ -7,8 +7,8 @@ import {
 } from "blitz"
 
 import CssBaseline from "@mui/material/CssBaseline";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { ThemeProvider } from "@mui/material/styles";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useMediaQuery } from "@mui/material";
 import { useGlobalState } from "app/core/state/GlobalState";
 import { LocalStorageKeys } from "app/core/dto/SaveKeys";
@@ -34,8 +34,12 @@ export default function App({ Component, pageProps }: AppProps) {
     }, [prefersDarkMode]) // Need to be only used on prefersDarkMode change
   const getLayout = Component.getLayout || ((page) => page)
 
+  const palette = useMemo(
+    ()=> getTheme(preferedColorScheme === ThemeMode.DARK_MODE ? darkPalette.palette : lightPalette.palette),
+    [preferedColorScheme]);
+
   return (
-    <ThemeProvider theme={getTheme(preferedColorScheme === ThemeMode.DARK_MODE ? darkPalette : lightPalette)}>
+    <ThemeProvider theme={palette}>
       <CssBaseline />
       <ErrorBoundary
         FallbackComponent={RootErrorFallback}

db/app/pages/index.tsx

@@ -195,15 +195,15 @@
 // export default Home
 
 
-import {Box, Typography} from '@mui/material'
+import {Box, Theme, Typography} from '@mui/material'
 import {makeStyles} from "@mui/styles";
 import React from "react";
 import { BlitzPage } from 'blitz';
 import { Layout } from 'app/core/layouts/Layout';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: Theme) => ({
     container: {
-        background: 'background.default',
+        background: theme.palette.background.default,
         display: 'flex',
         flexDirection: 'column',
         flexGrow: 1,

db/package.json

@@ -25,6 +25,7 @@
     "@mui/material": "5.x",
     "@mui/styles": "5.x",
     "blitz": "0.44.4",
+    "next-themes": "0.0.15",
     "react": "18.0.0-beta-149b420f6-20211119",
     "react-dom": "18.0.0-alpha-5ca4b0433-20211020",
     "react-json-view": "1.21.3",

db/yarn.lock

@@ -6744,6 +6744,11 @@ new-github-issue-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/new-github-issue-url/-/new-github-issue-url-0.2.1.tgz#e17be1f665a92de465926603e44b9f8685630c1d"
   integrity sha512-md4cGoxuT4T4d/HDOXbrUHkTKrp/vp+m3aOA7XXVYwNsUNMK49g3SQicTSeV5GIz/5QVGAeYRAOlyp9OvlgsYA==
 
+next-themes@0.0.15:
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.15.tgz#ab0cee69cd763b77d41211f631e108beab39bf7d"
+  integrity sha512-LTmtqYi03c4gMTJmWwVK9XkHL7h0/+XrtR970Ujvtu3s0kZNeJN24aJsi4rkZOI8i19+qq6f8j+8Duwy5jqcrQ==
+
 "next@npm:@blitzjs/next@11.1.0-0.44.4":
   version "11.1.0-0.44.4"
   resolved "https://registry.yarnpkg.com/@blitzjs/next/-/next-11.1.0-0.44.4.tgz#68d00b08405b7843d00275ecd271603bb3dcecaa"