From 7fba12cf6024fff6500458e8453cd1385eeb5b47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 5 Jun 2021 23:44:39 +0200
Subject: [PATCH] Replace prefers-color by localStorage for dark mode

---
 components/switch-theme.js |  1 +
 pages/_app.js              | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 11 deletions(-)

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 (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />