What problem does it solve? Designing a dark mode by inverting a light palette breaks semantic status colors, surface hierarchy, images, and browser chrome. This Skill provides a structured workflow to transform a product's appearance role-by-role so information hierarchy, interaction meaning, and brand identity survive across light and dark modes. ## Core Features & Use Cases - Role-preserving transformation: Maps base/raised surfaces, content hierarchy, interaction states, and semantic status colors to dark-specific values instead of inverting hex values. - Cross-mode verification checklist: Compares rendered light and dark artifacts across forms, overlays, focus states, charts, code surfaces, and platform-provided controls. - Asset and preference handling: Covers logos, SVGs, illustrations, system vs. app appearance overrides, and coordination with browser chrome via color-scheme. - Use Case: When adding a dark theme to a web product, use this Skill to audit every surface, state, and asset so the dark UI keeps the same hierarchy and meaning as the light UI rather than looking like a recolored copy. ## Quick Start Use the dark-mode-design skill to review my product's screens and produce a dark appearance that preserves the existing color roles and surface hierarchy.
