Designing for Dark Mode with Material Design 3

Dark mode is no longer optional. Here is how we implement it properly using Material Design 3 color tokens.

The Problem with Hardcoded Colors

Most developers do this:

.card { background: #1e1e1e; }

This breaks immediately when you need a light mode or want to tweak your palette.

The MD3 Way

.card { background: var(--md-sys-color-surface-container); }

Define your tokens once, switch themes by swapping token values. This is the foundation of the Oxbit design system.