From 50640d05904a573131a2733f33a92c901c40db01 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sat, 26 Oct 2024 18:16:52 -0700
Subject: [PATCH] feat: add auto theme mode

---
 package-lock.json                             | 12 ++++++------
 package.json                                  |  4 ++--
 src/assets/styles/components/theme-toggle.css | 17 +++++++++++++++++
 src/assets/styles/defaults/vars.css           |  1 +
 src/includes/nav/theme-toggle.liquid          |  7 +++++--
 src/layouts/base.liquid                       | 13 ++++++++-----
 6 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1de433a9..b26a6d47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,17 @@
 {
   "name": "coryd.dev",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "2.0.2",
+      "version": "2.1.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.6.0",
         "@cdransf/select-pagination": "^1.3.1",
-        "@cdransf/theme-toggle": "^3.0.0",
+        "@cdransf/theme-toggle": "^3.1.0",
         "@daviddarnes/mastodon-post": "^1.3.0",
         "http-proxy-middleware": "3.0.3",
         "minisearch": "^7.1.0",
@@ -391,9 +391,9 @@
       "license": "MIT"
     },
     "node_modules/@cdransf/theme-toggle": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.0.0.tgz",
-      "integrity": "sha512-e7QdXP9nq2L3oTNdOoUwMncrkJ0neXE+oEG80J/hzX5wLkEKS1afOOePNbHTRTRnTAf2X3ongsXAMftezHw9Eg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.1.0.tgz",
+      "integrity": "sha512-uNX0cVc9M9u7p5o8Kl1hGGDtS/6gvuoGgJCQ5NWW4AwV+/bASBLOPZnlr2MH8K5UhYgakYAkTld/ex3fxj/VGQ==",
       "license": "MIT"
     },
     "node_modules/@daviddarnes/mastodon-post": {
diff --git a/package.json b/package.json
index 6da805b1..07f00f65 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {
@@ -28,7 +28,7 @@
   "dependencies": {
     "@cdransf/api-text": "^1.6.0",
     "@cdransf/select-pagination": "^1.3.1",
-    "@cdransf/theme-toggle": "^3.0.0",
+    "@cdransf/theme-toggle": "^3.1.0",
     "@daviddarnes/mastodon-post": "^1.3.0",
     "http-proxy-middleware": "3.0.3",
     "minisearch": "^7.1.0",
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index 4707fbd1..3b3e8478 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -28,6 +28,23 @@ theme-toggle {
     stroke: var(--moon);
   }
 
+  & > .auto svg {
+    & path:nth-of-type(3) {
+      stroke: var(--moon);
+    }
+
+    & path:nth-of-type(2),
+    & path:nth-of-type(4),
+    & path:nth-of-type(5),
+    & path:nth-of-type(6) {
+      stroke: var(--sun);
+    }
+
+    & path:nth-of-type(7) {
+      stroke: var(--twilight);
+    }
+  }
+
   .light,
   .dark {
     display: none;
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index af5a3fcf..728a65cb 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -51,6 +51,7 @@
 
   --moon: #6a5acd;
   --sun: #ffa500;
+  --twilight: #9e7485;
 
   --article: light-dark(#007272, #00ffff);
   --about: light-dark(#e4513a, #ff967d);
diff --git a/src/includes/nav/theme-toggle.liquid b/src/includes/nav/theme-toggle.liquid
index 85b86200..6129d02f 100644
--- a/src/includes/nav/theme-toggle.liquid
+++ b/src/includes/nav/theme-toggle.liquid
@@ -1,7 +1,10 @@
 <script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}" crossorigin="anonymous"></script>
 <span class="client-side">
-  <theme-toggle>
-    <button aria-label="Light and dark theme toggle" class="theme-toggle">
+  <theme-toggle mode="control">
+    <button aria-label="Auto, light, dark theme control" class="theme-toggle">
+      <span class="auto">
+        {% tablericon "sun-moon" %}
+      </span>
       <span class="light">
         {% tablericon "sun" %}
       </span>
diff --git a/src/layouts/base.liquid b/src/layouts/base.liquid
index ebd7deee..fcaa86d5 100644
--- a/src/layouts/base.liquid
+++ b/src/layouts/base.liquid
@@ -49,12 +49,15 @@
   <body>
     <script>
       (() => {
-        const currentTheme = sessionStorage.getItem('theme');
+        const currentTheme = sessionStorage.getItem("theme") || "auto";
         const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
-        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light');
-        if (!currentTheme) sessionStorage.setItem('theme', themeToSet);
-        metaColorScheme.setAttribute('content', themeToSet);
+        if (currentTheme === "auto") {
+          metaColorScheme.setAttribute("content", "light dark");
+          document.documentElement.style.colorScheme = "";
+        } else {
+          metaColorScheme.setAttribute("content", currentTheme);
+          document.documentElement.style.colorScheme = currentTheme;
+        }
       })();
     </script>
     <div class="main-wrapper">