Refactor DarkMode.astro with SVG's instead of text

markteekman · Apr 27, 2022 · 54e8322 · 54e8322
1 parent 3b8ebf2
commit 54e8322
Showing 1 changed file with 30 additions and 12 deletions.
diff --git 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>