Merge pull request #162 from BrammyS/features/157-darkmode-toggle

BrammyS · web-flow · commit 5c8eaefcf310 · 2025-03-23T10:10:06.000+01:00
Features/157 darkmode toggle
diff --git a/src/client/GalleryPixels.UI.Application/Services/IDarkModeService.cs b/src/client/GalleryPixels.UI.Application/Services/IDarkModeService.cs
@@ -0,0 +1,9 @@
+﻿namespace GalleryPixels.UI.Application.Services;
+
+public interface IDarkModeService
+{
+    Task UseDarkMode();
+    Task UseLightMode();
+    Task RespectOsPreference();
+    Task<bool> IsDarkMode();
+}
diff --git a/src/client/GalleryPixels.UI.Application/Services/IMagicGrid.cs b/src/client/GalleryPixels.UI.Application/Services/IMagicGrid.cs
@@ -1,4 +1,4 @@
-﻿namespace GalleryPixels.UI.Infrastructure.Services;
+﻿namespace GalleryPixels.UI.Application.Services;
 
 public interface IMagicGrid
 {
diff --git a/src/client/GalleryPixels.UI.Application/Services/IToastService.cs b/src/client/GalleryPixels.UI.Application/Services/IToastService.cs
@@ -0,0 +1,13 @@
+﻿using GalleryPixels.UI.Domain.Models;
+
+namespace GalleryPixels.UI.Application.Services;
+
+public interface IToastService
+{
+    event Func<ToastData, Task>? OnShow;
+    
+    void ShowSuccess(string message, int dismissAfter = 3);
+    void ShowError(string message, int dismissAfter = 3);
+    void ShowWarning(string message, int dismissAfter = 3);
+    void ShowInfo(string message, int dismissAfter = 3);
+}
diff --git a/src/client/GalleryPixels.UI.Domain/Models/ToastData.cs b/src/client/GalleryPixels.UI.Domain/Models/ToastData.cs
@@ -1,3 +1,3 @@
-﻿namespace GalleryPixels.UI.Enums;
+﻿namespace GalleryPixels.UI.Domain.Models;
 
 public record ToastData(ToastType Type, string Message, int DismissAfter);
diff --git a/src/client/GalleryPixels.UI.Domain/Models/ToastType.cs b/src/client/GalleryPixels.UI.Domain/Models/ToastType.cs
@@ -1,4 +1,4 @@
-﻿namespace GalleryPixels.UI.Enums;
+﻿namespace GalleryPixels.UI.Domain.Models;
 
 public enum ToastType
 {
diff --git a/src/client/GalleryPixels.UI.Infrastructure/DependencyInjection.cs b/src/client/GalleryPixels.UI.Infrastructure/DependencyInjection.cs
@@ -22,8 +22,12 @@ public static IServiceCollection RegisterInfrastructure(this IServiceCollection
         );
         
         services.AddBlazoredLocalStorage();
+        services.AddScoped<IMagicGrid, MagicGrid>();
+        services.AddScoped<IDarkModeService, DarkModeService>();
         services.AddScoped<ILocalStorageService, LocalStorageService>();
         services.AddScoped<IGalleryPixelsApiService, GalleryPixelsApiService>();
+        services.AddSingleton<IToastService, ToastService>();
+
 
         return services;
     }
diff --git a/src/client/GalleryPixels.UI.Infrastructure/GalleryPixels.UI.Infrastructure.csproj b/src/client/GalleryPixels.UI.Infrastructure/GalleryPixels.UI.Infrastructure.csproj
@@ -7,9 +7,10 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="9.0.3" />
-        <PackageReference Include="Microsoft.Extensions.Http" Version="9.0.3" />
-        <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
+        <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="9.0.3"/>
+        <PackageReference Include="Microsoft.Extensions.Http" Version="9.0.3"/>
+        <PackageReference Include="Blazored.LocalStorage" Version="4.5.0"/>
+        <PackageReference Include="Microsoft.JSInterop" Version="9.0.3"/>
     </ItemGroup>
 
     <ItemGroup>
diff --git a/src/client/GalleryPixels.UI.Infrastructure/Services/DarkModeService.cs b/src/client/GalleryPixels.UI.Infrastructure/Services/DarkModeService.cs
@@ -0,0 +1,27 @@
+﻿using GalleryPixels.UI.Application.Services;
+using Microsoft.JSInterop;
+
+namespace GalleryPixels.UI.Infrastructure.Services;
+
+public class DarkModeService(IJSRuntime jsRuntime) : IDarkModeService
+{
+    public async Task UseDarkMode()
+    {
+        await jsRuntime.InvokeVoidAsync("useDarkMode").ConfigureAwait(false);
+    }
+
+    public async Task UseLightMode()
+    {
+        await jsRuntime.InvokeVoidAsync("useLightMode").ConfigureAwait(false);
+    }
+
+    public async Task RespectOsPreference()
+    {
+        await jsRuntime.InvokeVoidAsync("respectOsPreference").ConfigureAwait(false);
+    }
+
+    public async Task<bool> IsDarkMode()
+    {
+        return await jsRuntime.InvokeAsync<bool>("isDarkMode").ConfigureAwait(false);
+    }
+}
diff --git a/src/client/GalleryPixels.UI.Infrastructure/Services/MagicGrid.cs b/src/client/GalleryPixels.UI.Infrastructure/Services/MagicGrid.cs
@@ -0,0 +1,21 @@
+﻿using GalleryPixels.UI.Application.Services;
+using Microsoft.JSInterop;
+
+namespace GalleryPixels.UI.Infrastructure.Services;
+
+public class MagicGrid(IJSRuntime jSRuntime) : IMagicGrid
+{
+    public ValueTask InitAsync(
+        string containerSelector,
+        int gutterSize,
+        int items
+    )
+    {
+        return jSRuntime.InvokeVoidAsync(
+            "initMasonry",
+            containerSelector,
+            gutterSize,
+            items
+        );
+    }
+}
diff --git a/src/client/GalleryPixels.UI.Infrastructure/Services/ToastService.cs b/src/client/GalleryPixels.UI.Infrastructure/Services/ToastService.cs
@@ -1,18 +1,18 @@
-﻿using GalleryPixels.UI.Enums;
+﻿using GalleryPixels.UI.Application.Services;
+using GalleryPixels.UI.Domain.Models;
 
-namespace GalleryPixels.UI.Services;
+namespace GalleryPixels.UI.Infrastructure.Services;
 
-public class ToastService
+public class ToastService : IToastService
 {
     public event Func<ToastData, Task>? OnShow;
+    public void ShowSuccess(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Success, message, dismissAfter));
+    public void ShowError(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Error, message, dismissAfter));
+    public void ShowWarning(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Warning, message, dismissAfter));
+    public void ShowInfo(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Info, message, dismissAfter));
 
     private void ShowToast(ToastData toastData)
     {
         OnShow?.Invoke(toastData);
     }
