Revert "feat: light/dark theme toggle"

This reverts commit bb0068a4e9.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "5.7.0",
+  "version": "5.6.1",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_data/nav.js

@@ -12,7 +12,7 @@ export default async function () {
       { name: 'About' },
       { name: 'Links', icon: 'link' },
       { name: 'Tags', icon: 'tags' },
-      { name: 'Search', icon: 'search', class: 'client-side' },
+      { name: 'Search', icon: 'search' },
       { name: 'Feeds', icon: 'rss' },
       { name: 'Mastodon', icon: 'brand-mastodon' },
     ],

src/_includes/partials/nav/link.liquid

@@ -1,6 +1,6 @@
 {%- capture pageUrl %}/{{ link | downcase }}/{% endcapture -%}
 {% if pageUrl contains page.fileSlug and page.fileSlug %}
-  <span class="active {{ class }}" aria-current="page">
+  <span class="active" aria-current="page">
     {% if icon %}
       {% tablericon icon link %}
     {% else %}
@@ -9,7 +9,7 @@
   </span>
 {% else %}
   {% if icon %}
-    <a class="{{ icon | downcase }} {{ class }}" href="/{{ link | downcase }}">
+    <a class="{{ icon | downcase }}" href="/{{ link | downcase }}">
       {% tablericon icon link %}
     </a>
   {% else %}

src/_includes/partials/nav/menu.liquid

@@ -2,9 +2,8 @@
   <ul class="flex--centered">
     {% for link in nav.menu %}
       <li>
-        {% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon, class: link.class %}
+        {% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon %}
       </li>
     {% endfor %}
-    {% render "partials/nav/theme.liquid" %}
   </ul>
 </nav>

src/_includes/partials/nav/theme.liquid

@@ -1,8 +0,0 @@
-<li class="theme__toggle client-side">
-  <span class="light">
-    {% tablericon "sun" "Toggle light theme" %}
-  </span>
-  <span class="dark">
-    {% tablericon "moon" "Toggle dark theme" %}
-  </span>
-</li>

src/assets/scripts/index.js

@@ -1,5 +1,5 @@
 if (window.location.hostname !== 'localhost') {
-  ;(async function() {
+  ;(async function () {
     const nowPlaying = document.getElementById('now-playing')
 
     if (nowPlaying) {
@@ -39,30 +39,3 @@ if (window.location.hostname !== 'localhost') {
     }
   })()
 }
-
-;(async function() {
-  const btn = document.querySelector('.theme__toggle');
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  const currentTheme = localStorage?.getItem('theme');
-  let theme;
-
-  if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
-
-  if (currentTheme === 'dark') {
-    document.body.classList.toggle('theme__dark');
-  } else if (currentTheme === 'light') {
-    document.body.classList.toggle('theme__light');
-  }
-
-  btn.addEventListener('click', () => {
-    console.log(prefersDarkScheme)
-    if (prefersDarkScheme) {
-      document.body.classList.toggle('theme__light');
-      theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
-    } else {
-      document.body.classList.toggle('theme__dark');
-      theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
-    }
-    localStorage?.setItem('theme', theme);
-  });
-})()

src/assets/styles/index.css

@@ -195,9 +195,7 @@ nav svg {
 :is(a:hover, a:active, a:focus) svg,
 a svg:hover,
 a svg:active,
-a svg:focus,
+a svg:focus {
-.theme__toggle:hover,
-.theme__toggle svg:hover {
   stroke-width: var(--stroke-width-bold);
 }
 
@@ -487,28 +485,6 @@ footer nav {
   justify-content: center;
 }
 
-/* theme toggle */
-.theme__toggle,
-.theme__toggle svg{
-  cursor: pointer;
-}
-
-.theme__dark .theme__toggle > .light {
-  display: inline;
-}
-
-.theme__dark .theme__toggle > .dark {
-  display: none;
-}
-
-.theme__toggle > .light {
-  display: none;
-}
-
-.theme__toggle > .dark {
-  display: inline;
-}
-
 /* screens: md */
 @media screen and (min-width: 768px) {
   .main__title {

src/assets/styles/partials/vars.css

@@ -113,19 +113,6 @@
   }
 }
 
-:root body.theme__dark {
-  --text-color: var(--white);
-  --background-color: var(--black);
-  --text-color-inverted: var(--black);
-  --background-color-inverted: var(--white);
-  --accent-color: var(--blue-400);
-  --accent-color-hover: var(--blue-200);
-  --gray-light: var(--gray-900);
-  --gray-lighter: var(--gray-950);
-  --gray-dark: var(--gray-300);
-  --brand-github: #f5f5f5;
-}
-
 @media (prefers-reduced-motion) {
   :root {
     --transition-duration-default: 0.01ms;