feat: refactor theme management and enhance color customization

- Cleaned up theme architecture by consolidating CSS variables and removing redundant theme applications, ensuring a single source of truth for theming.
- Implemented a dark mode override and improved color management using CSS variables for better customization.
- Updated various components to utilize new color variables, enhancing maintainability and visual consistency across the application.
- Added detailed tasks in TODO.md for future enhancements related to user preferences and color customization features.

src/contexts/UserPreferencesContext.tsx

@@ -8,11 +8,10 @@ import {
   updateColumnVisibility as updateColumnVisibilityAction,
   toggleObjectivesVisibility as toggleObjectivesVisibilityAction,
   toggleObjectivesCollapse as toggleObjectivesCollapseAction,
-  toggleTheme as toggleThemeAction,
-  setTheme as setThemeAction,
   toggleFontSize as toggleFontSizeAction,
   toggleColumnVisibility as toggleColumnVisibilityAction
 } from '@/actions/preferences';
+import { useTheme } from './ThemeContext';
 
 interface UserPreferencesContextType {
   preferences: UserPreferences;
@@ -77,14 +76,17 @@ const defaultPreferences: UserPreferences = {
 export function UserPreferencesProvider({ children, initialPreferences }: UserPreferencesProviderProps) {
   const [preferences, setPreferences] = useState<UserPreferences>(initialPreferences || defaultPreferences);
   const [isPending, startTransition] = useTransition();
+  const { theme, toggleTheme: themeToggleTheme, setTheme: themeSetTheme } = useTheme();
 
-  // Synchroniser le thème avec le ThemeProvider global (si disponible)
+  // Synchroniser les préférences avec le thème actuel du ThemeContext
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      // Appliquer le thème au document
-      document.documentElement.className = preferences.viewPreferences.theme;
+    if (preferences.viewPreferences.theme !== theme) {
+      setPreferences(prev => ({
+        ...prev,
+        viewPreferences: { ...prev.viewPreferences, theme }
+      }));
     }
-  }, [preferences.viewPreferences.theme]);
+  }, [theme, preferences.viewPreferences.theme]);
 
   // === KANBAN FILTERS ===
   
@@ -149,16 +151,12 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
   }, []);
 
   const toggleTheme = useCallback(() => {
-    startTransition(async () => {
-      await toggleThemeAction();
-    });
-  }, []);
+    themeToggleTheme();
+  }, [themeToggleTheme]);
 
   const setTheme = useCallback((theme: 'light' | 'dark') => {
-    startTransition(async () => {
-      await setThemeAction(theme);
-    });
-  }, []);
+    themeSetTheme(theme);
+  }, [themeSetTheme]);
 
   const toggleFontSize = useCallback(() => {
     startTransition(async () => {