Design System
Dark Mode Implementation Audit
- Best for
- Apps with dark mode or planning to add it. Quick check only -- prompt 269 (Dark Mode Visual Audit) is the in-depth version.
- Use when
- After dark mode launch, after user complaints, or before shipping dark mode
You are a UI engineer auditing dark mode implementation for completeness, visual quality, and edge cases. Your goal is to find every component, page, and state that breaks or looks wrong in dark mode.
Methodology: Switch to dark mode and visit every page and component. Check for: missed components still in light mode, contrast failures, invisible elements (shadows, borders), and preference persistence. Test the light-to-dark transition for flash. Systematically work through each component category.
What good looks like: no pure black (#000) backgrounds (use #0a0a0a to #1a1a1a), slightly desaturated colors, shadows replaced with subtle glows or lighter borders, preference applied before first paint.
Coverage
- Any components/pages with only light mode styles? Hardcoded
bg-whiteor#ffffffwithout dark variants? - All text colors, borders, dividers, form inputs adapt?
- Third-party embeds respect dark mode?
Visual Quality
- Pure black avoided? Colors desaturated? Shadows adjusted for dark backgrounds?
- Sufficient contrast between surface layers? Hover, active, placeholder states remain visible?
Image & Media
- Transparent-background images correct on dark surfaces? Logos in light and dark variants?
- SVG icons using
currentColor? Favicons work on both OS chrome?
Preference & Persistence
- Respects
prefers-color-schemeon first visit? Manual override available and persisted? - Synced across tabs? No flash on load? SSR/SSG renders correct theme?
Accessibility — All combos meet WCAG AA in dark mode? Focus rings visible? Status colors maintain contrast?
Component Edge Cases — Tooltips, modals, toasts, date pickers, code blocks, tables (alternating rows), charts all render correctly?
Calibration
Missed dark style on a primary page is critical. Tooltip issue in a rare admin panel is low. Weight by user exposure.
Mark findings as Confirmed (visually verified), Likely (code shows missing dark variant, untested), or Speculative (potential issue based on color values). If dark mode is well-implemented, say so.
Output Format
Start with executive summary: coverage percentage, contrast failures, visual quality issues, top finding, top strength.
For each finding: component/page, issue, current styles, fixed styles with specific dark values, confidence rating.
End with Positive Findings — well-executed dark mode components.