feat: add theme mode support with AppThemeMode enum and AppThemeState service

- Introduced AppThemeMode enum to define theme options: System, Light, Dark. - Updated AppSettingsDocument to include ThemeMode property. - Created AppThemeState service to manage current theme mode and handle changes. - Integrated theme mode handling in CouchbaseLiteAppSettingsService for persistence. - Added JavaScript for theme management in the frontend, supporting system preference detection. - Enhanced CSS with theme variables for consistent styling across light and dark modes. - Updated Playwright tests to ensure sidebar functionality and responsiveness.
2026-04-20 22:58:25 +02:00 · 2026-04-20 22:58:25 +02:00 · 158906fa28
commit 158906fa28
parent b45eac8055
19 changed files with 889 additions and 82 deletions
--- a/Components/App.razor
+++ b/Components/App.razor
@ -5,6 +5,28 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
+    <script>
+        (function () {
+            try {
+                var storageKey = "worktracker.themeMode";
+                var mode = localStorage.getItem(storageKey) || "system";
+                if (mode !== "light" && mode !== "dark" && mode !== "system") {
+                    mode = "system";
+                }
+
+                var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+                var effectiveMode = mode === "system"
+                    ? (prefersDark ? "dark" : "light")
+                    : mode;
+
+                document.documentElement.setAttribute("data-bs-theme", effectiveMode);
+                document.documentElement.setAttribute("data-theme-mode", mode);
+                document.documentElement.style.colorScheme = effectiveMode;
+            }
+            catch {
+            }
+        })();
+    </script>
    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["WorkTracker.styles.css"]" />
@ -15,6 +37,7 @@

 <body>
    <Routes @rendermode="InteractiveServer" />
+    <script src="@Assets["theme.js"]"></script>
    <script src="_framework/blazor.web.js"></script>
 </body>

--- a/Components/Layout/MainLayout.razor
+++ b/Components/Layout/MainLayout.razor
@ -1,24 +1,16 @@
@inherits LayoutComponentBase
+@implements IDisposable
+
+@inject AppThemeState ThemeState
+@inject IJSRuntime JS

 <div class="page @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
    <div class="sidebar @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
-        <NavMenu IsCollapsed="sidebarCollapsed" />
+        <NavMenu IsCollapsed="sidebarCollapsed" OnToggleSidebar="ToggleSidebar" />
    </div>

    <main>
        <div class="top-row px-4">
-            <button
-                type="button"
-                class="sidebar-toggle"
-                @onclick="ToggleSidebar"
-                aria-label="Toggle sidebar"
-                aria-controls="sidebar-navigation"
-                aria-expanded="@(sidebarCollapsed ? "false" : "true")"
-                title="Toggle sidebar">
-                <span class="sidebar-toggle-bar"></span>
-                <span class="sidebar-toggle-bar"></span>
-                <span class="sidebar-toggle-bar"></span>
-            </button>
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

@ -37,8 +29,39 @@
@code {
    private bool sidebarCollapsed = true;

+    protected override void OnInitialized()
+    {
+        ThemeState.ThemeModeChanged += HandleThemeModeChanged;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        var themeMode = await ThemeState.EnsureLoadedAsync();
+        await ApplyThemeAsync(themeMode);
+    }
+
    private void ToggleSidebar()
    {
        sidebarCollapsed = !sidebarCollapsed;
    }
+
+    private void HandleThemeModeChanged(AppThemeMode themeMode)
+    {
+        _ = InvokeAsync(() => ApplyThemeAsync(themeMode).AsTask());
+    }
+
+    private ValueTask ApplyThemeAsync(AppThemeMode themeMode)
+    {
+        return JS.InvokeVoidAsync("workTrackerTheme.setTheme", themeMode.ToString().ToLowerInvariant());
+    }
+
+    public void Dispose()
+    {
+        ThemeState.ThemeModeChanged -= HandleThemeModeChanged;
+    }
 }
--- a/Components/Layout/MainLayout.razor.css
+++ b/Components/Layout/MainLayout.razor.css
@ -14,8 +14,8 @@ main {
 }

 .top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