-
-    public void ShowSuccess(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Success, message, dismissAfter));
-    public void ShowError(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Error, message, dismissAfter));
-    public void ShowWarning(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Warning, message, dismissAfter));
-    public void ShowInfo(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Info, message, dismissAfter));
 }
diff --git a/src/client/GalleryPixels.UI/DependencyInjection.cs b/src/client/GalleryPixels.UI/DependencyInjection.cs
@@ -1,8 +1,6 @@
 ﻿using BlazorPro.BlazorSize;
 using GalleryPixels.UI.Application;
 using GalleryPixels.UI.Infrastructure;
-using GalleryPixels.UI.Infrastructure.Services;
-using GalleryPixels.UI.Services;
 
 namespace GalleryPixels.UI;
 
@@ -11,9 +9,7 @@ public static class DependencyInjection
     // ReSharper disable once InconsistentNaming
     public static IServiceCollection RegisterUI(this IServiceCollection services, IConfiguration configuration)
     {
-        services.AddScoped<IMagicGrid, MagicGrid>();
         services.AddScoped<IResizeListener, ResizeListener>();
-        services.AddSingleton<ToastService>();
         
         return services
             .RegisterApplication()
diff --git a/src/client/GalleryPixels.UI/Pages/Auth/Login.razor b/src/client/GalleryPixels.UI/Pages/Auth/Login.razor
@@ -1,7 +1,7 @@
 ﻿@page "/Auth/Login"
 @inject IAuthService AuthService
 @inject NavigationManager NavigationManager
-@inject ToastService ToastService
+@inject IToastService ToastService
 
 <div class="flex items-center h-screen w-full">
     <div class="w-full bg-surface dark:bg-surface-dark text-on-surface dark:text-on-surface-dark rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
diff --git a/src/client/GalleryPixels.UI/Pages/Auth/Register.razor b/src/client/GalleryPixels.UI/Pages/Auth/Register.razor
@@ -1,10 +1,10 @@
 ﻿@page "/Auth/Register"
 @inject IAuthService AuthService
-@inject ToastService ToastService
+@inject IToastService ToastService
 @inject NavigationManager NavigationManager
 
 <div class="flex items-center h-screen w-full">
-    <div class="w-full bg-on-background dark:bg-surface-dark text-on-surface dark:text-on-surface-dark rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
+    <div class="w-full bg-surface dark:bg-surface-dark text-on-surface dark:text-on-surface-dark rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
         <span class="block w-full text-xl uppercase font-bold mb-4">Login</span>
         <form @onsubmit="RegisterAsync">
             <div class="mb-4 md:w-full">
diff --git a/src/client/GalleryPixels.UI/Services/MagicGrid.cs b/src/client/GalleryPixels.UI/Services/MagicGrid.cs
diff --git a/src/client/GalleryPixels.UI/Shared/DarkModeToggle.razor b/src/client/GalleryPixels.UI/Shared/DarkModeToggle.razor
@@ -0,0 +1,47 @@
+﻿@inject IDarkModeService DarkModeService
+
+<button class="fixed bottom-0 right-0 z-50 py-1 mb-4 mr-4 px-3 cursor-pointer rounded-full transition duration-300 bg-surface dark:bg-surface-dark text-on-surface dark:text-on-surface-dark" @onclick="ToggleDarkModeAsync">
+    @if (_isDark)
+    {
+        <svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 11.5066C3 16.7497 7.25034 21 12.4934 21C16.2209 21 19.4466 18.8518 21 15.7259C12.4934 15.7259 8.27411 11.5066 8.27411 3C5.14821 4.55344 3 7.77915 3 11.5066Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    }
+    else
+    {
+        <svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M22 12L23 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M12 2V1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M12 23V22" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M20 20L19 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M20 4L19 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M4 20L5 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M4 4L5 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M1 12L2 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    }
+</button>
+
+@code {
+
+    private bool _isDark;
+
+    /// <inheritdoc />
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _isDark = await DarkModeService.IsDarkMode();
+            StateHasChanged();
+        }
+    }
+
+    private async Task ToggleDarkModeAsync()
+    {
+        _isDark = !_isDark;
+        if (_isDark) await DarkModeService.UseDarkMode();
+        else await DarkModeService.UseLightMode();
+    }
+
+}
diff --git a/src/client/GalleryPixels.UI/Shared/Images/MasonryGrid.razor b/src/client/GalleryPixels.UI/Shared/Images/MasonryGrid.razor
@@ -1,5 +1,4 @@
 ﻿@using GalleryPixels.UI.Domain.Models
