Build Real Dark Mode That Is Not Just an Inverted Color Sheet

Most dark modes are bad, and they are bad in the same way: someone took the light theme and inverted it. White backgrounds became pure black, black text became pure white, the shadows that gave the light UI its depth were left in place doing nothing, and the saturated brand blue that looked sharp on white now glows and vibrates against the dark. The result feels like an afterthought because it is one. A real dark mode is not the light mode flipped. It is a different design system, built on different rules, and the difference is immediately visible to anyone who has used a good one.

Dark mode done right is comfortable to read for an hour, communicates hierarchy clearly, and feels as intentional and premium as the light theme. Getting there takes three specific recalibrations: how you build backgrounds and depth, how you handle color saturation, and how you manage text contrast. Skip any one and the theme reads as the inverted afterthought users can spot in a second.

Never use pure black, and never use shadows for depth

The first instinct, and the first mistake, is to make the background pure black. Pure black creates the maximum possible contrast with almost any foreground, and that maximum contrast is the problem. Bright text on pure black "blooms," appearing to glow, and edges seem to vibrate. It is fatiguing to read and it looks cheap.

The fix is a dark gray base, not black. The recommended base background sits around 8 to 12 percent lightness with a slight desaturation and a subtle cool undertone, something near a neutral-cool dark or a fraction warmer. It reads as black to the eye but without the harsh blooming that true black produces.

The second instinct, and the second mistake, is to keep using drop shadows to show elevation. Shadows work in light mode because a shadow is darker than the surface it falls on. In dark mode, there is barely anything darker than the surface, so shadows are nearly invisible and the depth they were providing disappears.

Dark mode expresses elevation through lightness, not shadow. Higher surfaces are lighter. A clean elevation scale looks like this:

• Base background at roughly 10 percent lightness.
• First elevation (cards, raised surfaces) at 14 to 16 percent lightness.
• Second elevation (popovers, modals, menus) at 18 to 20 percent lightness.

Each step of three to four lightness points creates a clearly readable layer. A card is lighter than the page; a modal is lighter than the card. The eye reads "this is closer to me" from the brightness, exactly the way shadows communicated it in light mode. This single principle, elevation through surface lightness rather than shadow, is what separates a dark theme with real depth from a flat inverted mess.

Desaturate your colors, or they will scream

The colors that looked crisp on a white background become aggressive on a dark one. A saturated blue or cyan that read as clean and corporate in light mode glows and vibrates against the dark, straining the eye and pulling focus away from content. This is not a subjective taste issue; it is how the eye responds to saturated color against a dark field.

The fix is to pull saturation down, toward pastels. Desaturated colors provide sufficient contrast against a dark background while avoiding the visual vibration that causes eye strain, which is why Material Design and every serious dark theme leans on muted, pastel-leaning colors rather than the vivid saturated ones that work in light mode.

The amount of desaturation depends on the hue, because hues are not equally intense on dark backgrounds:

• Blues and cyans are the most visually intense on dark, and typically need a 20 to 30 percent saturation reduction.
• Reds and oranges hold their perceived intensity better and usually need only 10 to 15 percent reduction.

This means you cannot simply apply one global desaturation. You recalibrate per hue, pulling the aggressive blues down hard and the warmer colors down gently, so every color sits comfortably against the dark rather than fighting it. Your brand blue in dark mode is not the same blue as in light mode, and it should not be. Maintaining two coherent sets of color values across themes is exactly what a design token system that survives five products and three rebrands is for.

Pull back from pure white text

The last recalibration is text. The reflexive choice is pure white text on the dark background, and it is too much. Pure white against a dark surface produces a harsh, high-glare contrast that is tiring over a long reading session, the same blooming problem the dark-gray background was meant to avoid, now coming from the text side.

The fix is to step text down from pure white. Use a light gray or a high-opacity white rather than full white for body text, reserving the brightest values for the elements that genuinely need the most emphasis. Material Design's guidance is to keep dark surfaces paired with full white at a very high contrast ratio (around 15.8 to 1), and then to use transparent whites and light grays for everything below the top emphasis level so the page does not glare uniformly. The result is a hierarchy of text brightness: the most important text is brightest, secondary text is dimmer, and nothing is so bright it strains the eye.

Note that the goal is not low contrast. Dark mode text still needs to clear accessibility contrast minimums comfortably, which is the same discipline as hitting WCAG contrast on every screen without wrecking your brand palette. The goal is to avoid the specific harshness of pure white while keeping text easily readable, which a well-chosen light gray does cleanly.

Why this is design work, not a toggle

The reason a good dark mode feels like a different product from a bad one is that it genuinely is a different design system. You are not flipping values; you are rebuilding hierarchy on new rules. Depth comes from lightness instead of shadow. Color comes from desaturated tones instead of saturated ones. Emphasis comes from a brightness hierarchy instead of pure black-on-white contrast. Each of these is a real decision, made per surface and per color, and the sum of those decisions is what makes the theme feel considered.

This is the level of care we put into the websites and web apps we build, because a dark mode is one of the fastest ways a user judges whether a product was crafted or thrown together. It is the same instinct behind visual pickers users can see instead of icons listed by name and the micro-interactions that separate a premium product from a prototype: the considered choice over the default one. A premium, readable dark theme signals attention to detail in the same breath that a harsh inverted one signals the opposite. The work is not glamorous, recalibrating saturation per hue, tuning elevation by a few lightness points, stepping text back from pure white, but it is exactly the kind of detail that adds up to a product that feels finished.

The test is simple. Use your dark mode for a long reading session. If your eyes are tired, the text is too bright or the background is too black. If you cannot tell a card from the page or a modal from a card, your elevation is doing nothing because you are still relying on shadows. If a color jumps out and vibrates, it needs desaturating. Fix those three things and your dark mode stops being an inverted afterthought and becomes what it should be: a theme as deliberate, comfortable, and premium as the light one, built on rules of its own.