skills.rest
kscius
ksciusCOMMUNITY
Explore all skills by this author →
Website𝕏@ksciusGitHub

dark-mode-testing

Automates visual verification of dark-mode UI across web pages via screenshots and contrast checks.

2|Updated Apr 3, 2026
Search Tags:#accessibility#ui-testing#screenshot#dark-mode#browser-automation#visual-regression#ui-consistency
One-click install
npx skills add https://github.com/kscius/KS-Cursor-Orchestrator --skill dark-mode-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dark-mode-testing
Source: https://github.com/kscius/KS-Cursor-Orchestrator/tree/main/skills/dark-mode-testing
Command: npx skills add https://github.com/kscius/KS-Cursor-Orchestrator --skill dark-mode-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Automates verification of dark mode by capturing light and dark screenshots and checking contrast and visibility.
  • Supports multiple toggling methods: class toggle, attribute toggle, media query emulation, and in-app UI control.
  • Use case: QA engineers can validate theme consistency across pages and detect accessibility gaps.

Quick Start

Open the target page, capture a light-mode screenshot, toggle to dark mode using any supported method, and capture the dark-mode screenshot.

Frequently Asked Questions about dark-mode-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate dark mode UI testing for web applications?▼

Automate dark mode UI testing by capturing screenshots of both light and dark themes, then checking for contrast and visibility issues across pages. This process flags missing token mappings to ensure theme consistency and accessibility.

What methods can I use to toggle dark mode during browser automation?▼

Dark mode toggling during browser automation supports multiple methods including class toggle, attribute toggle, media query emulation, and in-app UI control. These options ensure visual verification works across different theme implementation strategies.

Does dark mode visual regression testing detect accessibility issues?▼

Yes, dark mode visual regression testing detects accessibility issues by validating theme toggling and reporting visibility and contrast gaps. It identifies missing token mappings to provide actionable remediation for UI-heavy applications.

What's the best way to verify UI consistency when switching between light and dark themes?▼

The best way to verify UI consistency across light and dark themes is capturing comparative screenshots of both states and checking contrast. This automated visual verification detects missing token mappings and reports actionable accessibility gaps.

Why does my dark mode implementation have visibility issues across different web pages?▼

Dark mode visibility issues often stem from missing token mappings or insufficient contrast ratios. Automated visual verification detects these gaps by capturing light and dark screenshots, reporting actionable remediation for UI consistency.

Related Skills

Explore More Design & Creative Skills→
moughamirmoughamir

tailwindcss-responsive-darkmode

Standardize responsive Tailwind CSS breakpoints and dark mode strategies.

Community
Intermediate
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced