Design Tokens
Design & UXThe named values behind a design system — colors, spacing, font sizes, radii — stored as variables so a single change updates every screen instead of every…
Design & UX
Dark Mode
Dark Theme
Lukas HorvathCo-founder
What is Dark Mode?
Dark mode is an alternate color theme for a website or app where backgrounds are dark and text is light, designed for low-light environments and for users who prefer it. A modern dark mode design isn't just inverted colors — it's a separately tuned palette where contrast, depth, and color choices are adjusted so the interface reads well on a dark background. Most operating systems now expose the user's preference, and well-built sites respect it automatically.
Why it matters
A growing share of users — especially developers, designers, and anyone working at night — keep their devices in dark mode permanently. A site that ignores that is a site that screams white at them at midnight. Dark mode used to be a nice-to-have. For products targeting technical or design-savvy buyers, it's now expected. The trap is teams who treat it as a feature added at the end. Inverting colors after the fact almost always looks broken. The right move is to bake dark mode into the color system from the start — so flipping the theme is a token change, not a redesign.
How it works
The team defines two palettes in design tokens — light and dark — and binds semantic tokens (like "color-background-default" or "color-text-primary") to different primitives in each theme. Colors are tuned, not just inverted: a true black background is rarely right, so designers usually use a near-black like #0A0A0A and adjust brand colors for contrast against the dark background. CSS detects the user's preference with the `prefers-color-scheme: dark` media query and applies the matching tokens automatically. A toggle in the UI can override the system setting and store the choice. Engineers test contrast on both themes against WCAG AA. Done right, switching themes is instant, no element looks like an afterthought, and every component looks deliberate in both light and dark.
Related terms
Color System
Design & UXA defined palette of brand and UI colors — with rules for when and how to use each one — so a product stays visually consistent over time and doesn't quietly…
Design System
Design & UXA shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…
User Interface
Design & UXThe visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…
Accessibility
Design & UXDesigning and building a website so people with disabilities — vision, hearing, motor, cognitive — can actually use it, not just open it, and so the rest of…
Responsive Design
Design & UXDesigning a website so it adapts to every screen size — phone, tablet, laptop, ultrawide monitor — instead of forcing one fixed layout that breaks the moment a…