From 511229292c7cf489cf25c9650d64f4783032c799 Mon Sep 17 00:00:00 2001 From: Xevion Date: Fri, 17 Feb 2023 03:14:14 -0600 Subject: [PATCH] Attempt to improve darkmode FOUC with direct script tag in head --- public/js/darkmode.js | 9 +++++---- src/pages/_document.tsx | 4 +++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/public/js/darkmode.js b/public/js/darkmode.js index 787e81c..f8616b7 100644 --- a/public/js/darkmode.js +++ b/public/js/darkmode.js @@ -1,15 +1,16 @@ const valid = ['system', 'dark', 'light']; -console.log(localStorage.theme); // Set the default to system, ignore & delete invalid values if (!('theme' in localStorage) || valid.indexOf(localStorage.theme) === -1) localStorage.theme = 'system'; -if (localStorage.theme === 'system') { +// Process the theme extracted +const currentTheme = localStorage.theme; +if (currentTheme === 'system') { const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches; document.documentElement.classList.add(preferDark ? 'dark' : 'light'); -} else if (localStorage.theme === 'dark') { +} else if (currentTheme === 'dark') { document.documentElement.classList.add('dark') -} else if (localStorage.theme === 'light') { +} else if (currentTheme === 'light') { document.documentElement.classList.remove('dark') } \ No newline at end of file diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 555f938..4018f3b 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -4,7 +4,9 @@ import Script from 'next/script' export default function Document() { return ( - + +