Guide · Theming
Dark mode design, explained
Dark mode is a second theme where the interface uses a dark background and light foreground. Designing it well is more than inverting colours: contrast, elevation, shadow, and accent colours all behave differently on a dark surface, which is why dark mode bolted on late so often looks wrong.
Last updated
Why dark mode is more than inversion
Flipping every colour to its opposite breaks a design. Pure black backgrounds are harsh, fully saturated accents vibrate against dark surfaces, and shadows — which imply elevation in light mode — disappear. Dark mode has to be designed, not computed.
On a dark surface, elevation is usually shown with lighter surfaces rather than shadows, and accent colours are often desaturated so they sit comfortably instead of glowing.
Designing both themes together
The reliable way to get dark mode right is to design it alongside light mode on a shared token system, so every colour has a decided value in both. Contrast is checked in both themes, not assumed from one.
Designed together, the two themes stay coherent. Bolted on afterwards, dark mode tends to expose every place a colour was hard-coded instead of tokenised.
Both themes in a Koryvant prototype
Koryvant generates every screen in light and dark from the start, on a shared token system, so the prototype reads the way a shipped product does in either theme.
Because both themes are decided up front, engineering inherits them rather than reverse-engineering dark mode later. Koryvant is the design-complete blueprint layer, not a full-app builder. There is no backend, no database, and no running full-stack app.
Try it on your own idea
Describe your product to Koryvant and get a complete clickable prototype — every screen, every state, both themes — free to generate and preview.
Questions
- Is dark mode just an inverted colour palette?
- No. Inversion breaks contrast, elevation, and accent colours. Dark mode rethinks surfaces and colours for a dark background, which is why it should be designed, not computed.
- Why design both themes at the same time?
- Designing light and dark together on a shared token system keeps them coherent and catches contrast problems early, instead of exposing hard-coded colours when dark mode is added late.
- Does Koryvant generate dark mode?
- Yes. Koryvant draws every screen in both light and dark on a shared token system from the start.
Keep reading: Responsive design basics or Prototype vs MVP: what each one is for. Browse all guides, or see Koryvant by product type.