From 070057afb3a40a12f25220e54a2a9bbeedadd950 Mon Sep 17 00:00:00 2001 From: nessi Date: Fri, 6 Feb 2026 18:41:45 +0100 Subject: [PATCH] Set and persist theme preference in localStorage 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. --- frontend/index.html | 8 +++++++- frontend/src/App.jsx | 9 +++++++++ frontend/src/main.jsx | 12 ++++++++++-- 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 380c08c..5e8af46 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -7,7 +7,13 @@ Cluedo Sheet - + +
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 84b88dd..8d4e48e 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -342,6 +342,14 @@ export default function App() { setThemeKey(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 { await api("/auth/theme", { method: "PATCH", @@ -351,6 +359,7 @@ export default function App() { // theme locally already applied; ignore backend error } }; + // ===== Stats (always fresh on open) ===== const openStatsModal = async () => { diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 19def02..9bd8180 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,9 +1,17 @@ import React from "react"; -import { createRoot } from "react-dom/client"; +import ReactDOM from "react-dom/client"; import App from "./App.jsx"; +import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes"; import { registerSW } from "virtual:pwa-register"; -createRoot(document.getElementById("root")).render(); +try { + const key = localStorage.getItem("hpTheme:guest") || DEFAULT_THEME_KEY; + applyTheme(key); +} catch { + applyTheme(DEFAULT_THEME_KEY); +} + +ReactDOM.createRoot(document.getElementById("root")).render(); registerSW({ immediate: true }); const updateSW = registerSW({ immediate: true,