The Trans Directory
feat: support non-singleton darkmode
+12
-15
+4
-6
quartz/components/Darkmode.tsx
+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
+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
+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
}