``` - **Always** use `dark` class - **Always** use `bg-background` for main wrapper - **Always** include `min-h-screen` ### 2. Section Backgrounds ```tsx // Option 1: Primary dark background

// Option 2: Pure black (for contrast)

// Option 3: For special sections

``` ### 3. Text Colors for Dark Backgrounds ```tsx // Headings

Primary Heading

Secondary Heading

// Body text

Regular body text

Muted text

// Accent text WDI Pink Accent Accent Color ``` ### 4. Card Components ```tsx // Dark cards // Card text

Card Title

Card description

``` ## Background Replacement Patterns ### Replace These Patterns: ```tsx // ❌ WRONG - Light backgrounds

// ✅ CORRECT - Dark backgrounds

``` ### Text Color Adjustments: ```tsx // ❌ WRONG - Dark text on dark background

// ✅ CORRECT - Light text on dark background

``` ## Component Integration ### Using Existing Dark Components: ```tsx // These components already handle dark styling // ✅ Dark by default
// ✅ Dark by default // ✅ Dark by default // ✅ Updated to dark // For custom sections, ensure dark backgrounds

``` ## Validation Checklist For each page, verify: - [ ] Page wrapper uses `dark` class and `bg-background` - [ ] All sections use `bg-background` or `bg-black` - [ ] No white/light background classes anywhere - [ ] Text is readable (white/light on dark backgrounds) - [ ] Cards and components use dark variants - [ ] Borders are visible (use `border-white/10` or similar) - [ ] Interactive elements are properly styled - [ ] Navigation and Footer are included - [ ] FAQSection uses new dark styling ## Common Mistakes to Avoid 1. Forgetting the dark class: Always include `dark` in page wrapper 2. Mixed backgrounds: Don't mix light and dark backgrounds 3. Invisible text: Ensure text color contrasts with background 4. Invisible borders: Use light borders on dark backgrounds 5. Component conflicts: Verify all components work with dark theme