Improve spacing for Dark Mode button in top row

Wrapped the Dark Mode toggle button in a span with left margin
for better separation from the theme combo box. Added a new
.btn-gap CSS class to standardize button spacing in the top row.

DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor

@@ -9,7 +9,14 @@
 
     <main>
         <div class="top-row px-4">
-            <DxButton Text="@(ThemeState.IsDarkMode ? "Dark Mode aus" : "Dark Mode an")" Click="ToggleTheme" />
+            <DxComboBox Data="@ThemeState.AvailableThemes"
+                        Value="@ThemeState.CurrentThemeName"
+                        ValueChanged="@((string t) => ThemeState.SetTheme(t))"
+                        style="width: 130px;" />
+            <span style="margin-left: 12px;">
+                <DxButton Text="@(ThemeState.IsDarkMode ? "Dark Mode aus" : "Dark Mode an")"
+                          Click="ToggleTheme" />
+            </span>
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 

DbFirst.BlazorWebApp/Services/ThemeState.cs

@@ -12,24 +12,46 @@ public class ThemeState
     }
 
     public bool IsDarkMode { get; private set; }
+    public string CurrentThemeName { get; private set; } = "Fluent";
+
+    public static readonly List<string> AvailableThemes = ["Fluent", "BlazingBerry", "Purple", "OfficeWhite", "BootstrapExternal"];
 
     public event Action? OnChange;
 
-    public void SetDarkMode(bool isDarkMode)
+    public void SetTheme(string themeName)
     {
-        if (IsDarkMode == isDarkMode)
-        {
-            return;
+        if (CurrentThemeName == themeName) return;
+        CurrentThemeName = themeName;
+        ApplyTheme();
+        OnChange?.Invoke();
     }
 
+    public void SetDarkMode(bool isDarkMode)
+    {
+        if (IsDarkMode == isDarkMode) return;
         IsDarkMode = isDarkMode;
+        ApplyTheme();
+        OnChange?.Invoke();
+    }
+
+    private void ApplyTheme()
+    {
+        if (CurrentThemeName == "Fluent")
+        {
             var theme = Themes.Fluent.Clone(properties =>
             {
-            properties.Mode = isDarkMode ? ThemeMode.Dark : ThemeMode.Light;
+                properties.Mode = IsDarkMode ? ThemeMode.Dark : ThemeMode.Light;
                 properties.ApplyToPageElements = true;
             });
-
             themeChangeService.SetTheme(theme);
+        }
+        else if (CurrentThemeName == "BlazingBerry")  themeChangeService.SetTheme(Themes.BlazingBerry);
+        else if (CurrentThemeName == "Purple")         themeChangeService.SetTheme(Themes.Purple);
+        else if (CurrentThemeName == "OfficeWhite")    themeChangeService.SetTheme(Themes.OfficeWhite);
+        else if (CurrentThemeName == "BootstrapExternal") themeChangeService.SetTheme(Themes.BootstrapExternal);
+        else
+            themeChangeService.SetTheme(Themes.Fluent);
+
         OnChange?.Invoke();
     }
 }

DbFirst.BlazorWebApp/wwwroot/app.css

@@ -185,3 +185,7 @@ dxbl-grid tbody tr:nth-child(even) td {
     align-items: center;
     justify-content: center;
 }
+
+.top-row .btn-gap {
+    margin-left: 8px;
+}