BlazorWebAssembly/Layout/ThemeSwitcher.razor

@using BlazorWebAssembly.Services
@inject ThemeService ThemeService

<div class="flex items-center bg-bg-body/50 border border-border p-1 rounded-2xl">
    <button @onclick='() => SetTheme("light")' 
            class='w-9 h-9 rounded-xl flex items-center justify-center transition-all @(CurrentTheme == "light" ? "bg-card text-primary shadow-sm shadow-primary/10" : "text-muted hover:text-primary")'
            title="Light Mode">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
    </button>
    <button @onclick='() => SetTheme("dark")' 
            class='w-9 h-9 rounded-xl flex items-center justify-center transition-all @(CurrentTheme == "dark" ? "bg-card text-primary shadow-sm shadow-primary/10" : "text-muted hover:text-primary")'
            title="Dark Mode">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
    </button>
    <button @onclick='() => SetTheme("emerald")' 
            class='w-9 h-9 rounded-xl flex items-center justify-center transition-all @(CurrentTheme == "emerald" ? "bg-card text-primary shadow-sm shadow-primary/10" : "text-muted hover:text-primary")'
            title="Emerald Mode">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 2c-3.144 0-10.231 2.37-13.435 5.759a11.13 11.13 0 0 0-2.457 4.22c-1.343 3.51-.557 6.455 1.574 8.586m14.318-18.565C21 5.144 18.63 12.23 15.241 15.435a11.13 11.13 0 0 1-4.22 2.457c-3.51 1.343-6.455.557-8.586-1.574m18.565-14.318L2 22"></path></svg>
    </button>
</div>

@code {
    private string CurrentTheme => ThemeService.CurrentTheme;

    private async Task SetTheme(string theme)
    {
        await ThemeService.SetThemeAsync(theme);
    }
}