Dark Mode Testing Checklist

Dark mode is expected by users but frequently half-implemented in AI-generated apps. Invisible text, broken images, and inconsistent component theming plague vibecoded dark modes. This checklist ensures both light and dark themes work correctly throughout your application.

Last updated: 2026-03-14

Color and Contrast

All text is readable in dark mode

Navigate every page in dark mode and verify no text blends into the background or is difficult to read.

Contrast ratios meet WCAG standards in both themes

Verify that text contrast is at least 4.5:1 for normal text and 3:1 for large text in both light and dark modes.

Interactive elements are distinguishable

Check that buttons, links, and form fields are clearly visible and distinguishable from surrounding content in both themes.

Status colors work in both modes

Verify that success, warning, error, and info colors are readable and meaningful in both light and dark themes.

Component Consistency

All components are themed correctly

Check every component type including cards, modals, dropdowns, and tooltips for correct dark mode colors.

Input fields and forms are styled for both themes

Verify that form inputs, select dropdowns, and textareas have appropriate backgrounds and borders in both modes.

Third-party components respect the theme

Check that embedded widgets, date pickers, and other third-party UI components adapt to the active theme.

Borders and dividers are visible in both modes

Verify that subtle borders and dividers remain visible and appropriate in both light and dark backgrounds.

Shadow and elevation work in dark mode

Check that box shadows and elevation cues are visible and appropriate on dark backgrounds.

Media and Images

Images look appropriate in dark mode

Verify that photos, illustrations, and icons look natural against dark backgrounds without harsh contrast edges.

SVG icons adapt to theme colors

Check that SVG icons change color to remain visible when switching between light and dark themes.

Charts and graphs are readable in both modes

Verify that data visualizations have appropriate colors and labels for both themes.

Logo variants exist for both themes

Check that the app logo is visible and looks correct in both light and dark modes, using variants if needed.

Theme Switching

Theme toggle works correctly

Click the theme toggle and verify the entire page switches themes immediately without a flash of the wrong theme.

Theme preference persists across sessions

Select a theme, close the browser, reopen the app, and verify the chosen theme is remembered.

System theme preference is respected

Change the OS theme setting and verify the app follows the system preference when set to auto mode.

No flash of incorrect theme on page load

Reload the page and verify the correct theme applies immediately without briefly showing the wrong one.

Frequently Asked Questions

What is the most common dark mode bug in AI-generated apps?

Hardcoded colors are the number one issue. AI tools set specific color values like white text or dark backgrounds on individual elements instead of using theme-aware CSS variables, causing some elements to be invisible when the theme switches.

Should I support system theme preference detection?

Yes. Most users expect apps to follow their OS theme setting. Implement prefers-color-scheme detection as the default, with a manual toggle for users who want a different theme from their system setting.

Let human testers run through this checklist for you

Submit your app and our testers will find the bugs you missed. Starting at €15 per test.

Related checklists

Accessibility Audit Checklist

Accessibility testing checklist for AI-generated apps. Cover WCAG compliance, keyboard navigation, screen readers, and color contrast requirements.

Cross-Browser Testing Checklist

Cross-browser testing checklist for AI-generated web apps. Verify compatibility across Chrome, Firefox, Safari, and Edge with layout and feature checks.

← Back to Checklists