Implement darkmode

Modix.Web/App.razor

@@ -40,6 +40,9 @@
     [Parameter]
     public string? ShowInactivePromotions { get; set; }
 
+    [Parameter]
+    public string? UseDarkMode { get; set; }
+
     [Inject]
     public SessionState SessionState { get; set; } = null!;
 
@@ -65,12 +68,14 @@
         _ = bool.TryParse(ShowInfractionState, out var showInfractionState);
         _ = bool.TryParse(ShowDeletedInfractions, out var showDeletedInfractions);
         _ = bool.TryParse(ShowInactivePromotions, out var showInactivePromotions);
+        _ = bool.TryParse(UseDarkMode, out var useDarkMode);
 
         SessionState.CurrentUserId = userSnowflake;
         SessionState.SelectedGuild = selectedGuildId;
         SessionState.ShowInfractionState = showInfractionState;
         SessionState.ShowDeletedInfractions = showDeletedInfractions;
         SessionState.ShowInactivePromotions = showInactivePromotions;
+        SessionState.UseDarkMode = useDarkMode;
 
         var currentUser = DiscordHelper.GetCurrentUser();
 

Modix.Web/Models/CookieConstants.cs

@@ -6,4 +6,5 @@ public static class CookieConstants
     public const string ShowInfractionState = nameof(ShowInfractionState);
     public const string ShowDeletedInfractions = nameof(ShowDeletedInfractions);
     public const string ShowInactivePromotions = nameof(ShowInactivePromotions);
+    public const string UseDarkMode = nameof(UseDarkMode);
 }

Modix.Web/Models/SessionState.cs

@@ -7,4 +7,5 @@ public class SessionState
     public bool ShowDeletedInfractions { get; set; }
     public bool ShowInfractionState { get; set; }
     public bool ShowInactivePromotions { get; set; }
+    public bool UseDarkMode { get; set; }
 }

Modix.Web/Pages/Commands.razor

@@ -2,6 +2,7 @@
 @using Modix.Services.CommandHelp;
 @using Modix.Services.Utilities;
 @using Modix.Web.Components
+@using Modix.Web.Models
 @using Modix.Web.Models.Commands;
 @using MudBlazor;
 @using Humanizer;
@@ -33,10 +34,9 @@
                             <MudText Typo="Typo.h4">@module.Name</MudText>
                         </MudLink>
                         <MudText Typo="Typo.h5">@module.Summary</MudText>
-
-                        @foreach (var command in module.Commands)
+                            @foreach (var command in module.Commands)
                         {
-                            <MudCard Class="mb-6" Style="background-color:#f5f5f5" Elevation="2">
+                            <MudCard Class="mb-6" Elevation="2">
                                 @foreach (var alias in command.Aliases)
                                 {
                                     <div class="control flex-md-row flex-column flex-wrap">
@@ -57,8 +57,7 @@
                                                                         ShowOnHover="true"
                                                                         Placement="Placement.Top"
                                                                         Text="@description"
-                                                                        RootClass="tag"
-                                                                        RootStyle="background-color:#f5f5f5">
+                                                                        RootClass="tag">
                                                                 &hellip;
                                                             </MudTooltip>
                                                         }

Modix.Web/Pages/Index.razor

@@ -17,7 +17,13 @@
         and check out our <a href="https://github.com/discord-csharp/MODiX">GitHub repo</a>!
     </MudText>
 
-    <MudLink Class="d-flex justify-center" Href="http://aka.ms/csharp-discord">
-        <MudImage Src="https://discord.com/api/guilds/143867839282020352/widget.png?style=banner1" />
-    </MudLink>
+    <div class="d-flex">
+        <MudSpacer />
+
+        <MudLink Href="http://aka.ms/csharp-discord" >
+            <MudImage Src="https://discord.com/api/guilds/143867839282020352/widget.png?style=banner1" />
+        </MudLink>
+
+        <MudSpacer />
+    </div>
 </MudContainer>

Modix.Web/Pages/_Host.cshtml

@@ -26,6 +26,7 @@
                param-ShowInfractionState="@Request.Cookies[CookieConstants.ShowInfractionState]"
                param-ShowDeletedInfractions="@Request.Cookies[CookieConstants.ShowDeletedInfractions]"
                param-ShowInactivePromotions="@Request.Cookies[CookieConstants.ShowInactivePromotions]"
+               param-UseDarkMode="@Request.Cookies[CookieConstants.UseDarkMode]"
                />
 
     <div id="blazor-error-ui">

Modix.Web/Services/CookieService.cs

@@ -29,6 +29,12 @@ public async Task SetShowInactivePromotionsAsync(bool showInactivePromotions)
         sessionState.ShowInactivePromotions = showInactivePromotions;
     }
 
