...

WebAssembly/App.razor

@@ -13,10 +13,17 @@
 
 <style>
     a {
-        color: white;
         font-weight: 700;
     }
 
+    html.mud-theme-dark a {
+        color: white;
+    }
+
+    html.mud-theme-light a {
+        color: #4308a3;
+    }
+
     a:hover {
         color: white;
         text-decoration: underline;
@@ -24,7 +31,6 @@
         text-decoration-thickness: 3px;
     }
 
-
     :root {
         --severity-warning-color: #2a2000;
         --severity-warning-border-color: #755c13;
@@ -34,7 +40,6 @@
         --severity-information-border-color: #2c3a4c;
         --severity-success-color: #042901;
         --severity-success-border-color: #2E4C2C;
-
         --accent: #432462;
         --primary: #4308a3;
         --primary-border: #2c0b62;
@@ -46,16 +51,41 @@
         --secondary-border-hover: #a168ff;
         --paper: #252526;
         --paper-border: #151516;
-
         --paper-hover: #52366f;
         --paper-border-hover: #653497;
-
         --info: #451376;
         --info-border: #210b36;
-
         --dialog-border-color: black;
         --dialog-border-width: 2px;
         --dialog-radius: 6px;
     }
 
+    html.mud-theme-light {
+        --severity-warning-color: #fff8e1;
+        --severity-warning-border-color: #ffc107;
+        --severity-error-color: #ffebee;
+        --severity-error-border-color: #f44336;
+        --severity-information-color: #e3f2fd;
+        --severity-information-border-color: #2196f3;
+        --severity-success-color: #e8f5e9;
+        --severity-success-border-color: #4caf50;
+        --accent: #6b4c8a;
+        --primary: #6b2abf;
+        --primary-border: #5a1ea8;
+        --primary-hover: #7d3ad6;
+        --primary-border-hover: #6b2abf;
+        --background: #f5f5f5;
+        --secondary: #e8dff5;
+        --secondary-hover: #d4c4ed;
+        --secondary-border-hover: #b8a0d9;
+        --paper: #ffffff;
+        --paper-border: #e0e0e0;
+        --paper-hover: #f0ebf5;
+        --paper-border-hover: #d4c4ed;
+        --info: #e8dff5;
+        --info-border: #d4c4ed;
+        --dialog-border-color: #cccccc;
+        --dialog-border-width: 2px;
+        --dialog-radius: 6px;
+    }
 </style>

WebAssembly/Layout/MainLayout.razor

@@ -1,6 +1,6 @@
-@using MudBlazor
-@inherits LayoutComponentBase
+@inherits LayoutComponentBase
 
+<MudThemeProvider Theme="currentTheme" IsDarkMode="isDarkMode" />
 <MudPopoverProvider />
 <MudDialogProvider />
 <MudSnackbarProvider />
@@ -10,6 +10,10 @@
         <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">
@@ -17,3 +21,34 @@
         </article>
     </main>
 </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;
+    }
+}

WebAssembly/_Imports.razor

@@ -7,4 +7,5 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 @using WebAssembly
+@using MudBlazor
 @using WebAssembly.Layout

WebAssembly/wwwroot/index.html

@@ -8,6 +8,7 @@
     <base href="/" />
     <link rel="preload" id="webassembly" />
     <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="_content/MudBlazor/MudBlazor.min.css" />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="WebAssembly.styles.css" rel="stylesheet" />