diff --git a/components/switch-theme.js b/components/switch-theme.js index c806b6c..d24c521 100644 --- a/components/switch-theme.js +++ b/components/switch-theme.js @@ -4,6 +4,7 @@ import Brightness3Icon from '@material-ui/icons/Brightness3' export default function SwitchTheme({darkMode, setDarkMode}) { const handleClick = () => { + localStorage.setItem('oki-dark', !darkMode) setDarkMode(!darkMode) } diff --git a/pages/_app.js b/pages/_app.js index 99483fa..580833b 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import {createMuiTheme, ThemeProvider, makeStyles} from '@material-ui/core/styles' import CssBaseline from '@material-ui/core/CssBaseline' import {Provider, useSession} from 'next-auth/client' -import {Box, useMediaQuery} from '@material-ui/core' +import {Box} from '@material-ui/core' import SwitchTheme from '../components/switch-theme' @@ -27,8 +27,7 @@ const useStyles = makeStyles({ export default function MyApp(props) { const {Component, pageProps} = props - const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)') - const [darkMode, setDarkMode] = useState(prefersDarkMode) + const [darkMode, setDarkMode] = useState(true) const [switchFixed, setSwitchFixed] = useState(false) const classes = useStyles() @@ -44,14 +43,6 @@ export default function MyApp(props) { } }), [darkMode]) - useEffect(() => { - if (prefersDarkMode) { - setDarkMode(true) - } else { - setDarkMode(false) - } - }, [prefersDarkMode]) - useEffect(() => { const jssStyles = document.querySelector('#jss-server-side') if (jssStyles) { @@ -67,6 +58,15 @@ export default function MyApp(props) { } }, [props]) + useEffect(() => { + const dark = localStorage.getItem('oki-dark') + if (dark === 'false') { + setDarkMode(false) + } else { + setDarkMode(true) + } + }, []) + return (