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/app/globals.css

@@ -1,25 +1,7 @@
 @import "tailwindcss";
 
 :root {
-  /* Dark theme (default) */
-  --background: #1e293b; /* slate-800 - encore plus clair */
-  --foreground: #f1f5f9; /* slate-100 */
-  --card: #334155; /* slate-700 - beaucoup plus clair pour contraste fort */
-  --card-hover: #475569; /* slate-600 */
-  --card-column: #0f172a; /* slate-900 - plus foncé que les cartes */
-  --border: #64748b; /* slate-500 - encore plus clair */
-  --input: #334155; /* slate-700 - plus clair */
-  --primary: #06b6d4; /* cyan-500 */
-  --primary-foreground: #f1f5f9; /* slate-100 */
-  --muted: #64748b; /* slate-500 */
-  --muted-foreground: #94a3b8; /* slate-400 */
-  --accent: #f59e0b; /* amber-500 */
-  --destructive: #ef4444; /* red-500 */
-  --success: #10b981; /* emerald-500 */
-}
-
-.light {
-  /* Light theme */
+  /* Valeurs par défaut (Light theme) */
   --background: #f1f5f9; /* slate-100 */
   --foreground: #0f172a; /* slate-900 */
   --card: #ffffff; /* white */
@@ -34,6 +16,36 @@
   --accent: #d97706; /* amber-600 */
   --destructive: #dc2626; /* red-600 */
   --success: #059669; /* emerald-600 */
+  --purple: #8b5cf6; /* purple-500 */
+  --yellow: #eab308; /* yellow-500 */
+  --green: #059669; /* emerald-600 */
+  --blue: #2563eb; /* blue-600 */
+  --gray: #6b7280; /* gray-500 */
+  --gray-light: #e5e7eb; /* gray-200 */
+}
+
+.dark {
+  /* Dark theme override */
+  --background: #1e293b; /* slate-800 - encore plus clair */
+  --foreground: #f1f5f9; /* slate-100 */
+  --card: #334155; /* slate-700 - beaucoup plus clair pour contraste fort */
+  --card-hover: #475569; /* slate-600 */
+  --card-column: #0f172a; /* slate-900 - plus foncé que les cartes */
+  --border: #64748b; /* slate-500 - encore plus clair */
+  --input: #334155; /* slate-700 - plus clair */
+  --primary: #06b6d4; /* cyan-500 */
+  --primary-foreground: #f1f5f9; /* slate-100 */
+  --muted: #64748b; /* slate-500 */
+  --muted-foreground: #94a3b8; /* slate-400 */
+  --accent: #f59e0b; /* amber-500 */
+  --destructive: #ef4444; /* red-500 */
+  --success: #10b981; /* emerald-500 */
+  --purple: #8b5cf6; /* purple-500 */
+  --yellow: #eab308; /* yellow-500 */
+  --green: #10b981; /* emerald-500 */
+  --blue: #3b82f6; /* blue-500 */
+  --gray: #9ca3af; /* gray-400 */
+  --gray-light: #374151; /* gray-700 */
 }
 
 @theme inline {
@@ -100,16 +112,16 @@ body {
 
 .outline-card-purple {
   @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
-  color: #8b5cf6; /* purple-500 */
-  background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
-  border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
+  color: var(--purple);
+  background-color: color-mix(in srgb, var(--purple) 8%, transparent);
+  border-color: color-mix(in srgb, var(--purple) 25%, var(--border));
 }
 
 .outline-card-yellow {
   @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
-  color: #eab308; /* yellow-500 */
-  background-color: color-mix(in srgb, #eab308 8%, transparent);
-  border-color: color-mix(in srgb, #eab308 25%, var(--border));
+  color: var(--yellow);
+  background-color: color-mix(in srgb, var(--yellow) 8%, transparent);
+  border-color: color-mix(in srgb, var(--yellow) 25%, var(--border));
 }
 
 .outline-card-gray {
@@ -143,9 +155,9 @@ body {
 
 .outline-metric-purple {
   @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
-  color: #8b5cf6; /* purple-500 */
-  background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
-  border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
+  color: var(--purple);
+  background-color: color-mix(in srgb, var(--purple) 8%, transparent);
+  border-color: color-mix(in srgb, var(--purple) 25%, var(--border));
 }
 
 .outline-metric-gray {
@@ -157,8 +169,8 @@ body {
 
 /* Animations tech */
 @keyframes glow {
-  0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.3); }
-  50% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.6); }
+  0%, 100% { box-shadow: 0 0 5px var(--primary); }
+  50% { box-shadow: 0 0 20px var(--primary); }
 }
 
 .animate-glow {

src/app/jira-dashboard/JiraDashboardPageClient.tsx

@@ -262,7 +262,7 @@ export function JiraDashboardPageClient({ initialJiraConfig, initialAnalytics }:
           {error && (
             <Card className="mb-6 border-red-500/20 bg-red-500/10">
               <CardContent className="p-4">
-                <div className="flex items-center gap-2 text-red-600 dark:text-red-400">
+                <div className="flex items-center gap-2" style={{ color: 'var(--destructive)' }}>
                   <span>❌</span>
                   <span>{error}</span>
                 </div>
@@ -273,7 +273,7 @@ export function JiraDashboardPageClient({ initialJiraConfig, initialAnalytics }:
           {exportError && (
             <Card className="mb-6 border-orange-500/20 bg-orange-500/10">
               <CardContent className="p-4">
-                <div className="flex items-center gap-2 text-orange-600 dark:text-orange-400">
+                <div className="flex items-center gap-2" style={{ color: 'var(--accent)' }}>
                   <span>⚠️</span>
                   <span>Erreur d&apos;export: {exportError}</span>
                 </div>

src/app/layout.tsx

@@ -30,7 +30,7 @@ export default async function RootLayout({
   const initialPreferences = await userPreferencesService.getAllPreferences();
   
   return (
-    <html lang="en" className={initialPreferences.viewPreferences.theme}>
+    <html lang="fr">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >