Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues.
Scanned 9/10/2026
Install to Claude Code
Skills Directorynpx -y skills add 0xAidan/polymarket-bot-test --skill dark-mode-testing --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Dark Mode Testing?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/0xaidan-dark-mode-testing)More formats (shields.io, HTML) on the badges page.
---
name: dark-mode-testing
description: Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues.
user-invocable: true
---
# 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>`:
```javascript
document.documentElement.classList.toggle('dark')
```
2. **Attribute toggle**: Set `data-theme="dark"`:
```javascript
document.documentElement.setAttribute('data-theme', 'dark')
```
3. **Media query**: Use browser to emulate `prefers-color-scheme: dark`
4. **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.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