+    background-color: var(--wt-header-bg);
+    border-bottom: 1px solid var(--wt-header-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
@ -23,6 +23,7 @@ main {
 }

    .top-row ::deep a, .top-row ::deep .btn-link {
+        color: var(--wt-header-link);
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
@ -37,30 +38,9 @@ main {
        text-overflow: ellipsis;
    }

-.sidebar-toggle {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 0.2rem;
-    width: 2.5rem;
-    height: 2.5rem;
-    margin-right: auto;
-    border: 1px solid #d6d5d5;
-    border-radius: 0.65rem;
-    background: #fff;
-}
-
-.sidebar-toggle-bar {
-    width: 1rem;
-    height: 2px;
-    background: #334155;
-    border-radius: 999px;
-}
-
@media (max-width: 640.98px) {
    .top-row {
-        justify-content: space-between;
+        justify-content: flex-end;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
@ -100,10 +80,6 @@ main {
        padding-right: 1.5rem !important;
    }

-    .sidebar-toggle {
-        display: inline-flex;
-    }
-
    .sidebar.sidebar-collapsed {
        width: 5rem;
    }
--- a/Components/Layout/NavMenu.razor
+++ b/Components/Layout/NavMenu.razor
@ -4,15 +4,29 @@

@code {
    [Parameter] public bool IsCollapsed { get; set; }
+    [Parameter] public EventCallback OnToggleSidebar { get; set; }
+
+    private Task ToggleSidebarAsync()
+    {
+        return OnToggleSidebar.InvokeAsync();
+    }
 }

 <div class="nav-menu-shell @(IsCollapsed ? "nav-menu-shell-collapsed" : string.Empty)" data-testid="sidebar-shell" data-collapsed="@(IsCollapsed ? "true" : "false")">
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="" aria-label="WorkTracker home">
-            <span class="sidebar-brand-full">WorkTracker</span>
-            <span class="sidebar-brand-compact" aria-hidden="true">WT</span>
-        </a>
+<div class="top-row ps-3 pe-3 navbar navbar-dark">
+    <div class="container-fluid nav-menu-header">
+        <button
+            type="button"
+            class="sidebar-toggle"
+            @onclick="ToggleSidebarAsync"
+            aria-label="Toggle sidebar"
+            aria-controls="sidebar-navigation"
+            aria-expanded="@(IsCollapsed ? "false" : "true")"
+            title="Toggle sidebar">
+            <span class="sidebar-toggle-bar"></span>
+            <span class="sidebar-toggle-bar"></span>
+            <span class="sidebar-toggle-bar"></span>
+        </button>
    </div>
 </div>

--- a/Components/Layout/NavMenu.razor.css
+++ b/Components/Layout/NavMenu.razor.css
@ -1,10 +1,19 @@
 .top-row {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
+    padding-left: 0.75rem !important;
+    padding-right: 0.75rem !important;
+}
+
+.nav-menu-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }

 .navbar-brand {
    font-size: 1.1rem;
+    margin-bottom: 0;
 }

 .sidebar-brand-compact {
@ -15,6 +24,32 @@
    height: 100%;
 }

+.sidebar-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.2rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 0.65rem;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    flex: 0 0 auto;
+}
+
+.sidebar-toggle:hover {
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.sidebar-toggle-bar {
+    width: 1rem;
+    height: 2px;
+    background: currentColor;
+    border-radius: 999px;
+}
+
 .bi {
    display: inline-block;
    position: relative;
@ -122,19 +157,22 @@
        display: none;
    }

+    .nav-menu-shell-collapsed .nav-scrollable {
+        display: none;
+    }
+
+    .nav-menu-shell:not(.nav-menu-shell-collapsed) .nav-scrollable {
+        display: block;
+    }
+
    .nav-scrollable {
        height: auto;
    }
 }

@media (min-width: 641px) {
-    .nav-menu-shell-collapsed .top-row {
-        padding-left: 0.5rem !important;
-        padding-right: 0.5rem !important;
-    }
-
    .nav-menu-shell-collapsed .container-fluid {
-        justify-content: center;
+        justify-content: flex-start;
    }

    .nav-menu-shell-collapsed .sidebar-brand-full,
--- a/Components/Pages/CalendarView.razor
+++ b/Components/Pages/CalendarView.razor
@ -10,6 +10,7 @@

 <PageTitle>Calendar</PageTitle>

+<div class="calendar-page">
 <h1>Calendar</h1>

 <div class="d-flex align-items-center gap-2 mb-3">
@ -51,11 +52,11 @@ else
                        {
                            @if (cell is null)
                            {
-                                <td class="calendar-cell bg-light"></td>
+                                <td class="calendar-cell calendar-cell-empty"></td>
                            }
                            else
                            {
-                                <td class="calendar-cell @GetCellClass(cell) @(IsActiveCell(cell.Date) ? "calendar-cell-active" : string.Empty)" @onclick="() => TogglePopup(cell.Date)" role="button">
+                                <td class="calendar-cell @GetCellClass(cell) @(IsToday(cell.Date) ? "calendar-cell-today" : string.Empty) @(IsActiveCell(cell.Date) ? "calendar-cell-active" : string.Empty)" @onclick="() => TogglePopup(cell.Date)" role="button">
                                    <div class="calendar-day-number">@cell.Date.Day</div>

                                    @foreach (var workUnit in cell.Entry?.WorkUnits ?? [])
@ -193,6 +194,7 @@ else
        </div>
    }
 }
+</div>

@code {
    [Parameter] public string? YearMonth { get; set; }
@ -306,6 +308,8 @@ else

    private bool IsActiveCell(DateOnly date) => activeDate == date;

+    private static bool IsToday(DateOnly date) => date == DateOnly.FromDateTime(DateTime.Today);
+
    private void CreateWorkUnit(DateOnly date)
    {
        Navigation.NavigateTo($"/work-unit/{date:yyyy-MM-dd}");
--- a/Components/Pages/GridView.razor
+++ b/Components/Pages/GridView.razor
@ -24,7 +24,7 @@
 else
 {
    <div class="table-responsive">
-        <table class="table table-sm table-bordered align-middle">
+        <table class="table table-sm table-bordered align-middle grid-view-table">
            <thead class="table-dark">
                <tr>
                    <th>Date</th>
@ -150,31 +150,31 @@ else

    private string GetRowClass(CalendarDayRow row)
    {
-        if (row.IsWeekend || row.IsFestivity) return "table-danger";
-        if (row.Entry is null) return "";
+        if (row.IsWeekend || row.IsFestivity) return "grid-row-weekend";
+        if (row.Entry is null) return string.Empty;
        if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Holiday))
        {
-            return "table-success";
+            return "grid-row-holiday";
        }

        if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Closure))
        {
-            return "table-warning";
+            return "grid-row-closure";
        }

        if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Illness))
        {
-            return "table-info";
+            return "grid-row-illness";
        }

        if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.DayOff))
        {
-            return "table-secondary";
+            return "grid-row-dayoff";
        }

        if (row.Entry.WorkUnits.Any(entry => entry.Location == WorkUnitLocation.Home))
        {
-            return "table-light";
+            return "grid-row-home";
        }

        return string.Empty;
--- a/Components/Pages/Settings.razor
+++ b/Components/Pages/Settings.razor
@ -2,6 +2,7 @@
@attribute [Authorize]

@inject IAppSettingsService AppSettingsService
+@inject AppThemeState ThemeState

 <PageTitle>Settings</PageTitle>

@ -18,6 +19,14 @@ else
        <DataAnnotationsValidator />

        <div class="row g-3">
+            <div class="col-12 col-md-6">
+                <label class="form-label">Theme</label>
+                <InputSelect class="form-select" @bind-Value="settings.ThemeMode">
+                    <option value="@AppThemeMode.System">Follow system</option>
+                    <option value="@AppThemeMode.Light">Light</option>
+                    <option value="@AppThemeMode.Dark">Dark</option>
+                </InputSelect>
+            </div>
            <div class="col-12 col-md-6">
                <label class="form-label">Standard work hours/day</label>
                <InputNumber class="form-control" @bind-Value="settings.StandardWorkHoursPerDay" />
@ -75,6 +84,7 @@ else
        }

        settings = await AppSettingsService.SaveAsync(settings);
+        ThemeState.SetThemeMode(settings.ThemeMode);
        statusMessage = $"Saved at {DateTime.Now:t}";
    }
 }