chore: restore theme button

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;