From 54e83224a790b41459d6f2c7256ac11fa142dc9e Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Wed, 27 Apr 2022 17:01:34 +0200
Subject: [PATCH] Refactor DarkMode.astro with SVG's instead of text

---
 src/components/DarkMode.astro | 42 +++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/DarkMode.astro b/src/components/DarkMode.astro
index e3837ea..6f46cb8 100644
--- a/src/components/DarkMode.astro
+++ b/src/components/DarkMode.astro
@@ -1,4 +1,6 @@
-<button class="darkmode-toggle" aria-pressed="false">Enable Dark Mode</button>
+<button class="darkmode-toggle" aria-pressed="false">
+  
+</button>
 
 <script>
   // variables
@@ -7,24 +9,26 @@
   const darkModeToggle = document.querySelector('.darkmode-toggle')
 
   // functions
-  const enableDarkMode = _ => {
+  const enableDarkMode = () => {
     document.body.classList.add('darkmode')
-    darkModeToggle.textContent = 'Disable Dark Mode'
+    darkModeToggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zM256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22zM369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44zM108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45zM464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zM96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44zM403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56zM142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55zM256 358a102 102 0 1 1 102-102 102.12 102.12 0 0 1-102 102z"></path></svg>`
     darkModeToggle.setAttribute('aria-pressed', 'true')
+    darkModeToggle.setAttribute('aria-label', 'Disable dark mode')
     localStorage.setItem('darkMode', 'enabled')
   }
 
-  const disableDarkMode = _ => {
+  const disableDarkMode = () => {
     document.body.classList.remove('darkmode')
-    darkModeToggle.textContent = 'Enable Dark Mode'
+    darkModeToggle.innerHTML = `<svg viewBox="0 0 512 512" fill="var(--action-color)"><path d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200 31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"></path></svg>`
     darkModeToggle.setAttribute('aria-pressed', 'false')
+    darkModeToggle.setAttribute('aria-label', 'Enable dark mode')
     localStorage.setItem('darkMode', null)
   }
 
   // execution
   if (darkMode === 'enabled' || systemPrefs) enableDarkMode()
 
-  darkModeToggle.addEventListener('click', _ => {
+  darkModeToggle.addEventListener('click', () => {
     darkMode = localStorage.getItem('darkMode')
 
     darkMode !== 'enabled'
@@ -33,15 +37,29 @@
   })
 </script>
 
-<style lang="scss">
+<style lang="scss" is:global>
+  @use "../assets/scss/base/outline" as *;
+
   .darkmode-toggle {
-    border: 2px solid var(--secondary-500);
-    border-radius: var(--radius-small);
-    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    padding: 0;
+    border: none;
+
+    svg {
+      width: 25px;
+    
+      path {
+        transition: fill 0.2s ease-in-out;
+      }
+    }
 
     &:hover {
-      color: var(--neutral-100);
-      background-color: var(--secondary-500);
+      svg path {
+        fill: var(--primary-400);
+      }
+    }
+
+    &:focus {
+      @include outline;
     }
   }
 </style>