How do I install the Dark Mode skill?

Run npx skillmds@latest add amey-thakur/dark-mode in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Dark Mode safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Dark Mode?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Dark Mode free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Dark Mode?

Amey-Thakur (@amey-thakur) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Dark Mode by amey-thakur — Agent Skill

Name: Dark Mode
Author: Amey-Thakur

File contents

Dark mode

Dark mode is a second design, not an inverted one. The mechanics are simple; the craft is in the handoff between system preference, user override, and first paint.

Method

Three-state preference: light, dark, system. Default to system via prefers-color-scheme; store an explicit user choice (localStorage) only when they pick one, and keep following the OS when they chose "system". Listen for change on the media query so the app flips live at sunset.
Kill the flash at first paint. A tiny inline script in <head> reads the stored choice and stamps data-theme on <html> before any CSS applies. Also declare color-scheme: light dark so scrollbars, inputs, and default backgrounds render natively correct.
Retune, do not invert. Dark surfaces are dark gray (not black), elevation becomes lighter-surface instead of shadow, saturated brand colors need desaturating or lightening to hold contrast on dark. Run the contrast pass separately for each theme; 4.5:1 failures cluster in dark mode's muted text.
Route it through tokens. Only semantic custom properties change per theme (see css-theming); component CSS never mentions the theme. If you find [data-theme="dark"] .card in a component file, the token layer is missing a role.
Handle images and media. Dim photos slightly (filter: brightness(.9)) if they glare; swap logos with <picture media="(prefers-color-scheme: dark)"> or a masked SVG using currentColor; keep color-scheme off embedded iframes you do not control.
Test the forgotten surfaces. Focus rings, selection color, placeholder text, disabled states, charts, and email/PDF exports; each has a default that betrays the theme.

Boundaries

Auto-darkening user-generated content (documents, embedded HTML) can destroy meaning; scope the theme to your chrome and leave content opt-in.
forced-colors: active (Windows High Contrast) overrides both your themes; respect it rather than fighting it.
A dark mode toggle in a cookie-consent-style banner is noise; put it in settings and remember it.

---name: dark-modedescription: Implement dark mode that honors system preference, allows manual override, and never flashes the wrong theme. Use when adding dark mode or fixing its flash, contrast, or image problems.---# Dark modeDark mode is a second design, not an inverted one. The mechanics aresimple; the craft is in the handoff between system preference, useroverride, and first paint.## Method1. **Three-state preference: light, dark, system.** Default to system via `prefers-color-scheme`; store an explicit user choice (localStorage) only when they pick one, and keep following the OS when they chose "system". Listen for `change` on the media query so the app flips live at sunset.2. **Kill the flash at first paint.** A tiny inline script in `<head>` reads the stored choice and stamps `data-theme` on `<html>` before any CSS applies. Also declare `color-scheme: light dark` so scrollbars, inputs, and default backgrounds render natively correct.3. **Retune, do not invert.** Dark surfaces are dark gray (not black), elevation becomes lighter-surface instead of shadow, saturated brand colors need desaturating or lightening to hold contrast on dark. Run the contrast pass separately for each theme; 4.5:1 failures cluster in dark mode's muted text.4. **Route it through tokens.** Only semantic custom properties change per theme (see css-theming); component CSS never mentions the theme. If you find `[data-theme="dark"] .card` in a component file, the token layer is missing a role.5. **Handle images and media.** Dim photos slightly (`filter: brightness(.9)`) if they glare; swap logos with `<picture media="(prefers-color-scheme: dark)">` or a masked SVG using `currentColor`; keep `color-scheme` off embedded iframes you do not control.6. **Test the forgotten surfaces.** Focus rings, selection color, placeholder text, disabled states, charts, and email/PDF exports; each has a default that betrays the theme.## Boundaries- Auto-darkening user-generated content (documents, embedded HTML) can destroy meaning; scope the theme to your chrome and leave content opt-in.- `forced-colors: active` (Windows High Contrast) overrides both your themes; respect it rather than fighting it.- A dark mode toggle in a cookie-consent-style banner is noise; put it in settings and remember it.

Frequently asked questions

Dark Mode