From 50b098d2cf52ab2d0e67f97aec46edd4dfdcc40d Mon Sep 17 00:00:00 2001 From: Xevion Date: Fri, 17 Feb 2023 03:03:56 -0600 Subject: [PATCH] Add internal dark mode switching script --- public/js/darkmode.js | 15 +++++++++++++++ src/pages/_document.tsx | 15 +++++++++++++++ tailwind.config.cjs | 1 + 3 files changed, 31 insertions(+) create mode 100644 public/js/darkmode.js create mode 100644 src/pages/_document.tsx diff --git a/public/js/darkmode.js b/public/js/darkmode.js new file mode 100644 index 0000000..787e81c --- /dev/null +++ b/public/js/darkmode.js @@ -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') +} \ No newline at end of file diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 0000000..555f938 --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,15 @@ +import {Html, Head, Main, NextScript} from 'next/document' +import Script from 'next/script' + +export default function Document() { + return ( + + + +
+ +