Replace prefers-color by localStorage for dark mode

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)
   }
 

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(true)
-  const [darkMode, setDarkMode] = useState(prefersDarkMode)
   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 (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />