🛠️ Add dark/light mode.

src/components/search.svelte

@@ -14,7 +14,7 @@
     type="text"
     {placeholder}
     autocomplete="off"
-    class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 pl-10 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
+    class="w-full rounded-md border border-neutral-300 bg-neutral-200/50 p-3 pl-10 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-700/10 dark:focus:ring-neutral-700"
     bind:value={searchTerm}
     on:input
   />

src/components/svgCard.svelte

@@ -41,7 +41,7 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center rounded-md border border-neutral-800 bg-neutral-700/10 p-4"
+  class="flex flex-col items-center justify-center rounded-md border border-neutral-300 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-700/10"
 >
   <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
   <div class="mb-3 flex flex-col items-center justify-center">
@@ -57,7 +57,7 @@
       on:click={() => {
         copyToClipboard(svgInfo.route);
       }}
-      class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
     >
       <Copy size={17} />
     </button>
@@ -66,7 +66,7 @@
       on:click={() => {
         downloadSvg(svgInfo.route);
       }}
-      class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
     >
       <DownloadSimple size={17} />
     </button>
@@ -74,7 +74,7 @@
       href={svgInfo.url}
       title="Website"
       target="_blank"
-      class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
     >
       <ArrowUpRight size={17} />
     </a>

src/components/theme.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  let dark: boolean;
+  let hidden = true;
+
+  onMount(() => {
+    dark = document.documentElement.classList.contains('dark');
+    hidden = false;
+    const matcher = window.matchMedia('(prefers-color-scheme: dark)');
+    matcher.addEventListener('change', handleChange);
+    return () => matcher.removeEventListener('change', handleChange);
+  });
+
+  function handleChange({ matches: dark }: MediaQueryListEvent) {
+    if (!localStorage.theme) {
+      setMode(dark);
+    }
+  }
+
+  function toggle() {
+    setMode(!dark);
+  }
+
+  function setMode(value: boolean) {
+    dark = value;
+    if (dark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.theme = dark ? 'dark' : 'light';
+    if (window.matchMedia(`(prefers-color-scheme: ${localStorage.theme})`).matches) {
+      localStorage.removeItem('theme');
+    }
+  }
+
+  // Icons:
+  import Moon from 'phosphor-svelte/lib/Moon';
+  import Sun from 'phosphor-svelte/lib/Sun';
+</script>
+
+<svelte:head>
+  <!-- set dark mode class based on user preference / device settings (in head to avoid FOUC) -->
+  <script>
+    if (
+      localStorage.theme === 'dark' ||
+      (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  </script>
+</svelte:head>
+
+<button on:click={toggle} class="focus:outline-none" class:hidden>
+  <!-- moon icon -->
+  {#if dark}
+    <Sun size={18} />
+  {:else}
+    <Moon size={18} />
+  {/if}
+</button>