Cursor Skill

dark-mode-testing

Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues.

LLM Mart · 0 points · 22 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download spencerpauly-awesome-cursor-skills-resources_dark-mode-testing-99cd265.zip · 1 KB

spencerpauly/awesome-cursor-skills 790 140 forks CC0-1.0 Updated 53d ago

Part of spencerpauly/awesome-cursor-skills — 65 skills

Install

skills CLI npx skills add https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/dark-mode-testing

Claude Code

claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install spencerpauly-awesome-cursor-skills@llmmart

Git git clone https://github.com/spencerpauly/awesome-cursor-skills.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole spencerpauly/awesome-cursor-skills collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

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.

Files (awesome-cursor-skills)

SKILL.md 2.1 KB

---
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.