From eb12f0473ab9993da1f3ce702ff2a6c47be7fb25 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Sat, 17 Dec 2022 19:20:12 +0100
Subject: [PATCH] Correctly load dark theme if dark is preferred

---
 package.json                     |  2 +-
 src/main/css/snippets/colors.css | 26 +++++++++++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 51b875d..84aa893 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.6.1",
+    "version": "3.6.2",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",
diff --git a/src/main/css/snippets/colors.css b/src/main/css/snippets/colors.css
index 8cf1d2c..d3aed27 100644
--- a/src/main/css/snippets/colors.css
+++ b/src/main/css/snippets/colors.css
@@ -1,27 +1,39 @@
 /* pico.css overrides, based on https://picocss.com/docs/customization.html */
+
+/* Light (default) */
 .fwd-nav,
-:root:not([data-theme]),
-:root[data-theme="light"] {
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
     --primary: rgb(0, 51, 204) !important;
     --primary-hover: rgb(0, 61, 245) !important;
     --primary-focus: rgba(0, 41, 163, 0.125) !important;
     --primary-focus-opaque: rgb(0, 41, 163) !important;
     --primary-focus-dark: rgb(0, 29, 114) !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;
 }
 
+/* Dark (auto) */
+@media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]):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;
+    }
+}
+
+/* Dark (forced) */
 :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;
+}
 
+/* Common */
+:root {
     --form-element-active-border-color: var(--primary) !important;
     --form-element-focus-color: var(--primary-focus) !important;
     --switch-color: var(--primary-inverse) !important;