Add support for dark theme

Fixes #33.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.3.10",
+    "version": "3.4.0",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",

src/main/css/snippets/colors.css

@@ -1,5 +1,6 @@
 /* pico.css overrides, based on https://picocss.com/docs/customization.html */
-:root {
+.fwd-nav,
+:root[data-theme="light"] {
     --primary: rgb(0, 51, 204) !important;
     --primary-hover: rgb(0, 61, 245) !important;
     --primary-focus: rgba(0, 41, 163, 0.125) !important;
@@ -12,3 +13,16 @@
     --switch-color: var(--primary-inverse) !important;
     --switch-checked-background-color: var(--primary) !important;
 }
+
+:root[data-theme="dark"]:not(.fwd-nav) {
+    --primary: #1e88e5 !important;
+    --primary-hover: #2196f3 !important;
+    --primary-focus: rgba(30, 136, 229, 0.25) !important;
+    --primary-focus-opaque: rgb(30, 136, 229) !important;
+    --primary-inverse: white !important;
+
+    --form-element-active-border-color: var(--primary) !important;
+    --form-element-focus-color: var(--primary-focus) !important;
+    --switch-color: var(--primary-inverse) !important;
+    --switch-checked-background-color: var(--primary) !important;
+}

src/main/css/snippets/common.css

@@ -75,7 +75,7 @@ noscript.fwd-js-notice p {
 
 /* Header */
 header.fwd-header a[href="."] {
-    color: black;
+    color: unset;
 }
 
 

src/main/css/snippets/overrides.css

@@ -1,9 +1,16 @@
 /* pico.css: Improved text contrast (see also picocss/pico#276) */
 :root {
     --code-color: var(--color) !important;
+}
+
+:root[data-theme="light"] {
     --muted-color: hsl(205deg, 15%, 41%) !important;
 }
 
+:root[data-theme="dark"] {
+    --muted-color: hsl(205deg, 12%, 59%) !important;
+}
+
 /* pico.css: Bold labels, except for checkbox/radio labels */
 :root {
     --form-label-font-weight: bold;

src/main/js/Template.ts

@@ -243,9 +243,6 @@ function footerLink(prefix: string, text: string | null | undefined, url: string
  * not a valid value as a parameter for that function, its value is considered `undefined`.
  */
 doAfterLoad(() => {
-    const html = $("html")!;
-    if (html.dataset["theme"] == null) html.dataset["theme"] = "light";
-
     const navTarget = $(getMetaProperty("fwd:nav:target"));
     if (navTarget != null) {
         navTarget.parentElement?.replaceChild(