+    public async Task SetUseDarkModeAsync(bool useDarkMode)
+    {
+        await SetCookieAsync(CookieConstants.UseDarkMode, useDarkMode);
+        sessionState.UseDarkMode = useDarkMode;
+    }
+
     private async Task SetCookieAsync<T>(string key, T value)
         => await jsRuntime.InvokeVoidAsync("eval", $"document.cookie = \"{key}={value}; path=/\";");
 }

Modix.Web/Shared/MainLayout.razor

@@ -1,15 +1,16 @@
 @using Modix.Data.Models.Core;
+@using Modix.Web.Models
 @using MudBlazor
 @inherits LayoutComponentBase
 
-<MudThemeProvider Theme="@_theme" />
+<MudThemeProvider Theme="@_theme" @bind-IsDarkMode="SessionState.UseDarkMode" />
 <MudDialogProvider />
 <MudSnackbarProvider />
 
 <CascadingAuthenticationState>
     <MudLayout>
 
-        <NavMenu />
+        <NavMenu @bind-DarkMode="SessionState.UseDarkMode" />
 
         <MudMainContent>
             @Body
@@ -19,12 +20,19 @@
 </CascadingAuthenticationState>
 
 @code {
+    [Inject]
+    public required SessionState SessionState { get; set; }
 
     private MudTheme _theme = new()
     {
-        Palette = new()
+        Palette = new PaletteLight()
         {
             Primary = new("#803788"),
+            Surface = new("#fafafa")
+        },
+        PaletteDark = new PaletteDark()
+        {
+                Primary = new("#803788"),
         },
         Typography = new()
         {

Modix.Web/Shared/NavMenu.razor

@@ -29,15 +29,42 @@
 
             <AuthorizeView>
                 <MudSpacer />
+
+                @* The color: inherit here is needed to keep the colors consistent between link icons and light/dark theme icons
+                    I would suggest not thinking about it too much :) *@
+                <MudToggleIconButton Class="mr-2" Style="color: inherit"
+                    Size="Size.Small"
+                    ToggledSize="Size.Small"
+                    Toggled="DarkMode"
+                    ToggledChanged="ToggleDarkMode"
+                    ToggledIcon="@Icons.Material.Filled.LightMode"
+                    Icon="@Icons.Material.Filled.DarkMode"
+                    Color="Color.Surface"/>
+
                 <MiniUser />
             </AuthorizeView>
         </MudAppBar>
     </div>
 </CascadingAuthenticationState>
 
 @code {
+    [Inject]
+    public required CookieService CookieService { get; set; }
+
+    [Parameter]
+    public bool DarkMode { get; set; }
+
+    [Parameter]
+    public EventCallback<bool> DarkModeChanged { get; set; }
 
     private bool _drawerVisible;
 
     private void ToggleDrawer() => _drawerVisible = !_drawerVisible;
+
+    private async Task ToggleDarkMode(bool toggled)
+    {
+        DarkMode = toggled;
+        await DarkModeChanged.InvokeAsync(DarkMode);
+        await CookieService.SetUseDarkModeAsync(DarkMode);
+    }
 }