What is dark-mode-testing?

A procedure for checking that a website works in both light mode and dark mode. It uses screenshots and the browser's page structure to find visual problems such as unreadable text, missing borders, or bright flashes.

Use it to test a page in light and dark themes, compare the two states, and identify colors or borders that need dark-theme alternatives.

It catches theme problems that may be missed when testing only one color scheme. This helps prevent pages that look broken or are difficult to read in dark mode.

dark-mode-testing — Skill for Claude Code by spencerpauly

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add spencerpauly/awesome-cursor-skills --skill dark-mode-testing

Clone the repo

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

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/spencerpauly/awesome-cursor-skills/dark-mode-testing/github.svg)](https://agentmods.dev/skills/spencerpauly/awesome-cursor-skills/dark-mode-testing)

Your own site

<a href="https://agentmods.dev/skills/spencerpauly/awesome-cursor-skills/dark-mode-testing"><img src="https://agentmods.dev/badge/skills/spencerpauly/awesome-cursor-skills/dark-mode-testing/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/spencerpauly/awesome-cursor-skills/dark-mode-testing"><img src="https://agentmods.dev/badge/skills/spencerpauly/awesome-cursor-skills/dark-mode-testing.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 28 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 531 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00028	$0.00531
Opus 5	$0.00014	$0.00266
Sonnet 5	$0.00006	$0.00106
Haiku 4.5	$0.00003	$0.00053

Measured 10d ago against content hash c38f390931bd, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

dark-mode-testing scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

dark-mode-testing — 94% identical, 2 lines differ

resources/dark-mode-testing/SKILL.md · 65 lines

What it actually says

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.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 65 lines · 28 tokens per session scan A c38f390931bd

Subscribe to this mod's changes

dark-mode-testing is a skill published in the GitHub repository spencerpauly/awesome-cursor-skills (768 stars, last pushed 1mo ago), licensed CC0-1.0. It adds 28 tokens to every session and 531 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

E2E testing Frontend Testing

next-cache-components-optimizer

Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…

vercel/next.js · 170 tokens

playwright-component-testing

Set up component testing with Playwright using a story gallery — scaffold stories and a gallery dev page driven by the built-in mount fixture, no dedicated component-testing runtime. Use when asked to test React or Vue components in isolation with Playwright, or to migrate off @playwright/experimental-ct-react / -vue.

microsoft/playwright · 69 tokens

dark-mode-testing