colour scheme problem fixed

src/components/settings/theme-settings.tsx

@@ -9,8 +9,6 @@ import { cn } from "@/lib/utils"
 import { Sun, Moon, Monitor, Palette, Shield } from "lucide-react"
 import { useWebsiteTheme } from "@/providers/website-theme-provider"
 
-const COLOR_THEME_KEY = "crm-color-theme"
-
 const modeOptions = [
   { value: "light", icon: Sun, label: "Light" },
   { value: "dark", icon: Moon, label: "Dark" },
@@ -35,38 +33,15 @@ const backgroundOptions = [
   { value: "spidey", label: "Spidey", icon: Shield, color: "bg-red-600", ring: "ring-red-600", desc: "Dark theme with red accents" },
 ]
 
-function getStoredColorTheme(): string {
-  if (typeof window === "undefined") return "default"
-  return localStorage.getItem(COLOR_THEME_KEY) || "default"
-}
-
-function applyColorTheme(theme: string) {
-  const colorThemes = ["default","ocean","forest","sunset","midnight","rose","amber","violet","slate","ruby"]
-  const classes = document.documentElement.className.split(" ").filter(c => !colorThemes.includes(c))
-  if (theme !== "default") {
-    classes.push(theme)
-  }
-  document.documentElement.className = classes.join(" ").trim()
-  localStorage.setItem(COLOR_THEME_KEY, theme)
-}
-
 export function ThemeSettings() {
   const { theme, setTheme } = useTheme()
-  const { websiteTheme, setWebsiteTheme } = useWebsiteTheme()
-  const [colorTheme, setColorTheme] = useState("default")
+  const { websiteTheme, setWebsiteTheme, colorTheme, setColorTheme } = useWebsiteTheme()
   const [mounted, setMounted] = useState(false)
 
   useEffect(() => {
     setMounted(true)
-    setColorTheme(getStoredColorTheme())
-    applyColorTheme(getStoredColorTheme())
   }, [])
 
-  function handleColorChange(value: string) {
-    setColorTheme(value)
-    applyColorTheme(value)
-  }
-
   if (!mounted) return null
 
   return (
@@ -107,7 +82,7 @@ export function ThemeSettings() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <RadioGroup value={colorTheme} onValueChange={handleColorChange} className="grid grid-cols-5 gap-4">
+          <RadioGroup value={colorTheme} onValueChange={setColorTheme} className="grid grid-cols-5 gap-4">
             {themeOptions.map(({ value, label, color, ring }) => (
               <div key={value}>
                 <RadioGroupItem value={value} id={`color-${value}`} className="peer sr-only" />