Dark Mode Implementation Design Guide

You are a dark mode specialist who has implemented dark themes for products with 50M+ users, handling edge cases that most teams miss.

Current light mode colors: [LIST YOUR PRIMARY, SECONDARY, NEUTRAL, SEMANTIC COLORS]
Design system: [MATERIAL/IOS/CUSTOM]
Product type: [CONTENT-HEAVY/DATA-DENSE/MEDIA/E-COMMERCE/PRODUCTIVITY]
Brand colors: [PRIMARY BRAND COLOR AND IF IT MUST STAY EXACT]

Design a complete dark mode system:

**1. Background Surface Hierarchy**
- Level 0 (page background): color value
- Level 1 (cards, containers): color value
- Level 2 (elevated elements, modals): color value
- Level 3 (highest elevation): color value
- Rule: lighter surfaces = higher elevation in dark mode
- Exact hex/HSL values for each level
- Surface opacity approach vs solid colors

**2. Text Color System**
- Primary text: color value, contrast ratio vs each surface
- Secondary text: color value, contrast ratio
- Disabled text: color value, minimum contrast
- Link text: color value (different from light mode?)
- Rule: pure white (#FFFFFF) is too harsh - use off-white
- Inverse text (for colored backgrounds)

**3. Brand Color Adaptation**
- Primary brand color: light mode value to dark mode value
- Desaturation rules for vibrant colors on dark backgrounds
- Tonal palette generation for dark surfaces
- Semantic colors mapping (success, warning, error, info)
- How accent colors change to maintain contrast

**4. Border and Divider System**
- Border colors for each surface level
- Divider line colors and opacity
- When to use borders vs elevation (shadow vs no shadow)
- Focus ring color adaptation

**5. Image and Media Handling**
- Photo treatment: no filter, slight dim, or vignette?
- Illustration adaptation strategy
- Logo variants (do you need a light version?)
- Icon color inversion rules
- Chart and data viz color adaptation
- Shadow handling (reduce or replace with borders)

**6. Component-Specific Adaptations**
- Input fields: background, border, placeholder color
- Buttons: primary, secondary, ghost - dark mode versions
- Cards: background, border, shadow changes
- Navigation: active/inactive states
- Modals and overlays: backdrop opacity, surface color
- Toast notifications: background, text, icon colors
- Toggle switches, checkboxes, radio buttons
- Tables and data grids: stripe color, header color

**7. Implementation Strategy**
- CSS custom properties approach
- prefers-color-scheme media query
- Manual toggle placement and behavior
- System preference vs user preference priority
- Transition animation between modes (duration, property)
- Storage: localStorage, cookie, or user preference API
- SSR/SSG: preventing flash of wrong theme

**8. Testing Checklist**
- [ ] Every text color meets 4.5:1 contrast on its background
- [ ] Images don't blind users in dark rooms
- [ ] Charts and graphs remain readable
- [ ] Focus states visible in dark mode
- [ ] No component is invisible (same bg as parent)
- [ ] Third-party embeds handled (iframes, widgets)
- [ ] Print styles still use light colors
- [ ] Email templates have separate dark mode styles

Provide exact color values for every element. Include before/after comparisons for each category.