vielle.dev
[Archived] Archived WIP of vielle.dev
Update functionality of colour picker
+15
-13
src/pages/blog/[id].astro
+15
-13
src/pages/blog/[id].astro
···
40
40
41
41
<h1>{title}</h1>
42
42
43
-
<button id="colour-toggle" style="display: none">
43
+
<button
44
+
aria-label="toggle colour scheme"
45
+
id="colour-toggle"
46
+
style="visibility: hidden"
47
+
>
44
48
<Sun data-mode-light />
45
49
<Moon data-mode-dark />
46
50
</button>
47
51
</heading>
48
-
<main data-colour-scheme-nojs style={`--accent: ${colour};`}>
52
+
<main style={`--accent: ${colour};`}>
49
53
<div class="content">
50
54
<Content />
51
55
</div>
···
53
57
</Base>
54
58
55
59
<script>
56
-
const els = document.querySelectorAll("main[data-colour-scheme-nojs]");
57
-
if (els.length !== 1)
58
-
throw new Error(
59
-
"No `main[data-colour-scheme-nojs]`` found, or multiple found",
60
-
);
61
-
const el = els[0];
62
-
if (!(el instanceof HTMLElement)) throw new Error("Not HTML Element!");
60
+
const root = document.querySelector(":root");
61
+
if (!(root instanceof HTMLElement)) throw new Error(":root is not html");
63
62
64
63
const button = document.getElementById("colour-toggle");
65
64
if (!button) throw new Error("No #colour-toggle element");
···
69
68
dark: document.querySelectorAll("[data-mode-dark]"),
70
69
};
71
70
72
-
delete el.dataset["colourSchemeNojs"];
71
+
console.log(modeToggled);
73
72
74
73
let lightMode = matchMedia("(prefers-color-scheme: light)").matches;
74
+
75
75
const updateColourScheme = () => {
76
+
root.style.colorScheme = lightMode ? "light" : "dark";
77
+
76
78
modeToggled[lightMode ? "light" : "dark"].forEach((el) => {
77
79
if (!(el instanceof SVGElement || el instanceof HTMLElement)) return;
78
80
el.style.display = "block";
79
81
});
82
+
80
83
modeToggled[!lightMode ? "light" : "dark"].forEach((el) => {
81
84
if (!(el instanceof SVGElement || el instanceof HTMLElement)) return;
82
85
el.style.display = "none";
83
86
});
84
-
el.dataset["mode"] = lightMode ? "light" : "dark";
85
87
};
88
+
86
89
updateColourScheme();
87
-
88
-
button.style.display = "block";
89
90
button.addEventListener("click", () => {
90
91
lightMode = !lightMode;
91
92
updateColourScheme();
92
93
});
94
+
button.style.visibility = "visible";
93
95
</script>
94
96
95
97
<!-- post content styles -->