xevion/icons
1
0
Fork 0
mirror of https://github.com/Xevion/icons.git synced 2025-12-06 03:15:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Attempt to improve darkmode FOUC with direct script tag in head

Browse Source
This commit is contained in:
Xevion
2023-02-17 03:14:14 -06:00
parent 5164d5f8da
commit 511229292c
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/js/darkmode.js
View File

@@ -1,15 +1,16 @@
const valid = ['system', 'dark', 'light']; const valid = ['system', 'dark', 'light'];
console.log(localStorage.theme);
// Set the default to system, ignore & delete invalid values // Set the default to system, ignore & delete invalid values
if (!('theme' in localStorage) || valid.indexOf(localStorage.theme) === -1) if (!('theme' in localStorage) || valid.indexOf(localStorage.theme) === -1)
localStorage.theme = 'system'; 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; const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.add(preferDark ? 'dark' : 'light'); document.documentElement.classList.add(preferDark ? 'dark' : 'light');
} else if (localStorage.theme === 'dark') { } else if (currentTheme === 'dark') {
document.documentElement.classList.add('dark') document.documentElement.classList.add('dark')
} else if (localStorage.theme === 'light') { } else if (currentTheme === 'light') {
document.documentElement.classList.remove('dark') document.documentElement.classList.remove('dark')
} }

4
src/pages/_document.tsx
View File

@@ -4,7 +4,9 @@ import Script from 'next/script'
export default function Document() { export default function Document() {
return ( return (
<Html> <Html>
<Head /> <Head>
<script src="/js/darkmode.js" />
</Head>
<body> <body>
<Main/> <Main/>
<NextScript/> <NextScript/>