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.

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}");

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;

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}";
     }
 }