A few years ago, one of our clients at Kosmoweb — a Prague-based fintech startup — asked us to add a dark mode toggle to their dashboard. We figured it would take a couple of days. It ended up taking two weeks, because we quickly discovered that dark mode is not simply inverting colors. It demands its own design language, its own palette, and careful attention to every element on the page. That experience changed how we approach every project since.
What's the Deal with Dark Mode?
Dark mode has moved from a niche preference to a mainstream expectation. Operating systems, browsers, and major applications all offer it, and users have grown accustomed to switching between light and dark depending on their environment. For many people, dark mode reduces eye strain during late-night browsing sessions. For others, it simply looks more refined.
From a design standpoint, dark mode introduces constraints that force better decision-making. You cannot rely on subtle gray borders or faint drop shadows the same way you would on a white background. Every element needs to earn its place and remain legible against a dark surface. The result, when done well, is an interface that feels intentional and polished.
Getting Colors Right
The most common mistake we see is reaching for pure black (#000000) as the background color. While it seems like the logical opposite of white, pure black creates harsh contrast that fatigues the eyes over extended reading sessions. Google's Material Design guidelines recommend dark gray tones — something in the range of #121212 to #1E1E1E — and our experience confirms this.
For accent colors, saturation needs to come down. A vibrant electric blue that pops beautifully on a white background can feel aggressive and glaring on dark surfaces. We typically reduce saturation by 15–25% and increase lightness slightly for dark mode variants. During a recent project for an e-learning platform, we created a dedicated color token system where every accent had both a light-mode and dark-mode value, mapped through CSS custom properties.
Elevation also works differently. In light mode, you use shadows to suggest depth. In dark mode, shadows disappear into the background. Instead, you create elevation by using progressively lighter surface colors — a card might sit at #1E1E1E on a #121212 background, with a modal dialog stepping up to #2C2C2C.
Font Matters
Typography behaves differently against dark backgrounds. Light text on a dark surface tends to appear slightly bolder than the same text on white, an optical illusion known as halation. This means that if your light-mode body text uses a font weight of 400, you might want to consider dropping to 350 or adjusting letter spacing in dark mode to maintain the same visual weight.
Font color matters too. Pure white (#FFFFFF) text on a dark background creates the same harsh contrast problem as pure black backgrounds. We generally use off-white values — #E0E0E0 for body text and #FFFFFF reserved only for headings or high-emphasis elements. This creates a natural hierarchy without straining the reader.
Testing
Testing dark mode requires more than a quick toggle. We build a checklist for every project: check every page state, including empty states, error states, and loading skeletons. Verify form elements — input fields, dropdowns, checkboxes — since these often inherit browser defaults that look fine in light mode but break visually in dark.
We also test across devices and screens. An OLED display renders dark mode differently than an IPS LCD panel, because OLED pixels actually turn off for true blacks, creating sharper contrast boundaries. During one project for a photography portfolio site, images that looked stunning on our studio monitors appeared washed out on a client's AMOLED phone because the surrounding darkness shifted the viewer's perception of the image brightness.
Automated visual regression testing tools like Percy or Chromatic can catch unexpected dark-mode regressions when you push updates. We integrate these into our CI pipeline so that every pull request generates comparison screenshots for both modes.
Don't Forget About the Light
It might sound obvious, but once teams start designing for dark mode, they sometimes let the light theme slip. Both modes deserve equal attention. We treat them as two expressions of the same design system, not a primary and secondary version.
The transition between modes should feel seamless. When a user toggles from light to dark, the layout, spacing, and content hierarchy should remain identical — only the surface colors and text tones shift. If toggling modes makes the user feel like they have landed on a different website, something has gone wrong.
Final Touches
Respect the user's system preference by default using the prefers-color-scheme media query, but always provide a manual toggle. Some users prefer dark mode everywhere except certain websites, and giving them control builds trust.
Store the preference in local storage or a cookie so it persists across sessions. Nothing frustrates a user more than choosing dark mode and having the site flash white on the next visit before the JavaScript kicks in. For server-rendered sites, we use a cookie-based approach so the correct theme loads on the first paint, eliminating that flash entirely.
At Kosmoweb, we have come to see dark mode not as an afterthought or a toggle feature, but as a fundamental part of interface design. The discipline it requires — precise color choices, thoughtful typography adjustments, rigorous testing — ultimately makes both modes better.