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

@inject LocalStorageHelper localStorage

@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 void SetTheme(string name)
    {
        CurrentTheme = name;
        StateHasChanged();
    }
}
<ul class="nav nav-tabs justify-content-center nav-fill">
    <li class="nav-item" role="presentation">
        <a class="nav-link">
            <i class="bi bi-data"></i>Themes
        </a>
    </li>
    <li class="nav-item dropdown">
        <button class="nav-link dropdown-toggle active" data-bs-toggle="dropdown">@CurrentTheme</button>
        <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 @(CurrentTheme=="cerulean"?"active":"")" @onclick="@(()=>SetTheme("cerulean"))">Cerulean</a>
            <a class="dropdown-item @(CurrentTheme=="cosmo"?"active":"")" @onclick="@(()=>SetTheme("cosmo"))">Cosmo</a>
            <a class="dropdown-item @(CurrentTheme=="cyborg"?"active":"")" @onclick="@(()=>SetTheme("cyborg"))">Cyborg</a>
            <a class="dropdown-item @(CurrentTheme=="darkly"?"active":"")" @onclick="@(()=>SetTheme("darkly"))">Darkly</a>
            <a class="dropdown-item @(CurrentTheme=="flatly"?"active":"")" @onclick="@(()=>SetTheme("flatly"))">Flatly</a>
            <a class="dropdown-item @(CurrentTheme=="journal"?"active":"")" @onclick="@(()=>SetTheme("journal"))">Journal</a>
            <a class="dropdown-item @(CurrentTheme=="litera"?"active":"")" @onclick="@(()=>SetTheme("litera"))">Litera</a>
            <a class="dropdown-item @(CurrentTheme=="lumen"?"active":"")" @onclick="@(()=>SetTheme("lumen"))">Lumen</a>
            <a class="dropdown-item @(CurrentTheme=="lux"?"active":"")" @onclick="@(()=>SetTheme("lux"))">Lux</a>
            <a class="dropdown-item @(CurrentTheme=="materia"?"active":"")" @onclick="@(()=>SetTheme("materia"))">Materia</a>
            <a class="dropdown-item @(CurrentTheme=="minty"?"active":"")" @onclick="@(()=>SetTheme("minty"))">Minty</a>
            <a class="dropdown-item @(CurrentTheme=="morph"?"active":"")" @onclick="@(()=>SetTheme("morph"))">Morph</a>
            <a class="dropdown-item @(CurrentTheme=="pulse"?"active":"")" @onclick="@(()=>SetTheme("pulse"))">Pulse</a>
            <a class="dropdown-item @(CurrentTheme=="quartz"?"active":"")" @onclick="@(()=>SetTheme("quartz"))">Quartz</a>
            <a class="dropdown-item @(CurrentTheme=="sandstone"?"active":"")" @onclick="@(()=>SetTheme("sandstone"))">Sandstone</a>
            <a class="dropdown-item @(CurrentTheme=="simplex"?"active":"")" @onclick="@(()=>SetTheme("simplex"))">Simplex</a>
            <a class="dropdown-item @(CurrentTheme=="sketchy"?"active":"")" @onclick="@(()=>SetTheme("sketchy"))">Sketchy</a>
            <a class="dropdown-item @(CurrentTheme=="slate"?"active":"")" @onclick="@(()=>SetTheme("slate"))">Slate</a>
            <a class="dropdown-item @(CurrentTheme=="solar"?"active":"")" @onclick="@(()=>SetTheme("solar"))">Solar</a>
            <a class="dropdown-item @(CurrentTheme=="spacelab"?"active":"")" @onclick="@(()=>SetTheme("spacelab"))">Spacelab</a>
            <a class="dropdown-item @(CurrentTheme=="superhero"?"active":"")" @onclick="@(()=>SetTheme("superhero"))">Superhero</a>
            <a class="dropdown-item @(CurrentTheme=="united"?"active":"")" @onclick="@(()=>SetTheme("united"))">United</a>
            <a class="dropdown-item @(CurrentTheme=="vapor"?"active":"")" @onclick="@(()=>SetTheme("vapor"))">Vapor</a>
            <a class="dropdown-item @(CurrentTheme=="yeti"?"active":"")" @onclick="@(()=>SetTheme("yeti"))">Yeti</a>
            <a class="dropdown-item @(CurrentTheme=="zephyr"?"active":"")" @onclick="@(()=>SetTheme("zephyr"))">Zephyr</a>
        </div>
    </li>
</ul>