Skip to content
Get packs

Dark Mode CSS Checker

Audits stylesheets for missing prefers-color-scheme dark mode support and hard-coded colors

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews CSS and component styles to see whether they support dark mode through the prefers-color-scheme setting or a data-theme attribute, and flags hard-coded colors that would look wrong in dark mode. It then suggests moving colors into CSS custom properties redefined inside a dark media query, and checks contrast and layouts before proposing fixes. It is a review guide: it changes how the agent reads and advises on CSS, based on a checklist rule.

Great for

  • Front-end developers adding dark mode to an existing website or app
  • Designers or reviewers checking whether a stylesheet handles dark themes
  • Teams working through a Front-End Checklist style review

Skip it if

  • Projects that have no stylesheets or do not need a dark theme (the checks would not apply)
  • Users expecting automatic, verified visual testing; the skill asks the agent to reason about layouts, and the files include no tool that renders pages

Try asking

  • “Check this stylesheet for dark mode support and list hard-coded colors that need to change”
  • “Help me add prefers-color-scheme dark mode using CSS custom properties to my site”
  • “Review my component styles for dark mode problems across breakpoints”
  • “Explain how to add a manual dark mode toggle with localStorage and a data-theme attribute”
Step-by-step guide: how to use Dark Mode CSS CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    dark-mode-css.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dark-mode-css.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dark-mode-css.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the actual CSS files or component styles so the agent can point to exact selectors and declarations.
  • Ask for contrast checks explicitly and confirm results with a real contrast tool, since the agent cannot guarantee WCAG compliance by reading code alone.
  • Test the result in a browser with the OS dark setting on and off, and with the manual toggle if you add one.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.