changes

components/DynamicThemeProvider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { createTheme, MantineProvider } from '@mantine/core';
 
 interface ThemeContextType {
@@ -18,6 +18,24 @@ export const useThemeContext = () => useContext(ThemeContext);
 export function DynamicThemeProvider({ children }: { children: React.ReactNode }) {
   const [primaryColor, setPrimaryColor] = useState('blue');
 
+  // Load user's accent color preference on mount
+  useEffect(() => {
+    const fetchUserAccentColor = async () => {
+      try {
+        const res = await fetch('/api/auth/me');
+        const data = await res.json();
+        if (data.user?.accentColor) {
+          setPrimaryColor(data.user.accentColor);
+        }
+      } catch (error) {
+        // Silently fail - use default color
+        console.error('Failed to fetch user accent color:', error);
+      }
+    };
+
+    fetchUserAccentColor();
+  }, []);
+
   const theme = createTheme({
     primaryColor,
   });

components/Settings/SettingsModal.tsx

@@ -52,6 +52,7 @@ const POPULAR_MODELS = [
 interface User {
   id: string;
   username: string;
+  accentColor?: string;
 }
 
 interface SettingsModalProps {
@@ -206,6 +207,24 @@ export function SettingsModal({
     setUser(null);
   };
 
+  const handleAccentColorChange = async (color: string) => {
+    // Update local state immediately for responsiveness
+    setPrimaryColor(color);
+
+    // If user is logged in, persist to database
+    if (user) {
+      try {
+        await fetch('/api/user/settings', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ accentColor: color }),
+        });
+      } catch (e) {
+        console.error('Failed to save accent color:', e);
+      }
+    }
+  };
+
   const colors = Object.keys(theme.colors).filter(
     (color) => color !== 'dark' && color !== 'gray' && color !== 'white' && color !== 'black'
   );
@@ -290,7 +309,7 @@ export function SettingsModal({
                       key={color}
                       component="button"
                       color={theme.colors[color][6]}
-                      onClick={() => setPrimaryColor(color)}
+                      onClick={() => handleAccentColorChange(color)}
                       style={{ color: '#fff', cursor: 'pointer' }}
                       withShadow
                     >