nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set and persist theme preference in localStorage

Browse Source 
Implemented logic to store and retrieve theme preferences using localStorage for both logged-in users and guests. This ensures the selected theme is applied immediately on load, preventing theme flash issues. Adjusted initialization to apply the correct theme at app startup.
This commit is contained in:
Sascha Nesterovic
2026-02-06 18:41:45 +01:00
parent 6434256dfb
commit 070057afb3
3 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/index.html
View File

@@ -7,7 +7,13 @@
<title>Cluedo Sheet</title> <title>Cluedo Sheet</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
<script>
try {
const k = localStorage.getItem("hpTheme:guest") || "default";
document.documentElement.setAttribute("data-theme", k);
} catch {}
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

9
frontend/src/App.jsx
View File

@@ -342,6 +342,14 @@ export default function App() {
setThemeKey(key); setThemeKey(key);
applyTheme(key); applyTheme(key);
// ✅ sofort für nächsten Start merken (verhindert Flash)
try {
localStorage.setItem(`hpTheme:${(me?.email || "guest").toLowerCase()}`, key);
localStorage.setItem("hpTheme:guest", key); // fallback, falls noch nicht eingeloggt
} catch {
// ignore
}
try { try {
await api("/auth/theme", { await api("/auth/theme", {
method: "PATCH", method: "PATCH",
@@ -351,6 +359,7 @@ export default function App() {
// theme locally already applied; ignore backend error // theme locally already applied; ignore backend error
} }
}; };
// ===== Stats (always fresh on open) ===== // ===== Stats (always fresh on open) =====
const openStatsModal = async () => { const openStatsModal = async () => {

12
frontend/src/main.jsx
View File

@@ -1,9 +1,17 @@
import React from "react"; import React from "react";
import { createRoot } from "react-dom/client"; import ReactDOM from "react-dom/client";
import App from "./App.jsx"; import App from "./App.jsx";
import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
import { registerSW } from "virtual:pwa-register"; import { registerSW } from "virtual:pwa-register";
createRoot(document.getElementById("root")).render(<App />); try {
const key = localStorage.getItem("hpTheme:guest") || DEFAULT_THEME_KEY;
applyTheme(key);
} catch {
applyTheme(DEFAULT_THEME_KEY);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
registerSW({ immediate: true }); registerSW({ immediate: true });
const updateSW = registerSW({ const updateSW = registerSW({
immediate: true, immediate: true,