-@using GalleryPixels.UI.Infrastructure.Services
 @inject IImagePlaceHolderService ImageService
 @inject IMagicGrid MagicGrid
 @inject IResizeListener Listener
diff --git a/src/client/GalleryPixels.UI/Shared/MainLayout.razor b/src/client/GalleryPixels.UI/Shared/MainLayout.razor
@@ -1,6 +1,7 @@
 ﻿@inherits LayoutComponentBase
 
 <Toast />
+<DarkModeToggle/>
 
 <div class="min-h-screen flex flex-col">
     <main class="flex flex-1 justify-center overflow-x-hidden">
diff --git a/src/client/GalleryPixels.UI/Shared/Toast.razor b/src/client/GalleryPixels.UI/Shared/Toast.razor
@@ -1,5 +1,5 @@
-﻿@using GalleryPixels.UI.Enums
-@inject ToastService ToastService
+﻿@using GalleryPixels.UI.Domain.Models
+@inject IToastService ToastService
 @implements IDisposable
 
 @if (ShowMessage)
diff --git a/src/client/GalleryPixels.UI/_Imports.razor b/src/client/GalleryPixels.UI/_Imports.razor
@@ -12,4 +12,4 @@
 @using GalleryPixels.UI.Domain.Services
 @using GalleryPixels.UI.Shared.Images
 @using Microsoft.AspNetCore.Authorization
