Add dark mode toggle with ThemeState service

Implement dark mode support using a new ThemeState service that manages theme switching and integrates with DevExpress Blazor theming. Update App.razor to apply the theme globally, enhance MainLayout with a toggle button and dynamic CSS classes, and add dark mode styles to CSS files. Register ThemeState as a scoped service in Program.cs.

DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor

@@ -1,12 +1,15 @@
 @inherits LayoutComponentBase
+@implements IDisposable
+@inject ThemeState ThemeState
 
-<div class="page">
+<div class="page @(ThemeState.IsDarkMode ? "app-dark" : "app-light")">
     <div class="sidebar">
         <NavMenu />
     </div>
 
     <main>
         <div class="top-row px-4">
+            <DxButton Text="@(ThemeState.IsDarkMode ? "Dark Mode aus" : "Dark Mode an")" Click="ToggleTheme" />
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
@@ -21,3 +24,20 @@
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
+
+@code {
+    protected override void OnInitialized()
+    {
+        ThemeState.OnChange += StateHasChanged;
+    }
+
+    private void ToggleTheme()
+    {
+        ThemeState.SetDarkMode(!ThemeState.IsDarkMode);
+    }
+
+    public void Dispose()
+    {
+        ThemeState.OnChange -= StateHasChanged;
+    }
+}

DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor.css

@@ -4,14 +4,27 @@
     flex-direction: column;
 }
 
+.page.app-dark {
+    background-color: #1b1b1b;
+    color: #f1f1f1;
+}
+
 main {
     flex: 1;
 }
 
+.page.app-dark main {
+    background-color: #1b1b1b;
+}
+
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }
 
+.page.app-dark .sidebar {
+    background-image: linear-gradient(180deg, #171717 0%, #0f2a46 70%);
+}
+
 .top-row {
     background-color: #f7f7f7;
     border-bottom: 1px solid #d6d5d5;
@@ -21,6 +34,11 @@ main {
     align-items: center;
 }
 
+.page.app-dark .top-row {
+    background-color: #222;
+    border-bottom-color: #3d3d3d;
+}
+
     .top-row ::deep a, .top-row ::deep .btn-link {
         white-space: nowrap;
         margin-left: 1.5rem;