MaddoScientisto
158906fa28
- 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.
67 lines
1.7 KiB
Text
67 lines
1.7 KiB
Text
@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" OnToggleSidebar="ToggleSidebar" />
|
|
</div>
|
|
|
|
<main>
|
|
<div class="top-row px-4">
|
|
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
|
</div>
|
|
|
|
<article class="content px-4">
|
|
@Body
|
|
</article>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="blazor-error-ui" data-nosnippet>
|
|
An unhandled error has occurred.
|
|
<a href="." class="reload">Reload</a>
|
|
<span class="dismiss">🗙</span>
|
|
</div>
|
|
|
|
@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;
|
|
}
|
|
}
|