383 move color mode switcher to settings page

src/AppServices.Core/EntityServices/Staff/StaffService.cs

@@ -31,6 +31,9 @@ public interface IStaffService : IDisposable, IAsyncDisposable
     Task<IReadOnlyList<AppRole>> GetAppRolesAsync(string id);
     Task<IdentityResult> UpdateRolesAsync(string id, Dictionary<string, bool> roles);
     Task<IdentityResult> UpdateAsync(string id, StaffUpdateDto resource);
+    Task<UserPreferences> GetPreferencesAsync();
+    Task UpdateThemePreferenceAsync(ThemePreference theme);
+
 }
 
 public sealed class StaffService(
@@ -175,7 +178,21 @@ public async Task<IdentityResult> UpdateAsync(string id, StaffUpdateDto resource
         await cache.RemoveByTagAsync(CachedStaffLists).ConfigureAwait(false);
         return await userManager.UpdateAsync(user).ConfigureAwait(false);
     }
+    public async Task<UserPreferences> GetPreferencesAsync()
+    {
+        var user = await userService.GetCurrentUserAsync()
+            ?? throw new CurrentUserNotFoundException();
 
+        return user.Preferences;
+    }
+    public async Task UpdateThemePreferenceAsync(ThemePreference theme)
+    {
+        var user = await userService.GetCurrentUserAsync()
+            ?? throw new CurrentUserNotFoundException();
+
+        user.Preferences.Theme = theme;
+        await userManager.UpdateAsync(user).ConfigureAwait(false);
+    }
     #region IDisposable,  IAsyncDisposable
 
     public void Dispose()

src/Domain.Core/Entities/ApplicationUser.cs

@@ -1,4 +1,4 @@
-using GaEpd.AppLibrary.Extensions;
+using GaEpd.AppLibrary.Extensions;
 using Microsoft.AspNetCore.Identity;
 using System.Text;
 
@@ -37,6 +37,8 @@ public sealed class ApplicationUser : IdentityUser, IEntity<string>
     public string SortableFullName => new[] { FamilyName, GivenName }.ConcatWithSeparator(", ");
     public string FullName => new[] { GivenName, FamilyName }.ConcatWithSeparator();
 
+    public UserPreferences Preferences { get; set; } = new();
+
     public string SortableNameWithInactive
     {
         get

src/Domain.Core/Entities/UserPreferences.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace AirWeb.Domain.Core.Entities;
+
+public class UserPreferences
+{
+    public ThemePreference Theme { get; set; } = ThemePreference.Dark;
+}
+public enum ThemePreference
+{
+    Auto = 0,
+    Light = 1,
+    Dark = 2,
+}

src/WebApp/Pages/Account/Edit.cshtml

@@ -1,4 +1,4 @@
-@page
+@page
 @using AirWeb.WebApp.Pages.Shared.EditorTemplates
 @model EditModel
 @{
@@ -24,7 +24,7 @@
                 @Html.EditorFor(m => m.UpdateStaff.OfficeId, EditorTemplate.Select, additionalViewData: new { Items = Model.OfficeSelectList })
             </div>
         </div>
-
         <partial name="Shared/_SubmitCancelButtons" />
     </form>
+
 </div>

src/WebApp/Pages/Account/Index.cshtml

@@ -1,5 +1,6 @@
 @page
 @using AirWeb.WebApp.Pages.Shared.DisplayTemplates
+@using AirWeb.Domain.Core.Entities
 @model AccountIndexModel
 @{
     ViewData["Title"] = "Account Profile";
@@ -27,6 +28,50 @@
     <dt class="col-sm-3">Office</dt>
     <dd class="col-sm-9">@Html.DisplayFor(m => m.OfficeName, DisplayTemplate.TextOrPlaceholder,
                 additionalViewData: new { Placeholder = DefaultText.PlaceholderNone })</dd>
+
+    <dt class="col-sm-3">Theme</dt>
+    <dd class="col-sm-9">
+        <form method="post" id="themeForm">
+
+            <div class="btn-group" role="group" aria-label="Theme selection">
+
+                <input class="btn-check"
+                       type="radio"
+                       name="theme"
+                       id="themeLight"
+                       value="light"
+                       checked="@(Model.Preferences.Theme == ThemePreference.Light)" />
+
+                <label class="btn btn-outline-secondary" for="themeLight">
+                    Light
+                </label>
+
+                <input class="btn-check"
+                       type="radio"
+                       name="theme"
+                       id="themeDark"
+                       value="dark"
+                       checked="@(Model.Preferences.Theme == ThemePreference.Dark)" />
+
+                <label class="btn btn-outline-secondary" for="themeDark">
+                    Dark
+                </label>
+
+                <input class="btn-check"
+                       type="radio"
+                       name="theme"
+                       id="themeAuto"
+                       value="auto"
+                       checked="@(Model.Preferences.Theme == ThemePreference.Auto)" />
+
+                <label class="btn btn-outline-secondary" for="themeAuto">
+                    Auto
+                </label>
+
+            </div>
+
+        </form>
+    </dd>
 </dl>
 
 <div class="mb-3">

src/WebApp/Pages/Account/Index.cshtml.cs

@@ -1,27 +1,36 @@
-using AirWeb.AppServices.Core.AuthorizationServices;
+using AirWeb.AppServices.Core.AuthorizationServices;
 using AirWeb.AppServices.Core.EntityServices.Staff;
 using AirWeb.AppServices.Core.EntityServices.Staff.Dto;
 using AirWeb.Domain.Core.AppRoles;
+using AirWeb.Domain.Core.Entities;
 using AirWeb.WebApp.Models;
+using DocumentFormat.OpenXml.Presentation;
 
 namespace AirWeb.WebApp.Pages.Account;
 
 [Authorize(Policy = nameof(Policies.ActiveUser))]
 public class AccountIndexModel : PageModel
 {
     public StaffViewDto DisplayStaff { get; private set; } = null!;
+    public UserPreferences Preferences { get; private set; } = null!;
     public string? OfficeName => DisplayStaff.Office?.Name;
     public IReadOnlyList<AppRole> Roles { get; private set; } = null!;
 
     public async Task<IActionResult> OnGetAsync([FromServices] IStaffService staffService)
     {
         DisplayStaff = await staffService.GetCurrentUserAsync();
         Roles = await staffService.GetAppRolesAsync(DisplayStaff.Id);
+        Preferences = await staffService.GetPreferencesAsync();
 
         if (DisplayStaff.Office is null)
             TempData.AddDisplayMessage(DisplayMessage.AlertContext.Warning,
                 message: "Your Office must be set. Select “Edit Profile” and choose an Office from the list.");
 
         return Page();
     }
+    public async Task<IActionResult> OnPostAsync(ThemePreference theme, [FromServices] IStaffService staffservice)
+    {
+        await staffservice.UpdateThemePreferenceAsync(theme);
+        return RedirectToPage();
+    }
 }

src/WebApp/Pages/Shared/Components/MainMenu/Default.cshtml

@@ -1,4 +1,4 @@
-@model MainMenuViewComponent.MenuParams
+@model MainMenuViewComponent.MenuParams
 
 <header role="banner">
     <nav id="main-nav" aria-label="Main site navigation"
@@ -130,44 +130,6 @@
                                 <a class="nav-link text-body-secondary" asp-page="/Account/Login">Agency&nbsp;Login</a>
                             </li>
                         }
-                        <!-- Dropdown selector for color mode -->
-                        <li class="nav-item dropdown">
-                            <button class="nav-link dropdown-toggle" id="bd-theme" type="button"
-                                    aria-haspopup="menu" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" title="Toggle theme">
-                                <partial name="Shared/_AppIconsPartial" model="@AppIcon.AutoDarkMode" view-data="new ViewDataDictionary(ViewData)"
-                                         view-data-CssClass="@("me-1 theme-icon-active")" />
-                                <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
-                                <li>
-                                    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
-                                        <partial name="Shared/_AppIconsPartial" model="@AppIcon.LightMode" view-data="new ViewDataDictionary(ViewData)"
-                                                 view-data-CssClass="@("me-2 opacity-50")" />
-                                        Light
-                                        <partial name="Shared/_AppIconsPartial" model="@AppIcon.CheckMark" view-data="new ViewDataDictionary(ViewData)"
-                                                 view-data-CssClass="@("ms-auto theme-checkmark d-none")" />
-                                    </button>
-                                </li>
-                                <li>
-                                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
-                                        <partial name="Shared/_AppIconsPartial" model="@AppIcon.DarkMode" view-data="new ViewDataDictionary(ViewData)"
-                                                 view-data-CssClass="@("me-2 opacity-50")" />
-                                        Dark
-                                        <partial name="Shared/_AppIconsPartial" model="@AppIcon.CheckMark" view-data="new ViewDataDictionary(ViewData)"
-                                                 view-data-CssClass="@("ms-auto theme-checkmark d-none")" />
-                                    </button>
-                                </li>
-                                <li>
-                                    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
-                                        <partial name="Shared/_AppIconsPartial" model="@AppIcon.AutoDarkMode" view-data="new ViewDataDictionary(ViewData)"
-                                                 view-data-CssClass="@("me-2 opacity-50")" />
-                                        Auto
-                                        <partial name="Shared/_AppIconsPartial" model="@AppIcon.CheckMark" view-data="new ViewDataDictionary(ViewData)"
-                                                 view-data-CssClass="@("ms-auto theme-checkmark d-none")" />
-                                    </button>
-                                </li>
-                            </ul>
-                        </li>
                     </ul>
                 </div>
             </div>

src/WebApp/Pages/Shared/_Layout.cshtml

@@ -1,8 +1,16 @@
+@inject AirWeb.AppServices.Core.EntityServices.Staff.IStaffService StaffService
 @{
     var displayMessages = TempData.GetDisplayMessages();
+    var themePreference = "auto";
+    if (User.Identity?.IsAuthenticated == true)
+    {
+        var preferences = await StaffService.GetPreferencesAsync();
+        themePreference = preferences.Theme.ToString().ToLower();
+    }
 }
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en"
+      data-theme-preference="@themePreference">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

src/WebApp/wwwroot/js/color-modes.js

@@ -1,4 +1,4 @@
-/*!
+/*!
  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
  * Copyright 2011-2025 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
@@ -7,76 +7,34 @@
 (() => {
     'use strict'
 
-    const getStoredTheme = () => localStorage.getItem('theme')
-    const setStoredTheme = theme => localStorage.setItem('theme', theme)
-
     const getPreferredTheme = () => {
-        const storedTheme = getStoredTheme()
-        if (storedTheme) {
-            return storedTheme
-        }
-
-        return globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        return document.documentElement.dataset.themePreference ?? 'auto';
     }
 
     const setTheme = theme => {
         if (theme === 'auto') {
-            document.documentElement.dataset.bsTheme = globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+            document.documentElement.dataset.bsTheme =
+                globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
         } else {
             document.documentElement.dataset.bsTheme = theme
         }
     }
 
     setTheme(getPreferredTheme())
 
-    const showActiveTheme = (theme, focus = false) => {
-        const themeSwitcher = document.querySelector('#bd-theme')
-
-        if (!themeSwitcher) {
-            return
-        }
-
-        const themeSwitcherText = document.querySelector('#bd-theme-text')
-        const activeThemeIcon = document.querySelector('.theme-icon-active use')
-        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
-
-        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-            element.classList.remove('active')
-            element.setAttribute('aria-pressed', 'false')
-            element.querySelector('.theme-checkmark').classList.add('d-none')
-        })
-
-        btnToActive.classList.add('active')
-        btnToActive.setAttribute('aria-pressed', 'true')
-        btnToActive.querySelector('.theme-checkmark').classList.remove('d-none')
-        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
-        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
-        themeSwitcher.setAttribute('title', themeSwitcherLabel)
-
-        if (focus) {
-            themeSwitcher.focus()
-        }
-    }
-
     globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        const storedTheme = getStoredTheme()
-        if (storedTheme !== 'light' && storedTheme !== 'dark') {
-            setTheme(getPreferredTheme())
+        if (getPreferredTheme() === 'auto') {
+            setTheme('auto')
         }
     })
 
     globalThis.addEventListener('DOMContentLoaded', () => {
-        showActiveTheme(getPreferredTheme())
-
-        document.querySelectorAll('[data-bs-theme-value]')
-            .forEach(toggle => {
-                toggle.addEventListener('click', () => {
-                    const theme = toggle.dataset.bsThemeValue
-                    setStoredTheme(theme)
-                    setTheme(theme)
-                    showActiveTheme(theme, true)
+        document.querySelectorAll('input[name="theme"]')
+            .forEach(radio => {
+                radio.addEventListener('change', () => {
+                    const theme = radio.value;
+                    setTheme(theme);
+                    document.querySelector('#themeForm').submit();
                 })
             })
     })