From 7911c6718e2e3aa8a8f49814e30792ec2af90aab Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 20 Mar 2023 10:30:32 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Add=20dark/light=20mode?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search.svelte  |  2 +-
 src/components/svgCard.svelte |  8 ++---
 src/components/theme.svelte   | 63 +++++++++++++++++++++++++++++++++++
 src/routes/+layout.svelte     | 42 +++++++++++++----------
 tailwind.config.cjs           |  3 +-
 5 files changed, 95 insertions(+), 23 deletions(-)
 create mode 100644 src/components/theme.svelte

diff --git a/src/components/search.svelte b/src/components/search.svelte
index ec9582a..5294003 100644
--- a/src/components/search.svelte
+++ b/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
   />
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index 85cff5c..3f8911e 100644
--- a/src/components/svgCard.svelte
+++ b/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>
diff --git a/src/components/theme.svelte b/src/components/theme.svelte
new file mode 100644
index 0000000..d002b2b
--- /dev/null
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bb8b3bf..2ea416a 100644
--- a/src/routes/+layout.svelte
+++ b/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="mb-3 border-b border-neutral-700/40 pb-3">
-        <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>
+    <div class="px-6 py-6">
+      <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>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index fe00e7a..14d2c7d 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,7 +5,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        dark: '#161616'
+        dark: '#161616',
+        light: '#f5f5f5'
       },
       fontFamily: {
         sans: ['General-Sans', 'sans-serif']