maddo/WorkTracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source 
- 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.
This commit is contained in:
MaddoScientisto 2026-04-20 22:58:25 +02:00
commit 158906fa28
19 changed files with 889 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

23
Components/App.razor
View file

@ -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>