From 2efb0064821b9e0e4f06712387d2ea30fa126082 Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Fri, 16 Jan 2026 19:54:08 +1030
Subject: [PATCH] feat: add emoji toggle option for theme switcher

---
 .../ui/navigation/navbar/themeToggle.svelte   | 52 +++++++++++++------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/lib/client/ui/navigation/navbar/themeToggle.svelte b/src/lib/client/ui/navigation/navbar/themeToggle.svelte
index 254bb36..0f6bc8e 100644
--- a/src/lib/client/ui/navigation/navbar/themeToggle.svelte
+++ b/src/lib/client/ui/navigation/navbar/themeToggle.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { themeStore } from '$stores/theme.ts';
+	import { navIconStore } from '$stores/navIcons';
 	import { MoonStar, Sun } from 'lucide-svelte';
 
 	$: isDark = $themeStore === 'dark';
+	$: useEmoji = $navIconStore === 'emoji';
 </script>
 
 <button
@@ -10,21 +12,37 @@
 	class="relative flex h-9 w-9 items-center justify-center rounded-md transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800"
 	aria-label="Toggle theme"
 >
-	<!-- Sun icon (visible in dark mode) -->
-	<div
-		class="absolute transition-all duration-300 {isDark
-			? 'scale-100 rotate-0 opacity-100'
-			: 'scale-75 rotate-180 opacity-0'}"
-	>
-		<MoonStar class="h-[18px] w-[18px] text-neutral-700 dark:text-neutral-300" />
-	</div>
-
-	<!-- Moon icon (visible in light mode) -->
-	<div
-		class="absolute transition-all duration-300 {isDark
-			? 'scale-75 -rotate-180 opacity-0'
-			: 'scale-100 rotate-0 opacity-100'}"
-	>
-		<Sun class="h-[18px] w-[18px] text-neutral-700 dark:text-neutral-300" />
-	</div>
+	{#if useEmoji}
+		<!-- Emoji mode -->
+		<div
+			class="absolute transition-all duration-300 {isDark
+				? 'scale-100 rotate-0 opacity-100'
+				: 'scale-75 rotate-180 opacity-0'}"
+		>
+			<span class="text-lg">🌙</span>
+		</div>
+		<div
+			class="absolute transition-all duration-300 {isDark
+				? 'scale-75 -rotate-180 opacity-0'
+				: 'scale-100 rotate-0 opacity-100'}"
+		>
+			<span class="text-lg">☀️</span>
+		</div>
+	{:else}
+		<!-- Lucide icon mode -->
+		<div
+			class="absolute transition-all duration-300 {isDark
+				? 'scale-100 rotate-0 opacity-100'
+				: 'scale-75 rotate-180 opacity-0'}"
+		>
+			<MoonStar class="h-[18px] w-[18px] text-neutral-700 dark:text-neutral-300" />
+		</div>
+		<div
+			class="absolute transition-all duration-300 {isDark
+				? 'scale-75 -rotate-180 opacity-0'
+				: 'scale-100 rotate-0 opacity-100'}"
+		>
+			<Sun class="h-[18px] w-[18px] text-neutral-700 dark:text-neutral-300" />
+		</div>
+	{/if}
 </button>