chore: run with user prefs

.eleventy.js

@@ -38,8 +38,6 @@ export default async function (eleventyConfig) {
       "assets/scripts/components/api-text.js",
     "node_modules/@cdransf/select-pagination/select-pagination.js":
       "assets/scripts/components/select-pagination.js",
-    "node_modules/@cdransf/theme-toggle/theme-toggle.js":
-      "assets/scripts/components/theme-toggle.js",
     "node_modules/@daviddarnes/mastodon-post/mastodon-post.js":
       "assets/scripts/components/mastodon-post.js",
     "node_modules/minisearch/dist/umd/index.js":

package-lock.json

@@ -1,18 +1,17 @@
 {
   "name": "coryd.dev",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "2.4.6",
+      "version": "2.4.7",
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy-fetch": "4.0.1",
         "@cdransf/api-text": "^1.8.1",
         "@cdransf/select-pagination": "^1.3.1",
-        "@cdransf/theme-toggle": "^3.2.1",
         "@daviddarnes/mastodon-post": "^1.3.0",
         "http-proxy-middleware": "3.0.3",
         "minisearch": "^7.1.0",
@@ -410,12 +409,6 @@
       "integrity": "sha512-zwBWlX7V6SXlUe9TkJblZF44+2agHRCaCnG/v+Q2Bcgf2DhOQI4qiMOoNBsr09TpkKvQENOqwT2kOycszBcJtA==",
       "license": "MIT"
     },
-    "node_modules/@cdransf/theme-toggle": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.2.1.tgz",
-      "integrity": "sha512-YJsnQNXJeaeZOWb4eKxmTbXxda9XBKHq/eQQ26IhVvZzTfZzVjG9ma5Fvq3Em4gwTHWCRnG+YU2M1eDnl6qTgw==",
-      "license": "MIT"
-    },
     "node_modules/@daviddarnes/mastodon-post": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@daviddarnes/mastodon-post/-/mastodon-post-1.3.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {
@@ -29,7 +29,6 @@
     "@11ty/eleventy-fetch": "4.0.1",
     "@cdransf/api-text": "^1.8.1",
     "@cdransf/select-pagination": "^1.3.1",
-    "@cdransf/theme-toggle": "^3.2.1",
     "@daviddarnes/mastodon-post": "^1.3.0",
     "http-proxy-middleware": "3.0.3",
     "minisearch": "^7.1.0",

src/assets/styles/components/buttons.css

@@ -5,31 +5,28 @@ button,
 .button {
   appearance: none;
   border: none;
+  border: 2px solid var(--accent-color);
+  border-radius: var(--border-radius-full);
+  padding: var(--spacing-xs) var(--spacing-md);
+  cursor: pointer;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-base);
+  white-space: nowrap;
+  color: var(--text-color-inverted);
+  background-color: var(--accent-color);
+  appearance: none;
+  transition: color var(--transition-duration-default)
+    var(--transition-ease-in-out);
 
   & + hr {
     margin-top: 0;
   }
 
-  &:not(.theme-toggle) {
+  &:not(.active):hover,
-    border: 2px solid var(--accent-color);
+  &:not(.active):active,
-    border-radius: var(--border-radius-full);
+  &:not(.active):focus,
-    padding: var(--spacing-xs) var(--spacing-md);
+  &:not(.active):focus-within {
-    cursor: pointer;
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-base);
-    white-space: nowrap;
-    color: var(--text-color-inverted);
-    background-color: var(--accent-color);
-    appearance: none;
-    transition: color var(--transition-duration-default)
-      var(--transition-ease-in-out);
-  }
-
-  &:not(.theme-toggle, .active):hover,
-  &:not(.theme-toggle, .active):active,
-  &:not(.theme-toggle, .active):focus,
-  &:not(.theme-toggle, .active):focus-within {
     background-color: var(--accent-color-hover);
     border-color: var(--accent-color-hover);
   }

src/assets/styles/components/theme-toggle.css

@@ -1,41 +0,0 @@
-theme-toggle {
-  display: flex;
-  width: var(--sizing-svg-base);
-  height: var(--sizing-svg-base);
-  margin-left: var(--spacing-md);
-}
-
-.theme-toggle {
-  background: transparent;
-  padding: 0;
-
-  & svg {
-    cursor: pointer;
-  }
-
-  &:hover svg,
-  &:focus svg,
-  &:focus-within svg,
-  &:active svg {
-    stroke: var(--accent-color-hover);
-  }
-
-  .sun,
-  & > .light svg {
-    stroke: var(--sun);
-  }
-
-  .moon,
-  & > .dark svg {
-    stroke: var(--moon);
-  }
-
-  .twilight {
-    stroke: var(--twilight);
-  }
-
-  .light,
-  .dark {
-    display: none;
-  }
-}

src/assets/styles/index.css

@@ -37,5 +37,4 @@
 @import url("./components/music-chart.css") layer(components);
 @import url("./components/paginator.css") layer(components);
 @import url("./components/progress-bar.css") layer(components);
-@import url("./components/theme-toggle.css") layer(components);
 @import url("./components/youtube-player.css") layer(components);

src/includes/nav/menu.liquid

@@ -9,5 +9,4 @@
       <li>{% render "nav/link.liquid", page:page, link:link %}</li>
     {%- endfor -%}
   </ul>
-  {% render "nav/theme-toggle.liquid" %}
 </menu>

src/includes/nav/theme-toggle.liquid

@@ -1,26 +0,0 @@
-<script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}"
-  crossorigin="anonymous"></script>
-<span class="client-side">
-  <theme-toggle mode="control" storage="local">
-    <button aria-label="Auto, light, dark theme control" class="theme-toggle">
-      <span class="auto">
-        <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" %}
-      </span>
-      <span class="dark">
-        {% tablericon "moon" %}
-      </span>
-    </button>
-  </theme-toggle>
-</span>

src/layouts/base.liquid

@@ -47,42 +47,6 @@
     </noscript>
   </head>
   <body>
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        (() => {
-          const storageType =
-            document.querySelector("theme-toggle")?.getAttribute("storage") === "local"
-              ? localStorage
-              : sessionStorage;
-
-          const currentTheme = storageType.getItem("theme") || "auto";
-          const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
-          const lightIcon = document.querySelector(".light");
-          const darkIcon = document.querySelector(".dark");
-          const autoIcon = document.querySelector(".auto");
-
-          if (currentTheme === "auto") {
-            metaColorScheme.setAttribute("content", "light dark");
-            document.documentElement.style.colorScheme = "";
-          } else {
-            metaColorScheme.setAttribute("content", currentTheme);
-            document.documentElement.style.colorScheme = currentTheme;
-          }
-
-          lightIcon.style.display = "none";
-          darkIcon.style.display = "none";
-          autoIcon.style.display = "none";
-
-          if (currentTheme === "light") {
-            lightIcon.style.display = "inline";
-          } else if (currentTheme === "dark") {
-            darkIcon.style.display = "inline";
-          } else {
-            autoIcon.style.display = "inline";
-          }
-        })();
-      });
-    </script>
     <div class="main-wrapper">
       <main>
         {% render "header.liquid", globals:globals, page:page, nav:nav %}