colour scheme problem fixed

src/providers/website-theme-provider.tsx

@@ -3,14 +3,19 @@
 import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from "react"
 
 const WEBSITE_THEME_KEY = "crm-website-theme"
+const COLOR_THEME_KEY = "crm-color-theme"
 
 const themeClasses: Record<string, string> = {
   spidey: "theme-spidey",
 }
 
+const colorThemes = ["default","ocean","forest","sunset","midnight","rose","amber","violet","slate","ruby"]
+
 interface WebsiteThemeContextValue {
   websiteTheme: string
   setWebsiteTheme: (theme: string) => Promise<void>
+  colorTheme: string
+  setColorTheme: (theme: string) => Promise<void>
   loading: boolean
 }
 
@@ -27,9 +32,19 @@ function applyWebsiteTheme(theme: string) {
   root.className = classes.join(" ").trim()
 }
 
-function getStoredTheme(): string | null {
+function applyColorTheme(theme: string) {
+  const root = document.documentElement
+  const classes = root.className.split(" ").filter((c) => !colorThemes.includes(c))
+  if (theme !== "default") {
+    classes.push(theme)
+  }
+  root.className = classes.join(" ").trim()
+  localStorage.setItem(COLOR_THEME_KEY, theme)
+}
+
+function getStored(key: string): string | null {
   if (typeof window === "undefined") return null
-  return localStorage.getItem(WEBSITE_THEME_KEY)
+  return localStorage.getItem(key)
 }
 
 function storeTheme(theme: string) {
@@ -39,22 +54,40 @@ function storeTheme(theme: string) {
 
 export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
   const [websiteTheme, setWebsiteThemeState] = useState<string>("default")
+  const [colorTheme, setColorThemeState] = useState<string>("default")
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     fetch("/api/settings/website-theme")
       .then((res) => (res.ok ? res.json() : null))
       .then((data) => {
-        const theme = data?.websiteTheme || "default"
-        setWebsiteThemeState(theme)
-        storeTheme(theme)
-        applyWebsiteTheme(theme)
+        const wt = data?.websiteTheme || "default"
+        setWebsiteThemeState(wt)
+        storeTheme(wt)
+        applyWebsiteTheme(wt)
+
+        if (data?.colorTheme) {
+          setColorThemeState(data.colorTheme)
+          applyColorTheme(data.colorTheme)
+        } else {
+          const stored = getStored(COLOR_THEME_KEY)
+          if (stored) {
+            setColorThemeState(stored)
+            applyColorTheme(stored)
+          }
+        }
       })
       .catch(() => {
-        const stored = getStoredTheme()
+        const stored = getStored(WEBSITE_THEME_KEY)
         const theme = stored || "default"
         setWebsiteThemeState(theme)
         applyWebsiteTheme(theme)
+
+        const storedColor = getStored(COLOR_THEME_KEY)
+        if (storedColor) {
+          setColorThemeState(storedColor)
+          applyColorTheme(storedColor)
+        }
       })
       .finally(() => setLoading(false))
   }, [])
@@ -74,8 +107,22 @@ export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
     }
   }, [])
 
+  const setColorTheme = useCallback(async (theme: string) => {
+    setColorThemeState(theme)
+    applyColorTheme(theme)
+    try {
+      await fetch("/api/settings/website-theme", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ colorTheme: theme }),
+      })
+    } catch {
+      console.warn("Failed to persist color theme")
+    }
+  }, [])
+
   return (
-    <WebsiteThemeContext.Provider value={{ websiteTheme, setWebsiteTheme, loading }}>
+    <WebsiteThemeContext.Provider value={{ websiteTheme, setWebsiteTheme, colorTheme, setColorTheme, loading }}>
       {children}
     </WebsiteThemeContext.Provider>
   )