From 0fcaeb2cdad13e846f81a07cc8fa32b6a215fe49 Mon Sep 17 00:00:00 2001 From: Hazem Krimi Date: Sat, 4 Sep 2021 23:29:01 +0100 Subject: [PATCH] Fix color theme --- components/DarkMode.tsx | 16 ++++++++++++++-- pages/_document.tsx | 30 ++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/components/DarkMode.tsx b/components/DarkMode.tsx index a2593a2..21febbd 100644 --- a/components/DarkMode.tsx +++ b/components/DarkMode.tsx @@ -9,6 +9,10 @@ const reducer = (state: boolean, action: { type: string }) => { switch (action.type) { case 'TOGGLE': return !state; + case 'DARK': + return true; + case 'LIGHT': + return false; default: return state; } @@ -16,10 +20,18 @@ const reducer = (state: boolean, action: { type: string }) => { const DarkMode: FC = ({ children }) => { const [dark, dispatch] = useReducer(reducer, false); - const toggle = () => dispatch({ type: 'TOGGLE' }); + const toggle = () => { + if (dark) window.localStorage.setItem('theme', 'light'); + else window.localStorage.setItem('theme', 'dark'); + + dispatch({ type: 'TOGGLE' }); + }; useEffect(() => { - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) toggle(); + const root = window.document.documentElement; + const initialTheme = root.style.getPropertyValue('--theme'); + + dispatch({ type: initialTheme === 'dark' ? 'DARK' : 'LIGHT' }); }, []); return {children}; diff --git a/pages/_document.tsx b/pages/_document.tsx index d9410a9..7733739 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -43,6 +43,36 @@ class Doc extends Document { ` }} /> +