From 72c09452e0e609016ecb52fbe3883f39e89335b0 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Mon, 2 Sep 2024 15:21:55 -0700
Subject: [PATCH] feat: improved theming

---
 package-lock.json                             | 12 ++++++------
 package.json                                  |  4 ++--
 src/assets/styles/components/theme-toggle.css |  4 ++--
 src/assets/styles/defaults/vars.css           |  2 +-
 src/includes/base.liquid                      |  7 ++++---
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 637f030d..ab86436f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,17 @@
 {
   "name": "coryd.dev",
-  "version": "24.5.8",
+  "version": "24.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "24.5.8",
+      "version": "24.6.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
         "@cdransf/select-pagination": "^1.3.1",
-        "@cdransf/theme-toggle": "^1.3.2",
+        "@cdransf/theme-toggle": "^2.0.0",
         "minisearch": "^7.1.0",
         "youtube-video-element": "^1.1.6"
       },
@@ -382,9 +382,9 @@
       "license": "MIT"
     },
     "node_modules/@cdransf/theme-toggle": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.3.2.tgz",
-      "integrity": "sha512-xjsqvMT9Ee2+IDGeLSG31I0yh2Ebd4QqRfPEVn/VLk7BPB44ONj5f600z2Lor7WHfOmRg7L/bWvwWpPmgUAZ4w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-2.0.0.tgz",
+      "integrity": "sha512-cB1/xUStNF3UzAL8E6DD5IDbegyLqncZUyiZkFfv/jkEU5OJquZnjLSg6zjHOQeMcCew3tapKfYDLTtEDkzHLA==",
       "license": "MIT"
     },
     "node_modules/@isaacs/cliui": {
diff --git a/package.json b/package.json
index de8d867f..7516dedb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "24.5.8",
+  "version": "24.6.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
@@ -27,7 +27,7 @@
   "dependencies": {
     "@cdransf/api-text": "^1.5.0",
     "@cdransf/select-pagination": "^1.3.1",
-    "@cdransf/theme-toggle": "^1.3.2",
+    "@cdransf/theme-toggle": "^2.0.0",
     "minisearch": "^7.1.0",
     "youtube-video-element": "^1.1.6"
   },
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index 908a6909..72b40e0a 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -29,7 +29,7 @@ theme-toggle {
   }
 }
 
-.theme__dark {
+[data-theme="dark"] {
   & .theme-toggle > .light {
     display: inline;
   }
@@ -39,7 +39,7 @@ theme-toggle {
   }
 }
 
-.theme__light {
+[data-theme="light"] {
   & .theme-toggle > .light {
     display: none;
   }
diff --git a/src/assets/styles/defaults/vars.css b/src/assets/styles/defaults/vars.css
index 82c9fcba..15ffcef9 100644
--- a/src/assets/styles/defaults/vars.css
+++ b/src/assets/styles/defaults/vars.css
@@ -147,7 +147,7 @@
 }
 
 /* dark theme */
-:root.theme__dark {
+:root[data-theme="dark"] {
   --text-color: var(--color-lightest);
     --background-color: var(--color-darkest);
     --text-color-inverted: var(--color-darkest);
diff --git a/src/includes/base.liquid b/src/includes/base.liquid
index f99f6159..952cda1a 100644
--- a/src/includes/base.liquid
+++ b/src/includes/base.liquid
@@ -148,9 +148,10 @@
       (() => {
         const currentTheme = sessionStorage?.getItem('theme')
         const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-        const root = document.getElementsByTagName('html')[0]
-        if (!currentTheme) sessionStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
-        root.classList.add(`theme__${currentTheme || (prefersDarkScheme ? 'dark' : 'light')}`)
+        const root = document.documentElement
+        const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light')
+        if (!currentTheme) sessionStorage?.setItem('theme', themeToSet)
+        root.setAttribute('data-theme', themeToSet)
       })()
     </script>
     {{ content }}