dark-mode-testing

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):

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

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

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

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

1. Media query: Use browser to emulate prefers-color-scheme: dark
2. 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.