CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/Components/ThemeSelect.razor

@inject LocalStorageHelper localStorage

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="themes" aria-expanded="true">Themes [@CurrentTheme]</a>
    <div class="dropdown-menu" aria-labelledby="themes" data-bs-popper="static">
        <a class="dropdown-item" @onclick="@(()=>SetTheme("default"))">Default</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("cerulean"))">Cerulean</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("cosmo"))">Cosmo</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("cyborg"))">Cyborg</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("darkly"))">Darkly</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("flatly"))">Flatly</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("journal"))">Journal</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("litera"))">Litera</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("lumen"))">Lumen</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("lux"))">Lux</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("materia"))">Materia</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("minty"))">Minty</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("morph"))">Morph</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("pulse"))">Pulse</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("quartz"))">Quartz</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("sandstone"))">Sandstone</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("simplex"))">Simplex</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("sketchy"))">Sketchy</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("slate"))">Slate</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("solar"))">Solar</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("spacelab"))">Spacelab</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("superhero"))">Superhero</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("united"))">United</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("vapor"))">Vapor</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("yeti"))">Yeti</a>
        <a class="dropdown-item" @onclick="@(()=>SetTheme("zephyr"))">Zephyr</a>
    </div>
</li>

@if (CurrentTheme != null && CurrentTheme != "default")
{
    <link href="lib/bootstrap/bootswatch/@CurrentTheme/bootstrap.min.css" rel="stylesheet" />
}

@code {
    private string CurrentTheme { get => localStorage.Get<string>(); set => localStorage.Set(value); }

    private async Task SetTheme(string name)
    {
        CurrentTheme = name;
        StateHasChanged();
    }
}