skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-dark-mode

Detect missing dark-mode support by inspecting prefers-color-scheme and color-scheme metadata.

Updated May 22, 2026
Search Tags:#accessibility#css#dark mode#prefers-color-scheme#theme toggle
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-dark-mode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-dark-mode
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-dark-mode
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-dark-mode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill identifies pages that fail to respect dark-mode preferences, preventing the bright white flash and poor first impression that dark-mode users experience on unsupported sites.

Core Features & Use Cases

  • Preference Detection: Checks for prefers-color-scheme usage, color-scheme metadata, and root-level CSS color-scheme support.
  • Theme Toggle Awareness: Recognizes when a site relies on a manual theme switch instead of automatic OS preference handling.
  • Defect Reporting: Flags pages that have no dark-mode support at all or only support dark mode after a user clicks a toggle.
  • Use Case: Run it on a marketing homepage or app shell to verify that dark-mode visitors are handled gracefully before release.

Quick Start

Ask the skill to inspect the current page for dark-mode support and report whether it honors the user’s system preference.

Frequently Asked Questions about qa-detect-dark-mode

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

FAQPage Schema
How do I check if a web page supports dark mode using prefers-color-scheme?▼

To check dark mode support, inspect the web page's DOM and stylesheets for `prefers-color-scheme` media queries and `color-scheme` metadata. This detection identifies whether the UI automatically adapts to OS appearance settings or relies on a manual theme toggle.

Why does my website flash white for dark mode users?▼

Your website flashes white because it lacks automatic dark mode support, failing to respect the user's OS appearance settings. Detecting missing `prefers-color-scheme` signals and `color-scheme` metadata helps identify pages causing this poor first impression before release.

What is the difference between automatic dark mode and a manual theme toggle?▼

Automatic dark mode uses the `prefers-color-scheme` CSS media feature to adapt UI colors directly to OS settings, while a manual theme toggle requires user interaction. Auditing for dark mode support detects both mechanisms, flagging sites relying solely on manual switching.

Can I audit an app shell for missing dark mode support?▼

Yes, you can audit responsive app shells, marketing pages, and browser-based interfaces for missing dark mode support. The inspection verifies root-level CSS `color-scheme` support and `prefers-color-scheme` handling to ensure dark-mode visitors are managed gracefully.

How do I detect missing color-scheme metadata during a UI audit?▼

Detect missing `color-scheme` metadata by performing a browser-side DOM and stylesheet inspection. This UI audit flags pages lacking root-level CSS `color-scheme` support and `prefers-color-scheme` signals, identifying interfaces that fail to adapt to OS appearance settings.

Related Skills

Explore More Design & Creative Skills→
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-css-compat

Scan CSS stylesheets for cross-browser compatibility risks from unsupported properties.

Community
Intermediate
nguyenthienthanhnguyenthienthanh
24

nativewind-generator

Generate NativeWind-styled React Native components with TypeScript typings and dark mode support.

Community
Intermediate
1IssaMohamed1IssaMohamed

audit

Audit UI projects for accessibility, performance, theming, and responsive design issues.

Community
Advanced
archview-aiarchview-ai

openwebf-host-theming-sync

Synchronize Flutter and WebF theming via CSS variables and prefers-color-scheme.

Official
Intermediate