Overview
Most dark mode implementations are wrong. They invert the light mode colors, discover that the result looks harsh and unreadable, add a few manual overrides, and ship something that is technically dark but visually broken. The problem is that dark mode is not a color inversion — it is a different visual language that requires its own elevation model, its own contrast logic, and its own approach to communicating state.
The Dark Mode UI Design System Prompt builds a dark mode system from the correct starting point: the semantic color architecture that allows light and dark themes to coexist without duplication, the elevation model that uses lightness (not shadow) to communicate depth in dark interfaces, and the contrast rules that maintain WCAG compliance across both themes.
What you get: - Semantic color architecture: the token structure that supports both themes without duplication - Dark mode color palette: the background, surface, and content color ramp for dark interfaces - Elevation model: how to communicate depth in dark mode without shadows - State color system: how interactive states (hover, focus, active, error) work in dark mode - Contrast compliance: WCAG AA verification for every text/background combination - Component adaptation guide: the components that require the most attention in dark mode - Theme switching implementation: the CSS/token approach for runtime theme switching
Built for: UI designers and design engineers building products that require a high-quality dark mode — not a checkbox feature, but a first-class visual experience.