vielle.dev
[Archived] Archived WIP of vielle.dev
Store the colour scheme in a cookie and set it on the server by default.
- prevents UA colour scheme flashing
- retains if user looses JS (internet etc)
+21
-3
src/pages/blog/[id].astro
+21
-3
src/pages/blog/[id].astro
···
71
71
dark: document.querySelectorAll("[data-mode-dark]"),
72
72
};
73
73
74
-
console.log(modeToggled);
74
+
const cookies = document.cookie
75
+
.split("; ")
76
+
.reduce<
77
+
Record<string, string>
78
+
>((prev, cur) => ({ ...prev, [cur.split("=")[0]]: cur.split("=")[1] }), {});
75
79
76
-
let lightMode = matchMedia("(prefers-color-scheme: light)").matches;
80
+
const mediaMode = matchMedia("(prefers-color-scheme: light)").matches;
81
+
const cookieMode =
82
+
cookies["colour-mode"] === "light"
83
+
? true
84
+
: cookies["colour-mode"] === "dark"
85
+
? false
86
+
: undefined;
87
+
let lightMode = cookieMode ?? mediaMode;
77
88
78
89
const updateColourScheme = () => {
79
90
root.style.colorScheme = lightMode ? "light" : "dark";
91
+
document.cookie = `colour-mode=${root.style.colorScheme}`;
80
92
81
93
modeToggled[lightMode ? "light" : "dark"].forEach((el) => {
82
94
if (!(el instanceof SVGElement || el instanceof HTMLElement)) return;
···
611
623
<style
612
624
set:html={`
613
625
:root {
614
-
color-scheme: light dark;
626
+
color-scheme: ${
627
+
Astro.cookies.get("colour-mode")?.value === "light"
628
+
? "light"
629
+
: Astro.cookies.get("colour-mode")?.value === "dark"
630
+
? "dark"
631
+
: "light dark"
632
+
};
615
633
616
634
--bg-main: light-dark(${light.background.main}, ${dark.background.main});
617
635
--bg-secondary: light-dark(${light.background.secondary}, ${dark.background.secondary});