chore: build

frontend-prep/src/context/ThemeContext.tsx

@@ -14,6 +14,8 @@ const ThemeContext = createContext<ThemeContextValue>({
     toggleTheme: () => {},
 });
 
+const LS_COLORS_KEY = "client_colors";
+
 function hexToRgba(hex: string, alpha: number): string {
     const h = hex.replace("#", "");
     const r = parseInt(h.substring(0, 2), 16);
@@ -22,15 +24,6 @@ function hexToRgba(hex: string, alpha: number): string {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 
-// Mélange une couleur de teinte sur un fond noir
-function tintOnBlack(tintHex: string, ratio: number): string {
-    const h = tintHex.replace("#", "");
-    const r = Math.min(255, Math.round(parseInt(h.substring(0, 2), 16) * ratio));
-    const g = Math.min(255, Math.round(parseInt(h.substring(2, 4), 16) * ratio));
-    const b = Math.min(255, Math.round(parseInt(h.substring(4, 6), 16) * ratio));
-    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-}
-
 type ColorSettings = {
     client_color_primary: string;
     client_color_secondary: string;
@@ -41,24 +34,13 @@ type ColorSettings = {
 
 function applyClientColors(s: ColorSettings) {
     const root = document.documentElement;
-    const isDark = root.getAttribute("data-theme") !== "light";
 
     if (s.client_color_primary) {
         const p = s.client_color_primary;
         root.style.setProperty("--primary", p);
         root.style.setProperty("--primary-soft", hexToRgba(p, 0.12));
         root.style.setProperty("--primary-glow", hexToRgba(p, 0.25));
-        if (isDark) {
-            // Teinter le fond avec la couleur primaire
-            root.style.setProperty("--bg",       tintOnBlack(p, 0.20));
-            root.style.setProperty("--surface",   tintOnBlack(p, 0.25));
-            root.style.setProperty("--surface-2", tintOnBlack(p, 0.32));
-        } else {
-            // En mode clair, réinitialiser pour laisser le CSS prendre le contrôle
-            root.style.removeProperty("--bg");
-            root.style.removeProperty("--surface");
-            root.style.removeProperty("--surface-2");
-        }
+        // --bg / --surface / --surface-2 intentionnellement non modifiés : le body garde sa couleur CSS
     }
     if (s.client_color_secondary) {
         root.style.setProperty("--cyan", s.client_color_secondary);
@@ -69,6 +51,20 @@ function applyClientColors(s: ColorSettings) {
     }
 }
 
+function saveColorsToStorage(s: ColorSettings) {
+    try {
+        localStorage.setItem(LS_COLORS_KEY, JSON.stringify(s));
+    } catch { /* ignore */ }
+}
+
+function loadColorsFromStorage(): ColorSettings | null {
+    try {
+        const raw = localStorage.getItem(LS_COLORS_KEY);
+        if (raw) return JSON.parse(raw) as ColorSettings;
+    } catch { /* ignore */ }
+    return null;
+}
+
 export function ThemeProvider({ children }: { children: ReactNode }) {
     const [theme, setTheme] = useState<Theme>(() => {
         const stored = localStorage.getItem("theme");
@@ -77,23 +73,26 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     });
     const lastSettings = useRef<ColorSettings | null>(null);
 
+    // Appliquer les couleurs sauvegardées immédiatement (avant l'appel API)
+    useEffect(() => {
+        const cached = loadColorsFromStorage();
+        if (cached) {
+            lastSettings.current = cached;
+            applyClientColors(cached);
+        }
+    }, []);
+
     useEffect(() => {
         document.documentElement.setAttribute("data-theme", theme);
         localStorage.setItem("theme", theme);
     }, [theme]);
 
-    // Re-appliquer les couleurs quand le thème change (le tinting bg dépend du mode)
-    useEffect(() => {
-        if (lastSettings.current) {
-            applyClientColors(lastSettings.current);
-        }
-    }, [theme]);
-
     useEffect(() => {
         const fetchColors = async () => {
             try {
                 const settings = await getPublicSettings();
                 lastSettings.current = settings;
+                saveColorsToStorage(settings);
                 applyClientColors(settings);
             } catch { /* ignore */ }
         };