Dark mode

Dark mode is the most common theming use case in modern design systems: a second visual treatment that swaps light surfaces for dark while preserving contrast, hierarchy and brand. Done right, it's a token swap; done wrong, it's a redesign — usually because components hard-coded colours instead of using semantic tokens.

The accessibility bar matters here. Dark surfaces aren't simply inverted lights — saturated brand colours often need desaturating to pass WCAG contrast on dark backgrounds, and pure black is harder on the eye than a near-black grey. Material 3's dark theme guide and the WCAG contrast docs are the right starting points; our walkthrough of Figma → Craft CMS covers how dark themes ship through a token pipeline.

Related: Theming · Semantic tokens · Design tokens · Accessible design