git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 10:51:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add emoji toggle option for theme switcher

Browse Source
This commit is contained in:
Sam Chau
2026-01-16 19:54:08 +10:30
parent 4217fabebf
commit 2efb006482
1 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/lib/client/ui/navigation/navbar/themeToggle.svelte
View File

@@ -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>