Dark mode

Dark mode is a UI color scheme: dark surfaces, light text, and adjusted brand colors. Many sites follow the device setting (prefers-color-scheme) so the page matches what the person already chose in iOS, Android, or their laptop.

It is more than inverting black and white. Contrast still has to meet WCAG ratios, or pale gray on charcoal becomes unreadable. Brand blues and golds that work on white often need a different token in the dark palette — the same idea as design tokens and CSS variables. Done well, it can ease eye strain at night and, on OLED screens, use a bit less power. Done as a pure invert, images, shadows, and form fields fall apart.

A real-life example of dark mode

Someone opens your restaurant site in bed. A full-white page hits like a flashlight. Respecting their system dark preference is the courtesy. The trap: your signature gold headline that looked elegant on cream now vanishes on #121212. That’s an accessibility miss, not a style win.

Offer a real dark theme (or follow the OS), test text and CTAs for contrast, and keep components consistent. How-to and pitfalls: A Simple CSS Trick for Dark Mode and The Dark Side of Dark Mode.