From 64888e4bc40687e4bdb72046abbfb801aadf60db Mon Sep 17 00:00:00 2001 From: calledude <22471295+calledude@users.noreply.github.com> Date: Tue, 26 Mar 2024 20:38:31 +0100 Subject: [PATCH] Implement darkmode --- Modix.Web/App.razor | 5 +++++ Modix.Web/Models/CookieConstants.cs | 1 + Modix.Web/Models/SessionState.cs | 1 + Modix.Web/Pages/Commands.razor | 9 ++++----- Modix.Web/Pages/Index.razor | 12 +++++++++--- Modix.Web/Pages/_Host.cshtml | 1 + Modix.Web/Services/CookieService.cs | 6 ++++++ Modix.Web/Shared/MainLayout.razor | 14 +++++++++++--- Modix.Web/Shared/NavMenu.razor | 27 +++++++++++++++++++++++++++ 9 files changed, 65 insertions(+), 11 deletions(-) diff --git a/Modix.Web/App.razor b/Modix.Web/App.razor index a0aa08a85..a3e8b7651 100644 --- a/Modix.Web/App.razor +++ b/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(); diff --git a/Modix.Web/Models/CookieConstants.cs b/Modix.Web/Models/CookieConstants.cs index f6ebf766c..e3266f456 100644 --- a/Modix.Web/Models/CookieConstants.cs +++ b/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); } diff --git a/Modix.Web/Models/SessionState.cs b/Modix.Web/Models/SessionState.cs index b6e6701f5..eab0456a8 100644 --- a/Modix.Web/Models/SessionState.cs +++ b/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; } } diff --git a/Modix.Web/Pages/Commands.razor b/Modix.Web/Pages/Commands.razor index 9950a57c2..15e4a0fcd 100644 --- a/Modix.Web/Pages/Commands.razor +++ b/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 @@ @module.Name @module.Summary - - @foreach (var command in module.Commands) + @foreach (var command in module.Commands) { - + @foreach (var alias in command.Aliases) {
@@ -57,8 +57,7 @@ ShowOnHover="true" Placement="Placement.Top" Text="@description" - RootClass="tag" - RootStyle="background-color:#f5f5f5"> + RootClass="tag"> … } diff --git a/Modix.Web/Pages/Index.razor b/Modix.Web/Pages/Index.razor index 6cf3cd4e6..7385a9715 100644 --- a/Modix.Web/Pages/Index.razor +++ b/Modix.Web/Pages/Index.razor @@ -17,7 +17,13 @@ and check out our GitHub repo! - - - +
+ + + + + + + +
diff --git a/Modix.Web/Pages/_Host.cshtml b/Modix.Web/Pages/_Host.cshtml index 0d78d30c7..14ebc7c03 100644 --- a/Modix.Web/Pages/_Host.cshtml +++ b/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]" />
diff --git a/Modix.Web/Services/CookieService.cs b/Modix.Web/Services/CookieService.cs index fe60141be..b9afd472c 100644 --- a/Modix.Web/Services/CookieService.cs +++ b/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(string key, T value) => await jsRuntime.InvokeVoidAsync("eval", $"document.cookie = \"{key}={value}; path=/\";"); } diff --git a/Modix.Web/Shared/MainLayout.razor b/Modix.Web/Shared/MainLayout.razor index 448f695bb..a7d8ba2c3 100644 --- a/Modix.Web/Shared/MainLayout.razor +++ b/Modix.Web/Shared/MainLayout.razor @@ -1,15 +1,16 @@ @using Modix.Data.Models.Core; +@using Modix.Web.Models @using MudBlazor @inherits LayoutComponentBase - + - + @Body @@ -19,12 +20,19 @@ @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() { diff --git a/Modix.Web/Shared/NavMenu.razor b/Modix.Web/Shared/NavMenu.razor index 07fefc615..bf7308789 100644 --- a/Modix.Web/Shared/NavMenu.razor +++ b/Modix.Web/Shared/NavMenu.razor @@ -29,6 +29,18 @@ + + @* 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 :) *@ + + @@ -36,8 +48,23 @@ @code { + [Inject] + public required CookieService CookieService { get; set; } + + [Parameter] + public bool DarkMode { get; set; } + + [Parameter] + public EventCallback 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); + } }