Dark mode with design tokens

How to implement dark mode with as little effort as possible

This article discusses everything from triggering dark mode, to setting up design tokens to get automatic dark mode for all components.

This is a two part series:
1. Implementing dark mode
2. Designing dark mode

Introduction: Dark mode — what is it?

Dark modes emit low levels of light while maintaining a high standard of usability.

Source: Material.io¹

You can guess it from the quote of the googles material design documentation, it is simply a dark theme. With a color palette that consist mainly of black and greys. The occasional desaturated accent color brings your brand back into the product.

The resulting lower levels of light can result in improved battery performance, reduced eye strain and better accessibility.

Should dark mode be low or high contrast?

There is some confusion around dark mode and high contrast themes. Generally both is fine. As long as the foreground to background contrast passes WCAG ratios².