> Blog post by Lokesh Saini
> Canonical (HTML): https://www.lokeshsaini.com/blog/five-dark-modes-later

I spent more time choosing the dark mode base color for my portfolio than I did on any single component. Five rounds. Each one looked reasonable until it didn't. Here is what each failure actually taught me.

## v1: The warm near-black that went muddy

I started with `#0F0D0B`. A near-black with just a whisper of warmth. In a blank browser window it looked fine.

Then I put my accent colors on top. The warm tint in the base amplified every warm hue stacked above it. Amber tags read orange. Orange borders read red. The whole page drifted toward muddy. The base was not neutral enough to get out of the way.

## v2: Leaning into the warmth made it worse

My instinct was to commit rather than hedge. If the base had warmth, own it. I pushed to `#221C16`, a proper espresso.

The problem: a visible hue in the base is multiplied by every surface built on top of it. Users scan the page as a whole, not individual components. The whole read as brown mode, not dark mode. Any hue you can name in a dark base is the wrong answer.

## v3: Cool ink had the same failure in the other direction

I overcorrected. Swung to a cool ink at `#20252D`.

Same logic, opposite result. The blue cast read as navy. The neutrals on top of it pulled blue. My design system accent colors, which are bold and saturated, fought with the tinted ground instead of floating above it. The hue direction does not matter. What matters is that there is no hue at all.

## v4: Technically neutral, but nowhere for shadows to live

I modeled `#141414` on several reference sites I respected. It is a very common dark mode base. Genuinely neutral.

My design uses thick borders and hard shadows: `box-shadow: 4px 4px 0 #000`. On a near-black background, black shadows disappear. There is almost no difference in luminosity between `#141414` and `#000000`. The shadows that give my cards dimension became invisible. The whole thing felt flat and cheap. The problem was not the components. It was that the ground left no room below the surfaces for depth to exist.

## v5: Lift the base, let shadows fall

The version that worked: base at `#1E1E1E`, surfaces stepping lighter in two tiers, borders in a visible grey, shadows staying pure black.

```css
--color-background: #1E1E1E;   /* base: lifted enough for shadows to read */
--color-surface-1: #2A2A2A;    /* first elevation */
--color-surface-2: #343434;    /* second elevation */
--color-border: #4A4A4A;       /* visible but not loud */
--shadow-md: 4px 4px 0 #000;  /* black shadow lands against grey ground */
```

Elevation comes from the surface steps. Depth comes from the hard black shadows, which now have genuine contrast against the grey ground. The base is dark enough to read as dark mode. It is light enough that black shadows do not disappear into it.

## What these five rounds taught me

**Zero hue in the base.** If you can name the color ("warm", "cool", "blue"), it is wrong. A dark mode base should read as no color at all. The second it has a personality, it forces that personality onto everything built on top of it.

**Dark mode is its own palette, not an inversion.** You cannot take light mode colors and flip them. Light mode puts dark text on a light background. Dark mode needs a different elevation logic: lighter surfaces sit higher, darker surfaces sit lower. The whole system works differently.

**Lift the base off true black.** This one surprised me. Pure black seems like the obvious choice. But if your design uses black shadows, those shadows need somewhere to fall. A ground at `#1E1E1E` gives them contrast. A ground at `#0A0A0A` swallows them.

**Test against your accent colors, not in isolation.** Every base looked fine before I added components. The base only fails in company. If you are evaluating a dark mode base color, put your most saturated accent on top of it first.

## The diagnostic

When a dark theme feels off and you cannot place why: stop adjusting components. Go back to the base color. Check its hue (should be none) and its lightness (should be high enough that black shadows register). Nine times out of ten, that is where the problem lives.

The components are not wrong. The ground is.