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

Add internal dark mode switching script

Browse Source
This commit is contained in:
Xevion
2023-02-17 03:03:56 -06:00
parent d4491464c1
commit 50b098d2cf
3 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/js/darkmode.js Normal file
View File

@@ -0,0 +1,15 @@
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') {
const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.add(preferDark ? 'dark' : 'light');
} else if (localStorage.theme === 'dark') {
document.documentElement.classList.add('dark')
} else if (localStorage.theme === 'light') {
document.documentElement.classList.remove('dark')
}

15
src/pages/_document.tsx Normal file
View File

@@ -0,0 +1,15 @@
import {Html, Head, Main, NextScript} from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main/>
<NextScript/>
<Script strategy="beforeInteractive" id="automatic-darkmode" src="/js/darkmode.js"/>
</body>
</Html>
)
}

1
tailwind.config.cjs
View File

@@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"], content: ["./src/**/*.{js,ts,jsx,tsx}"],
darkMode: 'class',
theme: { theme: {
extend: {}, extend: {},
}, },