Why We Chose Dark Mode and What It Took

Every designer who builds a dark mode site will eventually hear the same question: why? The usual answers are well rehearsed. It saves battery on OLED screens. Users prefer it. It is easier on the eyes at night. All of these are true, or at least partially true. None of them were the reason we chose it for Duelling Hares.

We chose dark mode because the aesthetic is the message. Duelling Hares is a workshop, not a showroom. We wanted the site to feel like a bench lamp cutting through a dark studio, pulling your attention to the work itself. A light theme would have diluted that. The background is not decoration. It is context.

The Palette

Three colours carry the entire design:

• #1a1a1a — The base. Not pure black (#000000), which feels aggressive and creates too harsh a contrast against text. A very dark charcoal instead. It reads as black without the strain.
• #d4a843 — The accent. A warm gold, somewhere between brass and honey. It handles links, highlights, and the occasional pull quote. Warm tones work better than cool ones on dark surfaces because they do not fight the background for dominance.
• #f0ece2 — The body text colour. This is the critical choice. Pure white (#ffffff) on a dark background produces a glow that tires the eye. We landed on a warm off-white, slightly cream, slightly parchment. It sits comfortably on #1a1a1a without vibrating at the edges.

Why Warm Whites Beat Pure White

The WCAG contrast ratio between #ffffff and #1a1a1a is 18.05:1. Technically excellent. But technical excellence and visual comfort are not the same thing. That extreme ratio produces halation, where bright text appears to bleed into the dark background. Readers notice it on long-form content. They stop reading, though they may not know why.

Dropping to #f0ece2 brings the ratio down to roughly 15.4:1. Still well above the WCAG AAA minimum of 7:1 for normal text. But the perceived softness is significant. The text reads as present rather than projected. That distinction matters on a site built around reading.

The Trade-offs

Dark mode is not without cost. Images with light backgrounds look awkward. Certain embeds and iframes ship their own light styles that clash with the surrounding page. Form inputs need explicit styling or they default to white boxes floating in a dark void. Every one of these required a decision and custom CSS to resolve.

Accessibility also demands more attention. Small text needs a higher contrast ratio to remain legible on dark surfaces. Font weight and line height become more important, not less. We bumped body copy to a minimum of 18px with generous leading, not because the design demanded it, but because dark mode does.

There is also the content authoring problem. Writers paste in content formatted for light backgrounds by default. White text on a white embedded table is invisible. We catch these in review, but it is an ongoing tax on every new post.

The Result

The site looks intentional. That is the highest compliment a design can receive. The palette is not a compromise or a preference. It is a statement about what this place is for: focused, considered work done in the company of good light and quiet attention. The dark background disappears. What remains is the content.

3 min read