Testing Dark Mode and Light Mode

Dark mode bugs are everywhere. Text that disappears on dark backgrounds, icons that lose contrast, and hardcoded colors that ignore theme variables. Certyn can switch between dark and light mode instantly using CSS media emulation.

How It Works

The agent uses Chrome DevTools Protocol's Emulation.setEmulatedMedia to override the prefers-color-scheme media feature. This is the same mechanism browsers use when you toggle dark mode in DevTools — but automated.

No CSS changes. No manual theme toggles. The agent simply tells the browser to report a different preference, and your app responds naturally.

What to Look For

Dark mode testing catches real bugs:

• Invisible text — white text on white backgrounds (or vice versa)
• Hardcoded colors — elements that ignore CSS custom properties or theme tokens
• Image contrast — logos and icons designed only for light backgrounds
• Shadow and border visibility — subtle UI elements that disappear in dark mode
• Third-party embeds — widgets and iframes that don't respect your theme

Example Scenarios

Audit the full app in dark mode

Tell the agent: "Switch to dark mode and navigate through all main pages. Report any elements with poor contrast or visibility issues."

Test dark mode + mobile

Combine with device emulation: "Emulate iPhone 14 in dark mode and test the login flow." This catches issues that only appear when both conditions are active.

Verify theme switching

If your app has a manual theme toggle, test both the CSS media preference and the toggle to ensure they stay in sync.

Other Media Presets

Beyond dark/light mode, Certyn can also emulate:

• reduced_motion — disables animations for accessibility testing
• print — shows the print layout (useful for invoice or report pages)
• screen — resets back to screen media
• reset — clears all media overrides