Dark Mode Design Considerations

Dark Mode Design Considerations

Dark mode is a UI colour scheme where light text and UI elements appear on a dark background. It has become a standard expectation for many applications. This article explains what is involved in designing and implementing it properly.

Why Dark Mode Is Not Just "Invert the Colours"

Simply inverting a light mode palette produces harsh, unnatural results and creates new accessibility problems. Dark mode requires a separately designed colour system:

• Backgrounds use dark greys (not black — pure black creates excessive contrast and harshness)
• Text uses near-white rather than pure white for the same reason
• Elevation is expressed through lighter surface colours (not shadows as in light mode)
• Brand accent colours often need to be lightened to maintain WCAG contrast ratios on dark backgrounds
• Some images and illustrations need dark-mode variants

Implementation Approaches

• CSS custom properties (variables): Define all colours as CSS variables; swap values based on a class or media query
• OS preference detection: Respect the user's OS-level dark mode preference via the prefers-color-scheme CSS media query
• Manual toggle: Allow users to override the OS preference within the app — many users want different settings per context

Testing

Test dark mode at all designed breakpoints and on real devices. Pay particular attention to: images with transparency, charts and data visualisations (which often need separate dark-mode colour palettes), third-party embedded content that does not respect dark mode.