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/components/ui/TaskCard.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes, forwardRef, useState, useEffect, useRef } from 'react';
 import { cn } from '@/lib/utils';
 import { Card } from './Card';
 import { Badge } from './Badge';
+import { formatDateForDisplay } from '@/lib/date-utils';
 
 interface TaskCardProps extends HTMLAttributes<HTMLDivElement> {
   // Variants
@@ -171,18 +172,16 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
     const getSourceStyles = () => {
       if (source === 'jira') {
         return {
-          border: '2px solid rgba(0, 130, 201, 0.8)',
-          borderLeft: '6px solid #0052CC',
-          background: 'linear-gradient(135deg, rgba(0, 130, 201, 0.3) 0%, rgba(0, 130, 201, 0.2) 100%)',
-          boxShadow: '0 4px 12px rgba(0, 130, 201, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)',
+          backgroundColor: 'var(--jira-card, #dbeafe)',
+          borderLeft: '3px solid var(--jira-border, #3b82f6)',
+          color: 'var(--jira-text, #1e40af)',
         };
       }
       if (source === 'tfs') {
         return {
-          border: '2px solid rgba(255, 165, 0, 0.8)',
-          borderLeft: '6px solid #FF8C00',
-          background: 'linear-gradient(135deg, rgba(255, 165, 0, 0.3) 0%, rgba(255, 165, 0, 0.2) 100%)',
-          boxShadow: '0 4px 12px rgba(255, 165, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)',
+          backgroundColor: 'var(--tfs-card, #fed7aa)',
+          borderLeft: '3px solid var(--tfs-border, #f59e0b)',
+          color: 'var(--tfs-text, #92400e)',
         };
       }
       return {};
@@ -224,20 +223,17 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
       return (
         <Card
           ref={ref}
-          style={sourceStyles}
           className={cn(
             'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
             isDragging && 'opacity-50 rotate-3 scale-105',
             (status === 'done' || status === 'archived') && 'opacity-60',
             status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
-            source === 'jira' && 'bg-blue-50 dark:bg-blue-900/20',
-            source === 'tfs' && 'bg-orange-50 dark:bg-orange-900/20',
             isPending && 'opacity-70 pointer-events-none',
             className
           )}
           {...props}
         >
-          <div className="p-2">
+          <div className="p-2" style={sourceStyles}>
             <div className="flex items-center gap-2">
               {/* Emojis */}
               {displayEmojis.length > 0 && (
@@ -318,20 +314,17 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
     return (
       <Card
         ref={ref}
-        style={sourceStyles}
         className={cn(
           'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
           isDragging && 'opacity-50 rotate-3 scale-105',
           (status === 'done' || status === 'archived') && 'opacity-60',
           status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
-          source === 'jira' && 'bg-blue-50 dark:bg-blue-900/20',
-          source === 'tfs' && 'bg-orange-50 dark:bg-orange-900/20',
           isPending && 'opacity-70 pointer-events-none',
           className
         )}
         {...props}
       >
-        <div className={`px-3 pt-3 ${(dueDate || (source && source !== 'manual') || completedAt) ? 'pb-3' : 'pb-0'}`}>
+        <div className={`px-3 pt-3 ${(dueDate || (source && source !== 'manual') || completedAt) ? 'pb-3' : 'pb-0'}`} style={sourceStyles}>
           {/* Header */}
           <div className="flex items-start gap-2 mb-2">
             {/* Emojis */}
@@ -452,7 +445,7 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
                 {dueDate ? (
                   <span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono">
                     <span className="text-[var(--primary)]">⏰</span>
-                    {dueDate.toLocaleDateString()}
+                    {formatDateForDisplay(dueDate, 'DISPLAY_MEDIUM')}
                   </span>
                 ) : (
                   <div></div>