dark-mode-implementation
CommunityImplement dark mode without flashes or surprises
Design & Creative#dark mode#prefers-color-scheme#theme persistence#foUC prevention#meta theme-color#theme assets#color-scheme css
Authorjacob-balslev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It solves the common dark-mode implementation issues where users see the wrong theme briefly (flash of incorrect theme), where their chosen mode is not persisted, and where visuals like icons, illustrations, and browser chrome hints don’t match the active theme.
Core Features & Use Cases
- System, explicit choice, and persistence: Detects
prefers-color-scheme, supports System/Light/Dark overrides, and restores the saved choice on every load. - No flash of incorrect theme (FOUC) prevention: Applies the correct theme synchronously before the first paint to avoid momentary light theme rendering.
- Asset and UI chrome theming: Swaps theme-sensitive images (via
<picture>/media queries), updatescolor-scheme, and pairsmeta theme-color(and favicon variants) with the active theme.
Quick Start
Ask for a dark-mode implementation plan that adds system detection, a blocking first-paint theme script, persisted user choice (light/dark/system), and paired theme assets including meta theme-color and a dark favicon.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: dark-mode-implementation Download link: https://github.com/jacob-balslev/skill-graph/archive/main.zip#dark-mode-implementation Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.