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/lib/theme-config.ts

@@ -0,0 +1,76 @@
+// Types de thèmes
+export type Theme = 'light' | 'dark' | 'dracula' | 'monokai' | 'nord' | 'gruvbox' | 'tokyo_night' | 'catppuccin' | 'rose_pine' | 'one_dark' | 'material' | 'solarized';
+
+// Configuration des thèmes
+export const THEME_CONFIG = {
+  // Thème par défaut
+  default: 'dark' as Theme,
+  
+  // Thème light
+  light: 'light' as Theme,
+  
+  // Liste de tous les thèmes dark disponibles
+  darkThemes: [
+    'dark',
+    'dracula', 
+    'monokai',
+    'nord',
+    'gruvbox',
+    'tokyo_night',
+    'catppuccin',
+    'rose_pine',
+    'one_dark',
+    'material',
+    'solarized'
+  ] as Theme[],
+  
+  // Tous les thèmes disponibles
+  allThemes: [
+    'light',
+    'dark',
+    'dracula', 
+    'monokai',
+    'nord',
+    'gruvbox',
+    'tokyo_night',
+    'catppuccin',
+    'rose_pine',
+    'one_dark',
+    'material',
+    'solarized'
+  ] as Theme[],
+  
+  // Métadonnées des thèmes (pour l'UI future)
+  metadata: {
+    light: { name: 'Light', description: 'Thème clair par défaut', icon: '☀️' },
+    dark: { name: 'Dark', description: 'Thème sombre classique', icon: '🌙' },
+    dracula: { name: 'Dracula', description: 'Inspiré du thème Dracula', icon: '🧛' },
+    monokai: { name: 'Monokai', description: 'Inspiré du thème Monokai', icon: '🎨' },
+    nord: { name: 'Nord', description: 'Palette Nord arctique', icon: '❄️' },
+    gruvbox: { name: 'Gruvbox', description: 'Palette Gruvbox retro', icon: '🎭' },
+    tokyo_night: { name: 'Tokyo Night', description: 'Nuit tokyoïte', icon: '🌃' },
+    catppuccin: { name: 'Catppuccin', description: 'Palette pastel douce', icon: '🐱' },
+    rose_pine: { name: 'Rose Pine', description: 'Palette rose et pin', icon: '🌹' },
+    one_dark: { name: 'One Dark', description: 'Inspiré d\'Atom One Dark', icon: '🌑' },
+    material: { name: 'Material', description: 'Inspiré de Material Design', icon: '📱' },
+    solarized: { name: 'Solarized', description: 'Palette Solarized', icon: '☀️' }
+  }
+} as const;
+
+// Fonctions utilitaires
+export const getNextDarkTheme = (currentTheme: Theme): Theme => {
+  const currentIndex = THEME_CONFIG.darkThemes.indexOf(currentTheme);
+  if (currentIndex === -1) {
+    return THEME_CONFIG.darkThemes[0];
+  }
+  const nextIndex = (currentIndex + 1) % THEME_CONFIG.darkThemes.length;
+  return THEME_CONFIG.darkThemes[nextIndex];
+};
+
+export const isDarkTheme = (theme: Theme): boolean => {
+  return THEME_CONFIG.darkThemes.includes(theme);
+};
+
+export const getThemeMetadata = (theme: Theme) => {
+  return THEME_CONFIG.metadata[theme] || { name: theme, description: 'Thème personnalisé', icon: '🎨' };
+};