added light/dark mode startup script

Author: benev0

content/assets/startup.js

@@ -0,0 +1,9 @@
+let storageResult = localStorage.getItem('DarkModePreferred');
+var preferDark  = JSON.parse(storageResult ? storageResult : 'null');
+if (preferDark === null) {
+  preferDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+if (preferDark === null) {
+  preferDark = false;
+}
+document.documentElement.dataset.appliedMode = preferDark ? 'dark' : 'light';

content/assets/styles.css

@@ -1,5 +1,34 @@
+:root[data-applied-mode="light"] {
+    color-scheme: light;
+    --base-color: var(--ctp-latte-base);
+    --text-color: var(--ctp-latte-base);
+
+    --mantle-color: var(--ctp-latte-mantle);
+    --crust-color: var(--ctp-latte-crust);
+
+}
+
+:root[data-applied-mode="dark"] {
+    color-scheme: dark;
+    --base-color: var(--ctp-mocha-base);
+    --text-color: var(--ctp-mocha-text);
+
+    --mantle-color: var(--ctp-mocha-mantle);
+    --crust-color: var(--ctp-mocha-crust);
+}
+
+html, body {
+    font-family: "Courier New", monospace;
+    margin: 0px;
+    overflow-x: clip;
+    background-color: var(--base-color);
+}
+
 .blog {
-    border-color: black;
+    border-color: var(--mantle-color);
+    background-color: var(--crust-color);
+
+    color: inherit;
     border-radius: 2px;
     border-width: 2px;
     border-style: solid;

src/blog/render.gleam

@@ -3,7 +3,7 @@ import gleam/dict
 import gleam/list
 import gleam/result
 import lustre/attribute.{attribute}
-import lustre/element/html.{a, body, div, head, html, link, p, text}
+import lustre/element/html.{a, body, div, head, html, link, p, script, text}
 import lustre/ssg/djot
 import tom
 
@@ -51,6 +51,7 @@ pub fn render_links(base: String, sources: List(posts.PostSource)) {
         attribute("rel", "stylesheet"),
         attribute("href", "assets/styles.css"),
       ]),
+      script([attribute.src("assets/startup.js")], ""),
     ]),
     body([], [div([], list.map(matters, render_matter(base, _)))]),
   ])