The Trans Directory
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: support non-singleton darkmode

+12 -15
+4 -6
quartz/components/Darkmode.tsx
··· 1 - // @ts-ignore: this is safe, we don't want to actually make darkmode.inline.ts a module as 2 - // modules are automatically deferred and we don't want that to happen for critical beforeDOMLoads 3 - // see: https://v8.dev/features/modules#defer 1 + // @ts-ignore 4 2 import darkmodeScript from "./scripts/darkmode.inline" 5 3 import styles from "./styles/darkmode.scss" 6 4 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" ··· 9 7 10 8 const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { 11 9 return ( 12 - <button class={classNames(displayClass, "darkmode")} id="darkmode"> 10 + <button class={classNames(displayClass, "darkmode")}> 13 11 <svg 14 12 xmlns="http://www.w3.org/2000/svg" 15 13 xmlnsXlink="http://www.w3.org/1999/xlink" 16 14 version="1.1" 17 - id="dayIcon" 15 + class="dayIcon" 18 16 x="0px" 19 17 y="0px" 20 18 viewBox="0 0 35 35" ··· 29 27 xmlns="http://www.w3.org/2000/svg" 30 28 xmlnsXlink="http://www.w3.org/1999/xlink" 31 29 version="1.1" 32 - id="nightIcon" 30 + class="nightIcon" 33 31 x="0px" 34 32 y="0px" 35 33 viewBox="0 0 100 100"
+4 -5
quartz/components/scripts/darkmode.inline.ts
··· 25 25 emitThemeChangeEvent(newTheme) 26 26 } 27 27 28 - // Darkmode toggle 29 - const themeButton = document.querySelector("#darkmode") as HTMLButtonElement 30 - if (themeButton) { 31 - themeButton.addEventListener("click", switchTheme) 32 - window.addCleanup(() => themeButton.removeEventListener("click", switchTheme)) 28 + for (const darkmodeButton of document.getElementsByClassName("darkmode")) { 29 + darkmodeButton.addEventListener("click", switchTheme) 30 + window.addCleanup(() => darkmodeButton.removeEventListener("click", switchTheme)) 33 31 } 32 + 34 33 // Listen for changes in prefers-color-scheme 35 34 const colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)") 36 35 colorSchemeMediaQuery.addEventListener("change", themeChange)
+4 -4
quartz/components/styles/darkmode.scss
··· 29 29 } 30 30 31 31 :root[saved-theme="dark"] .darkmode { 32 - & > #dayIcon { 32 + & > .dayIcon { 33 33 display: none; 34 34 } 35 - & > #nightIcon { 35 + & > .nightIcon { 36 36 display: inline; 37 37 } 38 38 } 39 39 40 40 :root .darkmode { 41 - & > #dayIcon { 41 + & > .dayIcon { 42 42 display: inline; 43 43 } 44 - & > #nightIcon { 44 + & > .nightIcon { 45 45 display: none; 46 46 } 47 47 }