import bootswatch series theme; save selected theme to localstorage

FNZCM/FNZCM.BlazorWasm/FNZCM.BlazorWasm.csproj

@@ -11,6 +11,7 @@
   </ItemGroup>
  
   <ItemGroup>
+    <PackageReference Include="Blazored.LocalStorage" Version="4.2.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0-preview.4.22251.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0-preview.4.22251.1" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="2.2.0" />

FNZCM/FNZCM.BlazorWasm/Helpers/LocalStorageHelper.cs

@@ -0,0 +1,18 @@
+using Blazored.LocalStorage;
+using System.Runtime.CompilerServices;
+
+namespace FNZCM.BlazorWasm.Helpers
+{
+    public class LocalStorageHelper
+    {
+        private readonly ISyncLocalStorageService localStorage;
+
+        public LocalStorageHelper(ISyncLocalStorageService localStorage) => this.localStorage = localStorage;
+
+        public void Set<T>(T value, [CallerMemberName] string key = null) => localStorage.SetItem(key, value);
+        public T Get<T>([CallerMemberName] string key = null) => localStorage.GetItem<T>(key);
+        public void Remove([CallerMemberName] string key = null) => localStorage.RemoveItem(key);
+        public void Clear() => localStorage.Clear();
+
+    }
+}

FNZCM/FNZCM.BlazorWasm/Program.cs

@@ -1,10 +1,14 @@
+using Blazored.LocalStorage;
 using FNZCM.BlazorWasm.Helpers;
 using FNZCM.BlazorWasm.UI;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.Services.AddBlazoredLocalStorage();
 builder.Services.AddSingleton<ApiClient>();
+builder.Services.AddTransient<LocalStorageHelper>();
+
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 

FNZCM/FNZCM.BlazorWasm/UI/App.razor

@@ -30,6 +30,7 @@
                     Playlists
                 </button>
             </li>
+            <ThemeSelect></ThemeSelect>
         </ul>
         <div class="tab-content" id="NavTabContent">
             <div class="tab-pane fade show active" id="NavTabContent1" role="tabpanel" aria-labelledby="home-tab"><BrowseView></BrowseView></div>

FNZCM/FNZCM.BlazorWasm/UI/App.razor.cs

@@ -8,7 +8,7 @@ namespace FNZCM.BlazorWasm.UI
     {
         private string LoadingMessage { get; set; }
 
-        private LoadingProgress? Progress { get; set; }
+        private LoadingProgress Progress { get; set; }
 
         protected override async Task OnInitializedAsync()
         {

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

@@ -0,0 +1,49 @@
+@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</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();
+    }
+}

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/BrowseView.razor

@@ -19,8 +19,8 @@
             @foreach (var cat in (CurrentLibrary?.Catalogs).KeepNoEmpty())
             {
                 <li class="nav-item mb-1 mx-2">
-                    <a class="nav-link btn btn-secondary" href="@cat?.PlaylistPath" target="@FnzConst.PlaylistPageTarget" onclick="return BlockDownloadAndOpenHtmlPage(this)">
-                        <small class="font-monospace text-muted">@cat?.TotalDuration.SecondToDur() @cat?.TotalBytes.BytesToFileSize()</small>
+                    <a class="nav-link btn btn-info" href="@cat?.PlaylistPath" target="@FnzConst.PlaylistPageTarget" onclick="return BlockDownloadAndOpenHtmlPage(this)">
+                        <small class="font-monospace">@cat?.TotalDuration.SecondToDur() @cat?.TotalBytes.BytesToFileSize()</small>
                         @cat?.Name
                     </a>
                 </li>

FNZCM/FNZCM.BlazorWasm/UI/_Imports.razor

@@ -22,6 +22,7 @@
 @using FNZCM.BlazorWasm.Models
 @using FNZCM.BlazorWasm.Helpers
 @using FNZCM.BlazorWasm.UI
+@using FNZCM.BlazorWasm.UI.Components
 @using FNZCM.BlazorWasm.UI.Views.Browse
 @using FNZCM.BlazorWasm.UI.Views.Search
 @using FNZCM.BlazorWasm.UI.Views.Playlist

FNZCM/FNZCM.BlazorWasm/wwwroot/fnz.css

@@ -1,5 +1,5 @@
 .select2-results__option {
-    color:black;
+    color: black;
 }
 
 .bk-filename-text, .bk-indicators, .bk-arrow {
@@ -11,4 +11,20 @@
     background-size: cover !important;
     background-repeat: no-repeat;
     background-position: 50% 50%;
-}
+}
+
+/* */
+
+.dropdown-menu.show[aria-labelledby=themes] {
+    display: flex;
+    flex-wrap: wrap;
+    width: 420px
+}
+
+    .dropdown-menu.show[aria-labelledby=themes] .dropdown-item {
+        width: 33.333333%
+    }
+
+        .dropdown-menu.show[aria-labelledby=themes] .dropdown-item:first-child {
+            width: 100%
+        }

FNZCM/FNZCM.BlazorWasm/wwwroot/index.html

@@ -9,8 +9,8 @@
 
     <base href="/" />
 
-    <!--<link href="lib/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
-    <link href="lib/bootstrap/bootswatch/bootstrap.min.css" rel="stylesheet" />
+    <link href="lib/bootstrap/default/bootstrap.min.css" rel="stylesheet"/>
+
     <link href="lib/select2/select2.min.css" rel="stylesheet" />
     <link href="fnz.css" rel="stylesheet" />
 </head>