- add bootstrap bootswatch theme

BlazorBootswatchTheme/BlazorApp/Program.cs

@@ -1,4 +1,5 @@
 using BlazorApp;
+using BlazorApp.Services;
 
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
@@ -7,6 +8,8 @@
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
+builder.Services.AddScoped<IThemeService, ThemeService>();
+
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
 await builder.Build().RunAsync();

BlazorBootswatchTheme/BlazorApp/Services/ThemeService.cs

@@ -0,0 +1,28 @@
+namespace BlazorApp.Services
+{
+    public interface IThemeService
+    {
+        public const string DefaultTheme = "Default";
+        public static readonly string[] SupportedThemeList = new[]
+        {
+            DefaultTheme,
+            "Cerulean",
+            "Cosmo",
+            "Cyborg",
+            "Darkly",
+            "Flatly",
+        };
+        string CurrentTheme { get; }
+        Task ToggleTheme(string themeName);
+    }
+    public class ThemeService : IThemeService
+    {
+        public string CurrentTheme { get; private set; } = IThemeService.DefaultTheme;
+
+        public async Task ToggleTheme(string themeName)
+        {
+            CurrentTheme = themeName;
+            await Task.CompletedTask;
+        }
+    }
+}

BlazorBootswatchTheme/BlazorApp/Shared/MainLayout.razor

@@ -1,17 +1,47 @@
 @inherits LayoutComponentBase
 
+@using BlazorApp.Services
+
+@inject IThemeService Theme
+@inject IJSRuntime JS
+
 <div class="page">
     <div class="sidebar">
         <NavMenu />
     </div>
 
     <main>
         <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+            <div class="dropdown">
+                <button class="btn btn-secondary btn-sm me-2" type="button" id="dropdownMenuButtonTheme" data-bs-toggle="dropdown" aria-expanded="false">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette me-1" viewBox="0 0 16 16">
+                        <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
+                        <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"/>
+                    </svg>@Theme.CurrentTheme
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonTheme">
+                    @foreach (var themeName in IThemeService.SupportedThemeList)
+                    {
+                        <li class="dropdown-item@(themeName == Theme.CurrentTheme ? " active" : "")" 
+                            @onclick=@(async () => await ToggleTheme(themeName))>@themeName</li>
+                    }
+                </ul>
+            </div>
         </div>
 
         <article class="content px-4">
             @Body
         </article>
     </main>
 </div>
+
+@code {
+    async Task ToggleTheme(string themeName)
+    {
+        if (Theme.CurrentTheme != themeName)
+        {
+            await Theme.ToggleTheme(themeName);
+            await JS.InvokeVoidAsync("ToggleTheme", themeName);
+        }
+    }
+}}

BlazorBootswatchTheme/BlazorApp/wwwroot/index.html

@@ -15,6 +15,7 @@
             crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
 
+    <script src="js/bootstrap.bundle.min.js"></script>
 </head>
 
 <body>