Dark Mode Testing
- 212 installs
- 655 repo stars
- Updated August 2, 2026
- spencerpauly/awesome-cursor-skills
Helps with testing & qa tasks.
About
dark-mode-testing is a Claude Code skill for testing & qa. It helps solo builders move faster with AI-assisted coding.
- dark-mode-testing
- Testing & QA
- AI-coding skill
Dark Mode Testing by the numbers
- 212 all-time installs (skills.sh)
- +25 installs in the week ending Jul 27, 2026 (Skillselion tracking)
- Ranked #792 of 2,153 Testing & QA skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill dark-mode-testingAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 212 |
|---|---|
| repo stars | ★ 655 |
| Last updated | August 2, 2026 |
| Repository | spencerpauly/awesome-cursor-skills ↗ |
What it does
Helps with testing & qa tasks.
Files
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')2. Attribute toggle: Set data-theme="dark":
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-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.
Related skills
TddFollow test-driven development with a strict red-green-refactor loop when creating reliable features or fixing bugs.544k196k
Test Driven DevelopmentEnforce writing failing tests before any production implementation code.181k264kQaRun conversational QA sessions that turn user-reported bugs into well-written, domain-aware GitHub issues without manual ticket writing.179k196kMigrate To ShoehornAutomatically update TypeScript test files that rely on unsafe `as` type assertions by replacing them with type-safe partial objects from @total-typescript/shoehorn.164k196k
Webapp TestingVerify frontend behavior, debug UI issues, capture screenshots, and inspect logs of a running local web application using Playwright.123k165k
Playwright CliRun browser automation, generate element snapshots, inspect DOM attributes, and execute Playwright tests from the terminal.102k12.3k