-@using GalleryPixels.UI.Services
+@using GalleryPixels.UI.Application.Services
diff --git a/src/client/GalleryPixels.UI/wwwroot/js/TailwindCdnConfig.js b/src/client/GalleryPixels.UI/wwwroot/js/TailwindCdnConfig.js
diff --git a/src/client/GalleryPixels.UI/wwwroot/js/scripts.js b/src/client/GalleryPixels.UI/wwwroot/js/scripts.js
@@ -1,20 +1,24 @@
 ﻿updateDarkModeSetting();
 
+// noinspection JSUnusedGlobalSymbols
 function useLightMode() {
     localStorage.theme = 'light';
     updateDarkModeSetting();
 }
 
+// noinspection JSUnusedGlobalSymbols
 function useDarkMode() {
     localStorage.theme = 'dark';
     updateDarkModeSetting();
 }
 
+// noinspection JSUnusedGlobalSymbols
 function respectOsPreference() {
     localStorage.removeItem('theme');
     updateDarkModeSetting();
 }
 
+// noinspection JSUnusedGlobalSymbols
 function updateDarkModeSetting() {
     // On page load or when changing themes, best to add inline in `head` to avoid FOUC
     if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
@@ -24,10 +28,12 @@ function updateDarkModeSetting() {
     }
 }
 
+// noinspection JSUnusedGlobalSymbols
 function isDarkMode() {
-    return localStorage.theme === 'dark';
+    return localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
 }
 
+// noinspection JSUnusedGlobalSymbols
 function initMasonry(containerSelector, gutterSize, items) {
     let magicGrid = new MagicGrid({
         container: containerSelector,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-namespace GalleryPixels.UI.Infrastructure.Services;`
	`1`	`+namespace GalleryPixels.UI.Application.Services;`
`2`	`2`
`3`	`3`	`public interface IMagicGrid`
`4`	`4`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`		`-namespace GalleryPixels.UI.Enums;`
	`1`	`+namespace GalleryPixels.UI.Domain.Models;`
`2`	`2`
`3`	`3`	`public record ToastData(ToastType Type, string Message, int DismissAfter);`
Original file line number	Diff line number	Diff line change
`@@ -1,18 +1,18 @@`
`1`		`-using GalleryPixels.UI.Enums;`
	`1`	`+using GalleryPixels.UI.Application.Services;`
	`2`	`+using GalleryPixels.UI.Domain.Models;`
`2`	`3`
`3`		`-namespace GalleryPixels.UI.Services;`
	`4`	`+namespace GalleryPixels.UI.Infrastructure.Services;`
`4`	`5`
`5`		`-public class ToastService`
	`6`	`+public class ToastService : IToastService`
`6`	`7`	`{`
`7`	`8`	`public event Func<ToastData, Task>? OnShow;`
	`9`	`+ public void ShowSuccess(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Success, message, dismissAfter));`
	`10`	`+ public void ShowError(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Error, message, dismissAfter));`
	`11`	`+ public void ShowWarning(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Warning, message, dismissAfter));`
	`12`	`+ public void ShowInfo(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Info, message, dismissAfter));`
`8`	`13`
`9`	`14`	`private void ShowToast(ToastData toastData)`
`10`	`15`	`{`
`11`	`16`	`OnShow?.Invoke(toastData);`
`12`	`17`	`}`
`13`		`-`
`14`		`- public void ShowSuccess(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Success, message, dismissAfter));`
`15`		`- public void ShowError(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Error, message, dismissAfter));`
`16`		`- public void ShowWarning(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Warning, message, dismissAfter));`
`17`		`- public void ShowInfo(string message, int dismissAfter = 3) => ShowToast(new ToastData(ToastType.Info, message, dismissAfter));`
`18`	`18`	`}`