WEB & DESIGN

Dark mode,
without surprises.

A dark theme is a promise to follow the reader's choice. Keeping that promise takes a few small decisions.

Start from the system

Most people choose light or dark once, for every app. A page that reads that setting feels at home immediately. The prefers-color-scheme media query is enough to begin, and it costs nothing to support.

Offer three choices, not two

A manual switch is useful, but a toggle with only light and dark quietly overrides the system setting forever. A third option, “system”, lets the reader hand control back. Remember the choice locally, and keep the page usable if it cannot be stored.

Check contrast twice

Colours that work on white often fail on a dark background. Links need a lighter accent, borders need more weight, and muted text needs to stay readable. Check every pair of foreground and background in both themes.

Avoid the flash

Apply the theme before the page paints, so a dark page does not blink white while it loads. A short script in the head, or styles that rely only on the media query, keep the first frame calm.

An open notebook, one small idea at a time.