From 8191d5e1efdf50353234f7f4bee99b8ecd717a0a Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Tue, 6 Jun 2023 20:58:26 -0700 Subject: [PATCH] fix darkmode script load --- quartz/components/Darkmode.tsx | 3 ++ quartz/components/scripts/darkmode.inline.ts | 34 +++++++++----------- quartz/plugins/emitters/contentPage.tsx | 4 +-- quartz/styles/syntax.scss | 2 +- 4 files changed, 22 insertions(+), 21 deletions(-) diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx index 0161e0ad..ae6788cb 100644 --- a/quartz/components/Darkmode.tsx +++ b/quartz/components/Darkmode.tsx @@ -1,3 +1,6 @@ +// @ts-ignore: this is safe, we don't want to actually make darkmode.inline.ts a module as +// modules are automatically deferred and we don't want that to happen for critical beforeDOMLoads +// see: https://v8.dev/features/modules#defer import darkmodeScript from "./scripts/darkmode.inline" import styles from '../styles/darkmode.scss' diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts index d2b6e064..f00a8733 100644 --- a/quartz/components/scripts/darkmode.inline.ts +++ b/quartz/components/scripts/darkmode.inline.ts @@ -1,25 +1,23 @@ -export default "Darkmode" +const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark' +const currentTheme = localStorage.getItem('theme') ?? userPref +document.documentElement.setAttribute('saved-theme', currentTheme) -const currentTheme = localStorage.getItem("theme") -const theme = - currentTheme ?? - (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") - -document.documentElement.setAttribute("saved-theme", theme) - -window.addEventListener("DOMContentLoaded", () => { - const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement - toggleSwitch.addEventListener("change", (e: any) => { +window.addEventListener('DOMContentLoaded', () => { + const switchTheme = (e: any) => { if (e.target.checked) { - document.documentElement.setAttribute("saved-theme", "dark") - localStorage.setItem("theme", "dark") - } else { - document.documentElement.setAttribute("saved-theme", "light") - localStorage.setItem("theme", "light") + document.documentElement.setAttribute('saved-theme', 'dark') + localStorage.setItem('theme', 'dark') } - }) + else { + document.documentElement.setAttribute('saved-theme', 'light') + localStorage.setItem('theme', 'light') + } + } - if (theme === "dark") { + // Darkmode toggle + const toggleSwitch = document.querySelector('#darkmode-toggle') as HTMLInputElement + toggleSwitch.addEventListener('change', switchTheme, false) + if (currentTheme === 'dark') { toggleSwitch.checked = true } }) diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx index 9cca0af1..61ddcfbd 100644 --- a/quartz/plugins/emitters/contentPage.tsx +++ b/quartz/plugins/emitters/contentPage.tsx @@ -40,9 +40,9 @@ export class ContentPage extends QuartzEmitterPlugin { const pageResources: StaticResources = { css: [baseDir + "/index.css", ...resources.css,], js: [ - { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", type: 'module' }, + { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady" }, ...resources.js, - { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", type: 'module' } + { src: baseDir + "/postscript.js", loadTime: "afterDOMReady" } ] } diff --git a/quartz/styles/syntax.scss b/quartz/styles/syntax.scss index c53904aa..623ee6f4 100644 --- a/quartz/styles/syntax.scss +++ b/quartz/styles/syntax.scss @@ -14,7 +14,7 @@ } // npx convert-sh-theme https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/github-dark.json -:root[saved-theme="dark"] { +[saved-theme="dark"] { --shiki-color-text: #e1e4e8 !important; --shiki-color-background: #24292e !important; --shiki-token-constant: #79b8ff !important;