From 959c5fb0a69943b1ccb371991483cd4fd9b4d682 Mon Sep 17 00:00:00 2001 From: Mangiang Date: Sun, 19 Dec 2021 12:51:52 -0500 Subject: [PATCH] fix: Fix theme handling --- db/app/core/components/DarkModeToggle.tsx | 17 +++++++++--- db/app/core/components/Footer.tsx | 8 +++--- db/app/core/components/Header.tsx | 1 + db/app/core/components/JsonTheme.tsx | 7 ++++- db/app/core/components/LocaleSelect.tsx | 6 ++++- db/app/core/state/GlobalState.ts | 2 +- db/app/core/theme/darkTheme.ts | 32 ++++++++++++----------- db/app/core/theme/lightTheme.ts | 30 +++++++++++---------- db/app/pages/_app.tsx | 10 ++++--- db/app/pages/index.tsx | 6 ++--- db/package.json | 1 + db/yarn.lock | 5 ++++ 12 files changed, 80 insertions(+), 45 deletions(-) diff --git a/db/app/core/components/DarkModeToggle.tsx b/db/app/core/components/DarkModeToggle.tsx index f6de396..e6db3c0 100644 --- a/db/app/core/components/DarkModeToggle.tsx +++ b/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 ( - {theme.palette.mode} mode + {theme.palette.mode} toggle ({ +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 } })) diff --git a/db/app/core/components/Header.tsx b/db/app/core/components/Header.tsx index 2296d4f..6241566 100644 --- a/db/app/core/components/Header.tsx +++ b/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}`, }, diff --git a/db/app/core/components/JsonTheme.tsx b/db/app/core/components/JsonTheme.tsx index f6b4529..5ff19fb 100644 --- a/db/app/core/components/JsonTheme.tsx +++ b/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 ( <> diff --git a/db/app/core/components/LocaleSelect.tsx b/db/app/core/components/LocaleSelect.tsx index 5de8bd4..1c2acfe 100644 --- a/db/app/core/components/LocaleSelect.tsx +++ b/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 ( <> diff --git a/db/app/core/state/GlobalState.ts b/db/app/core/state/GlobalState.ts index 6be4bf0..066fd14 100644 --- a/db/app/core/state/GlobalState.ts +++ b/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((set) => ({ sptarkovWebsiteUrl: process.env.REACT_APP_SPTARKOV_HOME ? process.env.REACT_APP_SPTARKOV_HOME : '', diff --git a/db/app/core/theme/darkTheme.ts b/db/app/core/theme/darkTheme.ts index 1183f02..85c0985 100644 --- a/db/app/core/theme/darkTheme.ts +++ b/db/app/core/theme/darkTheme.ts @@ -1,19 +1,21 @@ 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({ - mode: ThemeMode.DARK_MODE, - background: { - default: grey[900], - paper: '#121212' - }, - text: { - primary: common.white, - secondary: '#8894a2', - disabled: lightBlue[100] - }, - action: { - hover: yellow[700] - }, +export const darkPalette = createTheme({ + palette:{ + mode: ThemeMode.DARK_MODE, + background: { + default: grey[900], + paper: '#121212' + }, + text: { + primary: common.white, + secondary: '#8894a2', + disabled: lightBlue[100] + }, + action: { + hover: yellow[700] + }, + } }); \ No newline at end of file diff --git a/db/app/core/theme/lightTheme.ts b/db/app/core/theme/lightTheme.ts index 9a8a7a3..a16b10e 100644 --- a/db/app/core/theme/lightTheme.ts +++ b/db/app/core/theme/lightTheme.ts @@ -1,19 +1,21 @@ 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({ - mode: ThemeMode.LIGHT_MODE, - background: { - default: grey[100], - paper: grey[300] - }, - text: { - primary: common.black, - secondary: blue[500], - disabled: grey[600] - }, - action: { - hover: blue[500], +export const lightPalette = createTheme({ + palette: { + mode: ThemeMode.LIGHT_MODE, + background: { + default: grey[100], + paper: grey[300] + }, + text: { + primary: common.black, + secondary: blue[500], + disabled: grey[600] + }, + action: { + hover: blue[500], + } } }); \ No newline at end of file diff --git a/db/app/pages/_app.tsx b/db/app/pages/_app.tsx index 589a16b..04551b9 100644 --- a/db/app/pages/_app.tsx +++ b/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 React, { useEffect } from "react"; +import { ThemeProvider } from "@mui/material/styles"; +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 ( - + ({ +const useStyles = makeStyles((theme: Theme) => ({ container: { - background: 'background.default', + background: theme.palette.background.default, display: 'flex', flexDirection: 'column', flexGrow: 1, diff --git a/db/package.json b/db/package.json index 1dbb036..a74392f 100644 --- a/db/package.json +++ b/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", diff --git a/db/yarn.lock b/db/yarn.lock index 3446259..f16ab07 100644 --- a/db/yarn.lock +++ b/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"