dark-mode-testing

Q: How do I install dark-mode-testing?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill dark-mode-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/dark-mode-testing/ (personal) or .claude/skills/dark-mode-testing/ (project).

by spencerpaulyTesting & QA

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

Installs: 440
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill dark-mode-testing

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads dark-mode-testing automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

FAQ

What does the dark-mode-testing skill do?

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

How do I install dark-mode-testing?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill dark-mode-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/dark-mode-testing/ (personal) or .claude/skills/dark-mode-testing/ (project).

Which AI agents can use dark-mode-testing?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is dark-mode-testing safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains dark-mode-testing?

It is published by spencerpauly in spencerpauly/awesome-cursor-skills. It has 440 recorded installs.