Dark Mode Testing

Verify that dark mode works correctly by toggling themes and comparing.

Workflow

1. Open the App

Navigate to the target page using browser_navigate.

2. Screenshot Light Mode

Take a screenshot of the page in its default (light) state using browser_take_screenshot.

3. Toggle Dark Mode

Toggle dark mode using one of these methods (try in order):

Class toggle: Execute JS to add dark class to <html>:

document.documentElement.classList.toggle('dark')

Attribute toggle: Set data-theme="dark":

document.documentElement.setAttribute('data-theme', 'dark')

Media query: Use browser to emulate prefers-color-scheme: dark
UI toggle: Find the theme toggle button in browser_snapshot and click it

4. Screenshot Dark Mode

Take another screenshot after toggling.

5. Inspect for Issues

Check the browser_snapshot aria tree and screenshots for:

White flashes: Elements with hardcoded bg-white instead of bg-white dark:bg-slate-900
Invisible text: Text color that matches the dark background (e.g. black text on dark bg)
Missing borders: Borders using light-only colors that disappear on dark backgrounds
Contrast violations: Text that's too low-contrast against the dark background (need 4.5:1)
Hardcoded colors: Any #ffffff, #000000, white, black in inline styles
Images: Logos or icons that don't have dark mode variants
Shadows: Box shadows that are invisible on dark backgrounds
Form inputs: Input fields that keep white backgrounds in dark mode

6. Report

Dark Mode Test:
  Light mode: OK
  Dark mode issues found:
    - Header logo: white logo invisible on dark bg (needs dark variant)
    - Card borders: border-gray-200 invisible on dark bg → add dark:border-gray-700
    - Footer text: hardcoded #333 → use text-gray-900 dark:text-gray-100

Fix each issue and re-test.

dark-mode-testing