Merge pull request #231 from pheralb/next

⚙️ Improvements when change light/dark theme & fix downloading svgs with wordmark.

package.json

@@ -38,6 +38,7 @@
     "downloadjs": "1.4.7",
     "jszip": "3.10.1",
     "lucide-svelte": "0.314.0",
+    "mode-watcher": "0.1.2",
     "shiki": "0.14.7",
     "svelte-sonner": "0.3.6",
     "tailwind-merge": "2.2.1"

pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   lucide-svelte:
     specifier: 0.314.0
     version: 0.314.0(svelte@4.2.9)
+  mode-watcher:
+    specifier: 0.1.2
+    version: 0.1.2(svelte@4.2.9)
   shiki:
     specifier: 0.14.7
     version: 0.14.7
@@ -2047,6 +2050,14 @@ packages:
       ufo: 1.3.2
     dev: true
 
+  /mode-watcher@0.1.2(svelte@4.2.9):
+    resolution: {integrity: sha512-XTdPCdqC3kqSvB+Q262Kor983YJkkB2Z3vj9uqg5IqKQpOdiz+xB99Jihp8sWbyM67drC7KKp0Nt5FzCypZi2g==}
+    peerDependencies:
+      svelte: ^4.0.0
+    dependencies:
+      svelte: 4.2.9
+    dev: false
+
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}

src/components/downloadSvg.svelte

@@ -84,7 +84,7 @@
   };
 </script>
 
-{#if typeof svgInfo.route === 'string'}
+{#if typeof svgInfo.route === 'string' && svgInfo.wordmark === undefined}
   <button
     title="Download Light & Dark variants"
     class={mainDownloadStyles}
@@ -114,56 +114,79 @@
           'md:space-y-0 md:flex-row md:space-x-2 md:items-center md:justify-center'
         )}
       >
-        <div class={cardDownloadStyles}>
-          <img
-            src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
-            alt={svgInfo.title}
-            class="h-10 my-4"
-          />
-          <button
-            title="Logo with light & dark variants"
-            class={buttonStyles}
-            on:click={() => {
-              if (typeof svgInfo.route !== 'string') {
-                downloadAllVariants({
-                  lightRoute: svgInfo.route.light,
-                  darkRoute: svgInfo.route.dark
-                });
-              }
-            }}
-          >
-            <DownloadIcon size={iconSize} />
-            <p>Light & dark variants</p>
-          </button>
+        {#if typeof svgInfo.route === 'string'}
+          <div class={cardDownloadStyles}>
+            <img
+              src={isDarkTheme() ? svgInfo.route : svgInfo.route}
+              alt={svgInfo.title}
+              class="h-8 my-4"
+            />
+            <button
+              title="Download logo"
+              class={buttonStyles}
+              on:click={() => {
+                if (typeof svgInfo.route === 'string') {
+                  downloadSvg(svgInfo.route);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              <p>Icon logo</p>
+            </button>
+          </div>
+        {:else}
+          <div class={cardDownloadStyles}>
+            <img
+              src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
+              alt={svgInfo.title}
+              class="h-10 my-4"
+            />
+            <button
+              title="Logo with light & dark variants"
+              class={buttonStyles}
+              on:click={() => {
+                if (typeof svgInfo.route !== 'string') {
+                  downloadAllVariants({
+                    lightRoute: svgInfo.route.light,
+                    darkRoute: svgInfo.route.dark
+                  });
+                }
+              }}
+            >
+              <DownloadIcon size={iconSize} />
+              <p>Light & dark variants</p>
+            </button>
 
-          <button
-            title="Download light variant"
-            class={buttonStyles}
-            on:click={() => {
-              if (typeof svgInfo.route !== 'string') {
-                downloadSvg(svgInfo.route.light);
-                return;
-              }
-            }}
-          >
-            <DownloadIcon class="mr-2" size={iconSize} />
-            Only light variant
-          </button>
+            <button
+              title="Download light variant"
+              class={buttonStyles}
+              on:click={() => {
+                if (typeof svgInfo.route !== 'string') {
+                  downloadSvg(svgInfo.route.light);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              Only light variant
+            </button>
 
-          <button
-            title="Download dark variant"
-            class={buttonStyles}
-            on:click={() => {
-              if (typeof svgInfo.route !== 'string') {
-                downloadSvg(svgInfo.route.dark);
-                return;
-              }
-            }}
-          >
-            <DownloadIcon class="mr-2" size={iconSize} />
-            Only dark variant
-          </button>
-        </div>
+            <button
+              title="Download dark variant"
+              class={buttonStyles}
+              on:click={() => {
+                if (typeof svgInfo.route !== 'string') {
+                  downloadSvg(svgInfo.route.dark);
+                  return;
+                }
+              }}
+            >
+              <DownloadIcon class="mr-2" size={iconSize} />
+              Only dark variant
+            </button>
+          </div>
+        {/if}
 
         {#if typeof svgInfo.wordmark === 'string' && svgInfo.wordmark !== undefined}
           <div class={cardDownloadStyles}>

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} />

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>