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/components/settings/TfsConfigForm.tsx

@@ -339,16 +339,16 @@ export function TfsConfigForm() {
 
       {/* Actions de gestion des données TFS */}
       {isTfsConfigured && (
-        <div className="p-4 bg-[var(--card)] rounded border border-orange-200 dark:border-orange-800">
+        <div className="p-4 bg-[var(--card)] rounded border" style={{ borderColor: 'color-mix(in srgb, var(--accent) 30%, var(--border))', backgroundColor: 'color-mix(in srgb, var(--accent) 5%, var(--card))', color: 'var(--accent)' }}>
           <div className="flex items-center justify-between">
             <div>
-              <h3 className="font-medium text-orange-800 dark:text-orange-200">
+              <h3 className="font-medium" style={{ color: 'var(--accent)' }}>
                 ⚠️ Gestion des données
               </h3>
-              <p className="text-sm text-orange-600 dark:text-orange-300">
+              <p className="text-sm" style={{ color: 'var(--accent)' }}>
                 Supprimez toutes les tâches TFS synchronisées de la base locale
               </p>
-              <p className="text-xs text-orange-500 dark:text-orange-400 mt-1">
+              <p className="text-xs mt-1" style={{ color: 'var(--accent)' }}>
                 <strong>Attention:</strong> Cette action est irréversible et
                 supprimera définitivement toutes les tâches importées depuis
                 Azure DevOps.
@@ -624,11 +624,12 @@ export function TfsConfigForm() {
 
       {message && (
         <div
-          className={`p-4 rounded border ${
-            message.type === 'success'
-              ? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
-              : 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
-          }`}
+          className="p-4 rounded border"
+          style={{
+            color: message.type === 'success' ? 'var(--success)' : 'var(--destructive)',
+            backgroundColor: message.type === 'success' ? 'color-mix(in srgb, var(--success) 10%, transparent)' : 'color-mix(in srgb, var(--destructive) 10%, transparent)',
+            borderColor: message.type === 'success' ? 'color-mix(in srgb, var(--success) 20%, var(--border))' : 'color-mix(in srgb, var(--destructive) 20%, var(--border))'
+          }}
         >
           {message.text}
         </div>