refactor: update theme management and enhance UI components

- Refactored theme imports in `preferences.ts` and `ThemeSelector.tsx` to use centralized `theme-config`.
- Added new CSS variables for special cards in `globals.css` to improve theme consistency.
- Enhanced `Header` and `TaskCard` components with theme dropdown functionality for better user experience.
- Updated `ThemeProvider` to support cycling through dark themes, improving theme selection flexibility.
- Cleaned up unused imports and streamlined component structures for better maintainability.

src/contexts/ThemeContext.tsx

@@ -2,12 +2,14 @@
 
 import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 import { updateViewPreferences } from '@/actions/preferences';
-import { Theme } from '@/lib/types';
+import { Theme } from '@/lib/theme-config';
+import { THEME_CONFIG, getNextDarkTheme } from '@/lib/theme-config';
 
 interface ThemeContextType {
   theme: Theme;
   toggleTheme: () => void;
   setTheme: (theme: Theme) => void;
+  cycleDarkThemes: () => void;
   userPreferredTheme: Theme;
 }
 
@@ -33,7 +35,7 @@ export function ThemeProvider({ children, initialTheme = 'dark', userPreferredTh
   useEffect(() => {
     if (mounted) {
       // Remove all existing theme classes
-      document.documentElement.classList.remove('light', 'dark', 'dracula', 'monokai', 'nord', 'gruvbox', 'tokyo_night', 'catppuccin', 'rose_pine', 'one_dark', 'material', 'solarized');
+      document.documentElement.classList.remove(...THEME_CONFIG.allThemes);
       // Add the current theme class
       document.documentElement.classList.add(theme);
     }
@@ -78,8 +80,20 @@ export function ThemeProvider({ children, initialTheme = 'dark', userPreferredTh
     }
   };
 
+  const cycleDarkThemes = async () => {
+    // Si on est sur light, on passe au premier thème dark
+    if (theme === 'light') {
+      await setTheme(THEME_CONFIG.darkThemes[0]);
+      return;
+    }
+    
+    // Sinon, on passe au thème dark suivant
+    const nextTheme = getNextDarkTheme(theme);
+    await setTheme(nextTheme);
+  };
+
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, userPreferredTheme }}>
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, cycleDarkThemes, userPreferredTheme }}>
       <div className={mounted ? theme : initialTheme}>
         {children}
       </div>