feat: add dark mode

manuel-rw · Jan 27, 2024 · 1c5f638 · 1c5f638
1 parent 8e64079
commit 1c5f638
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/GrocyScanner.Service/GrocyScanner.Service.csproj b/GrocyScanner.Service/GrocyScanner.Service.csproj
@@ -8,6 +8,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+      <PackageReference Include="Blazored.LocalStorage" Version="4.4.0" />
       <PackageReference Include="Humanizer" Version="2.14.1" />
       <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="7.0.15" />
       <PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />

diff --git a/GrocyScanner.Service/Pages/_Host.cshtml b/GrocyScanner.Service/Pages/_Host.cshtml
@@ -20,7 +20,7 @@
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
 </head>
 <body>
-<component type="typeof(App)" render-mode="ServerPrerendered"/>
+<component type="typeof(App)" render-mode="Server"/>
 
 <div id="blazor-error-ui">
     <environment include="Staging,Production">

diff --git a/GrocyScanner.Service/Program.cs b/GrocyScanner.Service/Program.cs
@@ -1,3 +1,4 @@
+using Blazored.LocalStorage;
 using GrocyScanner.Core.Configurations;
 using GrocyScanner.Core.GrocyClient;
 using GrocyScanner.Core.Providers;
@@ -34,6 +35,7 @@
 builder.Services.AddHttpClient();
 builder.Services.AddMudServices();
 builder.Services.AddScoped<IDialogService, DialogService>();
+builder.Services.AddBlazoredLocalStorage();
 
 WebApplication app = builder.Build();
 

diff --git a/GrocyScanner.Service/Shared/MainLayout.razor b/GrocyScanner.Service/Shared/MainLayout.razor
@@ -1,6 +1,8 @@
-@inherits LayoutComponentBase
+@using Blazored.LocalStorage
+@inherits LayoutComponentBase
+@inject ILocalStorageService LocalStorageService
 
-<MudThemeProvider/>
+<MudThemeProvider @bind-IsDarkMode="_isDarkTheme"/>
 <MudDialogProvider/>
 <MudSnackbarProvider/>
 
@@ -9,6 +11,7 @@
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())"/>
         <MudText Typo="Typo.h5" Class="ml-3">Grocy Scanner</MudText>
         <MudSpacer/>
+        <MudIconButton Icon="@(_isDarkTheme ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)" OnClick="ToggleDarkTheme"></MudIconButton>
         <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
     </MudAppBar>
     <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
@@ -27,10 +30,29 @@
 
 @code {
     bool _drawerOpen = true;
+    bool _isDarkTheme;
+
+        private const string IsDarkModeKey = "theme.is-dark-mode";
 
     void DrawerToggle()
     {
         _drawerOpen = !_drawerOpen;
     }
 
+    private async Task ToggleDarkTheme()
+    {
+        _isDarkTheme = !_isDarkTheme;
+        await LocalStorageService.SetItemAsync(IsDarkModeKey, _isDarkTheme);
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (!await LocalStorageService.ContainKeyAsync(IsDarkModeKey))
+        {
+            return;
+        }
+
+        _isDarkTheme = await LocalStorageService.GetItemAsync<bool>(IsDarkModeKey);
+    }
+
 }