From b2caf5c371e44fce11ae27bd31a7a3a589872da9 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Fri, 26 Jan 2024 23:57:29 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Update=20theme=20config?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/theme.svelte | 53 +++----------------------------------
 src/routes/+layout.svelte   | 10 ++++---
 2 files changed, 9 insertions(+), 54 deletions(-)

diff --git a/src/components/theme.svelte b/src/components/theme.svelte
index d1d3900..cbfb0d3 100644
--- a/src/components/theme.svelte
+++ b/src/components/theme.svelte
@@ -1,59 +1,12 @@
 <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');
-    }
-  }
+  import { toggleMode, mode } from 'mode-watcher';
 
   // Icons:
   import { MoonIcon, SunIcon } from 'lucide-svelte';
 </script>
 
-<svelte:head>
-  <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} aria-label="Toggle dark mode" class="opacity-80 hover:opacity-100">
-  <!-- moon icon -->
-  {#if dark}
+<button on:click={toggleMode} aria-label="Toggle dark mode" class="opacity-80 hover:opacity-100">
+  {#if $mode === 'light'}
     <SunIcon size={20} strokeWidth={1.5} />
   {:else}
     <MoonIcon size={20} strokeWidth={1.5} />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 269fff8..c91f78e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,11 +4,12 @@
 
   // Global styles:
   import '../app.css';
+  import { ModeWatcher, mode } from 'mode-watcher';
 
   // Get categories:
   import { svgs } from '@/data/svgs';
   const categories = svgs
-    .flatMap((svg) => Array.isArray(svg.category) ? svg.category : [svg.category])
+    .flatMap((svg) => (Array.isArray(svg.category) ? svg.category : [svg.category]))
     .filter((category, index, array) => array.indexOf(category) === index);
 
   // Toaster:
@@ -23,6 +24,7 @@
   import { cn } from '@/utils/cn';
 </script>
 
+<ModeWatcher />
 <Navbar currentPath={data.pathname} />
 <main>
   <aside
@@ -74,9 +76,9 @@
       toastOptions={{
         class: 'font-sans',
         descriptionClass: 'font-mono',
-        style: `background-color: #262626;
-           color: #ffff; 
-           border-radius: 0.4rem; border: 1px solid #121212;`
+        style: `background-color: ${$mode === 'light' ? '#f5f5f5' : '#262626'};
+           color: ${$mode === 'light' ? '#121212' : '#ffff'}; 
+           border-radius: 0.4rem; border: 1px solid ${$mode === 'light' ? '#d4d4d4' : '#404040'};`
       }}
     />
   </div>