🛠️ 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>

src/routes/+layout.svelte

@@ -18,45 +18,53 @@
 
   // Toaster:
   import { Toaster } from 'svelte-french-toast';
+
+  // Components for all pages:
   import Transition from '@/components/transition.svelte';
   import Container from '@/components/container.svelte';
+  import Theme from '@/components/theme.svelte';
 </script>
 
-<main class="min-h-screen bg-dark font-sans text-mini text-white">
+<main class="min-h-screen bg-light font-sans text-mini dark:bg-dark dark:text-white">
   <nav
     class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-800 md:fixed md:top-0 md:left-0 md:h-full md:w-60 md:border-none md:pb-10"
   >
-    <div class="items-center px-6 py-6">
+    <div class="px-6 py-6">
-      <div class="mb-3 border-b border-neutral-700/40 pb-3">
+      <div class="mb-3 border-b border-neutral-300 pb-3 dark:border-neutral-700/40">
+        <div class="flex items-center justify-between">
           <a href="/">
             <div class="flex items-center space-x-2 duration-150 hover:text-neutral-300">
               <h3 class="text-xl font-medium">svgl</h3>
               <p class="text-neutral-500">v3.0.0</p>
             </div>
           </a>
+          <Theme />
+        </div>
         <p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs for web</p>
       </div>
       <div
-        class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-700/40 pb-3 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible"
+        class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible"
       >
         {#each categories as category}
           <a
             href={`/directory/${category.toLowerCase()}`}
-            class={`flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40
+            class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
               ${
-                data.pathname === `/directory/${category.toLowerCase()}` ? 'bg-neutral-700/30' : ''
+                data.pathname === `/directory/${category.toLowerCase()}`
+                  ? 'bg-neutral-200 dark:bg-neutral-700/30'
+                  : ''
               }`}
             data-sveltekit-preload-data>{category}</a
           >
         {/each}
       </div>
       <div
-        class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-700/40 pb-3 md:mt-0 md:flex-col md:space-x-0 md:space-y-1"
+        class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mt-0 md:flex-col md:space-x-0 md:space-y-1"
       >
         <a
           href="https://github.com/pheralb/svgl#-getting-started"
           target="_blank"
-          class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+          class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-700/40"
         >
           <span>Submit logo</span>
           <ArrowUpRight size={16} />
@@ -64,7 +72,7 @@
         <a
           href="https://github.com/pheralb/svgl#-getting-started"
           target="_blank"
-          class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
+          class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-700/40"
         >
           <span>Repository</span>
           <ArrowUpRight size={16} />
@@ -73,7 +81,7 @@
       <a
         href="https://twitter.com/pheralb_"
         target="_blank"
-        class="mt-5 flex items-center space-x-2 text-neutral-400 transition-all duration-100 hover:text-white"
+        class="mt-5 flex items-center space-x-2 duration-100 hover:text-white dark:text-neutral-400"
       >
         <Heart color="#991b1b" size={18} weight={'duotone'} />
         <div class="flex items-center space-x-1">
@@ -88,7 +96,7 @@
       <Container>
         <a href="/">
           <div
-            class="flex items-center space-x-2 text-neutral-400 transition-colors duration-100 hover:text-white"
+            class="flex items-center space-x-2 duration-100 dark:text-neutral-400 dark:hover:text-white"
           >
             <ArrowLeft size={20} />
             <span>Back to home</span>

tailwind.config.cjs

@@ -5,7 +5,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        dark: '#161616'
+        dark: '#161616',
+        light: '#f5f5f5'
       },
       fontFamily: {
         sans: ['General-Sans', 'sans-serif']