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
darkclass 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_snapshotand 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-whiteinstead ofbg-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,blackin 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-100Fix each issue and re-test.