sun vs moon

src/interface/components/icons/LucideMoon.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  let { class: className = "w-5 h-5" }: { class?: string } = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+</svg>

src/interface/components/icons/LucideSun.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  let { class: className = "w-5 h-5" }: { class?: string } = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <circle cx="12" cy="12" r="4" />
+  <path d="M12 2v2" />
+  <path d="M12 20v2" />
+  <path d="m4.93 4.93 1.41 1.41" />
+  <path d="m17.66 17.66 1.41 1.41" />
+  <path d="M2 12h2" />
+  <path d="M20 12h2" />
+  <path d="m6.34 17.66-1.41 1.41" />
+  <path d="m19.07 4.93-1.41 1.41" />
+</svg>

src/interface/pages/themeCreator.svelte

@@ -28,6 +28,8 @@
   import { themeUpdates } from '../hooks/ThemeUpdates'
   import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
   import ThemeBlobImage from '@/interface/components/themes/ThemeBlobImage.svelte'
+  import LucideMoon from '@/interface/components/icons/LucideMoon.svelte'
+  import LucideSun from '@/interface/components/icons/LucideSun.svelte'
 
   const { themeID } = $props<{ themeID: string }>()
   const themeManager = ThemeManager.getInstance();
@@ -253,19 +255,23 @@
             </div>
           {:else if item.type === 'lightDarkToggle'}
             <button
-              class="overflow-hidden relative px-4 py-1 text-xl font-medium rounded-lg transition bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
+              class="overflow-hidden relative flex justify-center items-center px-4 py-1 text-xl font-medium rounded-lg transition bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600"
               onclick={() => (item.props as LightDarkToggleProps).onChange(!(item.props as LightDarkToggleProps).state)}
             >
               {#key (item.props as LightDarkToggleProps).state}
                 <span
-                  class="absolute"
+                  class="absolute flex items-center justify-center"
                   in:fade={{ duration: 150 }}
                   out:fade={{ duration: 150 }}
                 >
-                  {(item.props as LightDarkToggleProps).state ? '\uec12' : '\uecfe'}
+                  {#if (item.props as LightDarkToggleProps).state}
+                    <LucideMoon class="w-5 h-5" />
+                  {:else}
+                    <LucideSun class="w-5 h-5" />
+                  {/if}
                 </span>
               {/key}
-              <span class='opacity-0'>{'\uec12'}</span>
+              <span class="opacity-0 inline-flex"><LucideMoon class="w-5 h-5" /></span>
             </button>
           {/if}
         </div>