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)

src/pages/blog/[id].astro

···
     dark: document.querySelectorAll("[data-mode-dark]"),
   };
 
-  console.log(modeToggled);
+  const cookies = document.cookie
+    .split("; ")
+    .reduce<
+      Record<string, string>
+    >((prev, cur) => ({ ...prev, [cur.split("=")[0]]: cur.split("=")[1] }), {});
 
-  let lightMode = matchMedia("(prefers-color-scheme: light)").matches;
+  const mediaMode = matchMedia("(prefers-color-scheme: light)").matches;
+  const cookieMode =
+    cookies["colour-mode"] === "light"
+      ? true
+      : cookies["colour-mode"] === "dark"
+        ? false
+        : undefined;
+  let lightMode = cookieMode ?? mediaMode;
 
   const updateColourScheme = () => {
     root.style.colorScheme = lightMode ? "light" : "dark";
+    document.cookie = `colour-mode=${root.style.colorScheme}`;
 
     modeToggled[lightMode ? "light" : "dark"].forEach((el) => {
       if (!(el instanceof SVGElement || el instanceof HTMLElement)) return;
···
 <style
   set:html={`
 :root {
-  color-scheme: light dark;
+  color-scheme: ${
+    Astro.cookies.get("colour-mode")?.value === "light"
+      ? "light"
+      : Astro.cookies.get("colour-mode")?.value === "dark"
+        ? "dark"
+        : "light dark"
+  };
 
   --bg-main: light-dark(${light.background.main}, ${dark.background.main});
   --bg-secondary: light-dark(${light.background.secondary}, ${dark.background.secondary});