feat: light/dark theme toggle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "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' },
+      { name: 'Search', icon: 'search', class: 'client-side' },
       { 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" aria-current="page">
+  <span class="active {{ class }}" aria-current="page">
     {% if icon %}
       {% tablericon icon link %}
     {% else %}
@@ -9,7 +9,7 @@
   </span>
 {% else %}
   {% if icon %}
-    <a class="{{ icon | downcase }}" href="/{{ link | downcase }}">
+    <a class="{{ icon | downcase }} {{ class }}" href="/{{ link | downcase }}">
       {% tablericon icon link %}
     </a>
   {% else %}

src/_includes/partials/nav/menu.liquid

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

src/_includes/partials/nav/theme.liquid

@@ -0,0 +1,8 @@
+<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,3 +39,30 @@ 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,7 +195,9 @@ 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);
 }
 
@@ -485,6 +487,28 @@ 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,6 +113,19 @@
   }
 }
 
+: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;