What is the dark-mode-design-expert skill?
The dark-mode-design-expert skill is one folder in a large skills collection by Erich Owens. Its SKILL.md covers WCAG contrast targets, primitive, semantic and component tokens, tonal elevation, light-dark() CSS, theme switching without a flash, and a weather, sky and ocean example that adapts to time of day.
Pure white text on black measures 21 to 1, and this skill argues that is too much. Its dark mode gotcha says to aim for 12 to 1 through 16 to 1 for primary text, since extreme contrast causes more eye strain.
It is one of 180+ skills in a collection the README credits to Erich Owens, and its description adds atmospheric theming: weather, sky and ocean color systems that adapt to time of day and conditions.
Core ideas in the SKILL.md
- A table weighs light against dark mode and says dark is contextually better, not universally better, citing 39 to 47 percent OLED battery savings at max brightness.
- WCAG minimums of 4.5 to 1 for body text and 3 to 1 for large text and UI components, with higher targets listed.
- Dark backgrounds should not be pure black, and borders become more visible with translucent white.
- Interactive colors move brighter in dark mode so buttons and links stay visible.
Three-tier tokens and elevation
Tokens come in three tiers: primitives are raw values never used directly, semantic tokens carry purpose and switch with the theme, and component tokens consume the semantic layer. Light and dark themes only redefine the middle tier.
On elevation, shadows vanish against dark surfaces, so higher layers get lighter fills. A Material Design 3 style scale runs from #121212 at level 0 to #323232 at level 5, built with color-mix and white overlays.
Implementation patterns
The CSS section sets color-scheme to light dark, uses light-dark() for inline theming, and respects prefers-color-scheme. A TypeScript theme manager stores light, dark or system, and a head script prevents the flash of the wrong theme.
Who the dark-mode-design-expert skill suits
Best for
- Adding a dark theme to an existing site or app and wanting a token structure that scales.
- Surface layering problems, where cards and modals lose depth once shadows stop working.
- Theme toggles that flash the wrong color on load.
Not for
- General palette creation, typography or component library architecture, which the skill's own NOT for list sends to other skills.
- Auditing specific color pairs. Its pairing note recommends a dedicated contrast auditor. For palettes, see color-system.
- Anyone who wants no weather theme. The flagship example is atmospheric, so skip it if irrelevant.
Use it with UiChemy
The skill outputs CSS custom properties and scripts for your codebase, not WordPress content. If a site's design lives in Figma or comes from an AI build, UiChemy converts it into editable WordPress, then you apply the tokens. Click Get Started on uichemy.com.
Further reading on the same topic: dark-mode-design, design-token for token structure and better-colors for palette choices.
How to install Dark Mode Design Expert Skill: Tokens, Elevation, Contrast
git clone https://github.com/erichowens/some_claude_skills.gitClone the collection
The README's manual route is a git clone of the repository. Use
git clone https://github.com/erichowens/some_claude_skills.git, the URL the README gives.Copy the skill folder
Copy .claude/skills/dark-mode-design-expert, with its references folder, into ~/.claude/skills/. The README copies every skill there, but one folder is enough.
Or use the plugin marketplace
The README's pattern is
/plugin marketplace add erichowens/some_claude_skills, then/plugin install <skill-name>@some-claude-skills, with adhd-design-expert as its example name.Ask for a dark theme
Trigger phrases in the SKILL.md include dark mode, dark theme, theme switching, prefers-color-scheme and elevation in dark mode.
Check that it loaded
Ask the agent to add a dark theme to a small page. It should propose primitive, semantic and component tokens, lighter surfaces for elevation, and a head script that prevents a theme flash.
Key features
- Light versus dark comparisonA table scores OLED battery, low-light comfort, bright environments, astigmatism, focus and sleep hygiene, concluding dark mode is contextual.
- WCAG contrast tableBody text 4.5 to 1 minimum with 7 to 1 target, large text and UI components 3 to 1, plus notes for disabled and decorative elements.
- Moderate contrast targetPrimary text should sit between 12 to 1 and 16 to 1, because pure white on black at 21 to 1 causes more strain.
- Three-tier token architecturePrimitives, semantic tokens and component tokens, with light and dark blocks that redefine text, background, surface, border and interactive tokens.
- Tonal elevationLighter surface colors replace shadows in dark mode, with a six-level scale and white overlay percentages from 0 to 11 percent.
- Glow effectsDark mode adds small, medium and large glow tokens, and the skill says glow replaces shadows in dark mode.
- Modern CSS patternscolor-scheme set to light dark, light-dark() for inline values, and prefers-color-scheme media queries that respect explicit theme classes.
- Theme manager and FOWT guardA TypeScript setTheme function persists light, dark or system, and an inline head script applies the saved class before first paint.
- Weather, sky and ocean exampleA flagship token system with ocean depths, sky states from dawn to night, atmospheric haze, storm grays and bioluminescent accents.
- Reference filesThree bundled files cover CSS implementation, elevation strategies and OLED optimization for deeper detail.
Frequently asked questions
What is the dark-mode-design-expert skill?
It is a skill folder in the some_claude_skills collection. The SKILL.md covers dark mode design with atmospheric theming, WCAG accessibility and cross-platform practice, including tokens, elevation, CSS implementation, theme switching and a weather, sky and ocean example.
How do I install the dark-mode-design-expert skill?
Clone the repository and copy .claude/skills/dark-mode-design-expert into your skills folder, as the README's manual option describes. The README also documents a plugin marketplace route for installing any single skill by name.
Which AI coding agents can use it?
The README is written for Claude Code and its skills folder and plugin marketplace. The folder also has a plugin.json file. Another agent that loads SKILL.md folders may follow it, but the repository does not list other supported tools.
Why does it avoid pure black backgrounds?
The SKILL.md uses a deep blue-tinted background instead of black, and explains that very high contrast adds strain. It sets primary text slightly off-white and targets 12 to 1 through 16 to 1 contrast, instead of the maximum 21 to 1.
How does it handle elevation without shadows?
It says shadows become invisible or look like holes on dark backgrounds, so higher surfaces get lighter fills. The skill gives a Material Design 3 style scale of six levels and a color-mix pattern that blends white into the base color.
How does it prevent a flash of the wrong theme?
A small inline script in the head reads the saved theme from localStorage and adds a theme-dark or theme-light class before any CSS loads. System preference is left to media queries when the user has not chosen an explicit theme.
Do I need the weather and ocean theme?
No. The weather, sky and ocean system is the flagship worked example, and the skill's description highlights it. The general guidance on tokens, contrast, elevation and switching applies to any palette, so you can take the structure and ignore the atmospheric colors.
What license does the skill use?
GitHub lists the repository under the MIT license, and the README also states MIT. Check the repository again before you redistribute the folder inside a product, since files and licenses can change after this page was written.