From ce58bc45fa8e7d43bc6b7a17d8f3592bf378889c Mon Sep 17 00:00:00 2001 From: harish-sethuraman Date: Fri, 29 Oct 2021 15:39:27 +0530 Subject: [PATCH 1/4] Take system's theme for the site --- beta/src/components/Layout/Nav/Nav.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index af8f2066ba7..5a63e621c97 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -93,13 +93,23 @@ export default function Nav() { const {pathname} = useRouter(); const {isOpen, toggleOpen} = React.useContext(MenuContext); // TODO: persist - // TODO: respect system pref + const [isDark, setIsDark] = React.useState(() => { if (typeof document === 'undefined') { return false; } return document.documentElement.classList.contains('dark'); }); + + React.useEffect(() => { + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.classList.add('dark'); + setIsDark(true); + } else { + setIsDark(false); + } + },[]); + const section = inferSection(pathname); function handleFeedback() { From 8d192b72667db37745632715198fe7d0ceb40493 Mon Sep 17 00:00:00 2001 From: harish-sethuraman Date: Thu, 4 Nov 2021 10:06:46 +0530 Subject: [PATCH 2/4] Add IIFE for dark mode in document load and preserve in localStorage --- beta/src/components/Layout/Nav/Nav.tsx | 31 +++++++------------- beta/src/pages/_document.tsx | 39 ++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 21 deletions(-) diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index 5a63e621c97..7345b1d0217 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -102,13 +102,10 @@ export default function Nav() { }); React.useEffect(() => { - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - document.documentElement.classList.add('dark'); - setIsDark(true); - } else { - setIsDark(false); - } - },[]); + window.__onThemeChange = () => { + setIsDark(window.__theme === 'dark' ? true : false); + }; + }, []); const section = inferSection(pathname); @@ -151,13 +148,9 @@ export default function Nav() { type="button" aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'} onClick={() => { - if (isDark) { - document.documentElement.classList.remove('dark'); - setIsDark(false); - } else { - document.documentElement.classList.add('dark'); - setIsDark(true); - } + window.__setPreferredTheme( + window.__theme === 'light' ? 'dark' : 'light' + ); }} className="hidden lg:flex items-center h-full pr-2"> {isDark ? lightIcon : darkIcon} @@ -186,13 +179,9 @@ export default function Nav() { type="button" aria-label={isDark ? 'Use Light Mode' : 'Use Dark Mode'} onClick={() => { - if (isDark) { - document.documentElement.classList.remove('dark'); - setIsDark(false); - } else { - document.documentElement.classList.add('dark'); - setIsDark(true); - } + window.__setPreferredTheme( + window.__theme === 'light' ? 'dark' : 'light' + ); }} className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6"> {isDark ? lightIcon : darkIcon} diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx index a948e9d8999..e82b7a79d23 100644 --- a/beta/src/pages/_document.tsx +++ b/beta/src/pages/_document.tsx @@ -12,6 +12,45 @@ class MyDocument extends Document { +