...

WebAssembly/Layout/MainLayout.razor

@@ -1,19 +1,54 @@
-@using MudBlazor
-@inherits LayoutComponentBase
+@inherits LayoutComponentBase
 
-<MudPopoverProvider/>
-<MudDialogProvider/>
-<MudSnackbarProvider/>
+<MudThemeProvider Theme="currentTheme" IsDarkMode="isDarkMode" />
+<MudPopoverProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
 
 <div class="page">
     <main>
         <div class="top-row px-4">
             <a href="/">Home</a>
             <a href="/contact">Contact</a>
+            <MudIconButton Icon="@(isDarkMode ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)"
+                           Color="Color.Inherit"
+                           OnClick="@ToggleDarkMode"
+                           aria-label="Toggle dark mode" />
         </div>
 
         <article class="content px-4">
             @Body
         </article>
     </main>
-</div>
+</div>
+
+@code {
+    private bool isDarkMode = true;
+
+    private MudTheme currentTheme = new()
+    {
+        PaletteLight = new PaletteLight
+        {
+            Primary = "#4308a3",
+            Secondary = "#432462",
+            Background = "#f5f5f5",
+            Surface = "#ffffff",
+            AppbarBackground = "#e8e8e8",
+            TextPrimary = "#1a1a1a",
+        },
+        PaletteDark = new PaletteDark
+        {
+            Primary = "#4308a3",
+            Secondary = "#432462",
+            Background = "#161618",
+            Surface = "#252526",
+            AppbarBackground = "#161618",
+            TextPrimary = "#ffffff",
+        }
+    };
+
+    private void ToggleDarkMode()
+    {
+        isDarkMode = !isDarkMode;
+    }
+}