Bootstrap persisted theme before hydration

This commit is contained in:
2026-03-21 13:40:19 +01:00
parent b63fbae957
commit fa805f3d75
3 changed files with 22 additions and 1 deletions

View File

@@ -12,6 +12,8 @@
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["RolemasterDb.App.styles.css"]" />
<script src="@Assets["theme.js"]"></script>
<script>window.rolemasterTheme?.init("rolemaster.theme.mode");</script>
<ImportMap />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
@@ -20,7 +22,6 @@
<body>
<Routes @rendermode="InteractiveServer" />
<ReconnectModal />
<script src="@Assets["theme.js"]"></script>
<script src="@Assets["tables.js"]"></script>
<script src="@Assets["_framework/blazor.web.js"]"></script>
</body>

View File

@@ -1,5 +1,23 @@
window.rolemasterTheme = {
storageKey: "rolemaster.theme.mode",
apply(mode) {
document.documentElement.dataset.theme = mode || "system";
},
init(storageKey) {
if (storageKey) {
this.storageKey = storageKey;
}
let mode = "system";
try {
mode = localStorage.getItem(this.storageKey) || "system";
} catch {
mode = "system";
}
this.apply(mode);
}
};