new theme switching icon

src/lib/components/buttons/ThemeToggleIcon.svelte

@@ -1,104 +1,28 @@
-<svg class="w-8" aria-hidden="true" viewBox="0 0 24 24">
+<script lang="ts">
-  <mask class="moon" id="moon-mask">
+  import type { Theme } from '$types';
-    <rect x="0" y="0" width="100%" height="100%" fill="white" />
+  export let theme: Theme = 'dark';
-    <circle cx="24" cy="10" r="6" fill="black" />
+</script>
-  </mask>
-  <circle
-    class="sun"
-    cx="12"
-    cy="12"
-    r="6"
-    mask="url(#moon-mask)"
-    fill="currentColor"
-  />
-  <g class="sun-beams" stroke="currentColor" stroke-width="2px">
-    <line x1="12" y1="1" x2="12" y2="3" />
-    <line x1="12" y1="21" x2="12" y2="23" />
-    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-    <line x1="1" y1="12" x2="3" y2="12" />
-    <line x1="21" y1="12" x2="23" y2="12" />
-    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-  </g>
-</svg>
 
-<style>
+<div
-  svg {
+  class="{`${
-    --transition-duration-short: 0.15s;
+    theme === 'dark' ? 'swap-active' : 'swap-off'
-    --transition-duration-long: 0.4s;
+  } swap swap-rotate`} h-8 w-8"
+>
+  <svg
+    class="swap-on fill-current h-full w-full"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    ><path
+      d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+    /></svg
+  >
 
-    --ease-1: cubic-bezier(0.25, 0, 0.3, 1);
+  <svg
-
+    class="swap-off fill-current h-full w-full"
-    --ease-out-1: cubic-bezier(0, 0, 0, 1);
+    xmlns="http://www.w3.org/2000/svg"
-
+    viewBox="0 0 24 24"
-    --ease-elastic-1: cubic-bezier(0.5, 1.25, 0.75, 1.25);
+    ><path
-    --ease-elastic-2: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+      d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-  }
+    /></svg
-
+  >
-  svg .moon,
+</div>
-  svg .sun,
-  svg .sun-beams {
-    transform-origin: center center;
-  }
-
-  :global(.light) svg .sun {
-    transform: scale(1.75);
-  }
-
-  :global(.light) svg .sun-beams {
-    opacity: 0;
-  }
-
-  :global(.light) svg .moon > circle {
-    transform: translateX(-7px);
-  }
-
-  @supports (cx: 1) {
-    :global(.light) svg .moon > circle {
-      transform: translateX(0);
-      cx: 17;
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    svg .sun {
-      transition: transform var(--transition-duration-long)
-        var(--ease-elastic-1);
-    }
-
-    svg .sun-beams {
-      transition: transform var(--transition-duration-long)
-          var(--ease-elastic-2),
-        opacity var(--transition-duration-long) var(--ease-1);
-    }
-
-    svg .moon > circle {
-      transition: transform calc(var(--transition-duration-long) / 2)
-        var(--ease-out-1);
-    }
-
-    @supports (cx: 1) {
-      svg .moon > circle {
-        transition: cx calc(var(--transition-duration-long) / 2)
-          var(--ease-out-1);
-      }
-    }
-
-    :global(.light) svg .sun {
-      transform: scale(1.75);
-      transition-timing-function: var(--ease-1);
-      transition-duration: calc(var(--transition-duration-long) / 2);
-    }
-
-    :global(.light) svg .sun-beams {
-      transform: rotateZ(-25deg);
-      transition-duration: calc(var(--transition-duration-long) / 3);
-    }
-
-    :global(.light) svg .moon > circle {
-      transition-delay: calc(var(--transition-duration-long) / 2);
-      transition-duration: var(--transition-duration-long);
-    }
-  }
-</style>

src/lib/components/header/Header.svelte

@@ -13,11 +13,8 @@
   data-tauri-drag-region
   class="h-12 bg-base-100 shadow-lg items-center justify-between flex px-2"
 >
-  <button
+  <button on:click={theme.toggleTheme} class="hover:text-secondary ml-2 grid">
-    on:click={theme.toggleTheme}
+    <ThemeToggleIcon theme={$theme} />
-    class="hover:text-secondary ml-2 transition-all"
-  >
-    <ThemeToggleIcon class="w-8" />
   </button>
 
   <HeaderNav {navLinks} />

src/lib/stores/theme.ts

@@ -5,7 +5,7 @@ import type { Theme } from '$types';
 const store = new Store('.settings.dat');
 
 const createThemeStore = () => {
-  const { subscribe, update, set } = writable('');
+  const { subscribe, update, set } = writable<Theme>();
 
   return {
     subscribe,