refactor: replace isDark conditional logic with Tailwind dark: prefix across codebase

[lyzno1]

Problem

The codebase currently uses runtime isDark conditional logic throughout components for dark mode theming, which creates several issues:

1. Performance overhead: Every component using useTheme() hook adds runtime checks
2. Bundle size impact: Dynamic class generation prevents Tailwind's tree-shaking optimization
3. Maintenance complexity: Conditional logic makes components harder to read and debug
4. Framework compliance: Not following Tailwind CSS official best practices for dark mode

Current Pattern (Problematic)

const { isDark } = useTheme();
className={isDark ? 'bg-stone-800 text-stone-100' : 'bg-white text-stone-900'}

Desired Pattern (Best Practice)

className="bg-white text-stone-900 dark:bg-stone-800 dark:text-stone-100"

Root Cause

The issue was that Tailwind CSS v4 requires explicit dark mode configuration. The fix is already implemented in globals.css:

@variant dark (&:where(.dark, .dark *));

Scope

This affects numerous components across the codebase that use:

• useTheme() hook with isDark property
• Conditional className generation based on theme
• Runtime theme switching logic

Benefits of Refactoring

1. Zero runtime overhead: Pure CSS theme switching
2. Better tree-shaking: Tailwind can properly analyze static classes
3. Improved maintainability: Static class names are easier to debug
4. Standards compliance: Follows official Tailwind dark mode patterns
5. Type safety: Reduces complex conditional logic

Implementation Status

• Core fix: Added Tailwind v4 dark mode configuration
• Settings components refactored (in progress branch)
• Chat components
• Admin components
• Navigation components
• UI components
• Auth components

The refactoring should be done systematically, component by component, with proper testing to ensure theme switching continues to work correctly.