From 7ef740f148a84f35c19ec3c475a381b2f550c50a Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sat, 26 Oct 2024 20:45:52 -0700
Subject: [PATCH] chore: load svg directly and add classes to paths

---
 package-lock.json                             |  4 ++--
 package.json                                  |  2 +-
 src/assets/styles/components/theme-toggle.css | 19 ++++---------------
 src/includes/nav/theme-toggle.liquid          | 14 ++++++++++++--
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b26a6d47..776576d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "2.1.0",
+      "version": "2.1.1",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.6.0",
diff --git a/package.json b/package.json
index 07f00f65..b36bf29b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index 3b3e8478..5eff406a 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -20,29 +20,18 @@ theme-toggle {
     stroke: var(--accent-color-hover);
   }
 
+  .sun,
   & > .light svg {
     stroke: var(--sun);
   }
 
+  .moon,
   & > .dark svg {
     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);
-    }
+  .twilight {
+    stroke: var(--twilight);
   }
 
   .light,
diff --git a/src/includes/nav/theme-toggle.liquid b/src/includes/nav/theme-toggle.liquid
index 6129d02f..c9e07bc6 100644
--- a/src/includes/nav/theme-toggle.liquid
+++ b/src/includes/nav/theme-toggle.liquid
@@ -1,9 +1,19 @@
-<script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}" crossorigin="anonymous"></script>
+<script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}"
+  crossorigin="anonymous"></script>
 <span class="client-side">
   <theme-toggle mode="control">
     <button aria-label="Auto, light, dark theme control" class="theme-toggle">
       <span class="auto">
-        {% tablericon "sun-moon" %}
+        <svg aria-hidden="true" data-tablericon-name="sun-moon" fill="none" height="24" stroke="currentColor"
+          stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
+          xmlns="http://www.w3.org/2000/svg">
+          <path class="sun" d="M9.173 14.83a4 4 0 1 1 5.657 -5.657"></path>
+          <path class="moon" d="M11.294 12.707l.174 .247a7.5 7.5 0 0 0 8.845 2.492a9 9 0 0 1 -14.671 2.914"></path>
+          <path class="sun" d="M3 12h1"></path>
+          <path class="sun" d="M12 3v1"></path>
+          <path class="sun" d="M5.6 5.6l.7 .7"></path>
+          <path class="twilight" d="M3 21l18 -18"></path>
+        </svg>
       </span>
       <span class="light">
         {% tablericon "sun" %}