Designing for Light and Dark Themes

You have probably felt it without naming it. You open an app late at night and the screen blasts white light into a dark room, and you wince and reach for the brightness slider. Then you switch the same app to its darker look and your shoulders drop a little. That small moment of relief is the reason designing for both light and dark themes has quietly become a normal expectation rather than a clever extra. People want the website to fit the room they are sitting in.

This guide is about building a site that looks deliberate in both modes, not one where dark mode is a hasty afterthought with grey text floating on near-black. We will cover how themes actually work under the surface, how to choose colours that translate between them, what to do with images and shadows, the accessibility traps to avoid, and how to test the whole thing without losing your weekend. You do not need to write code to follow along, just to understand the choices that make a theme feel finished.

What we really mean by a theme

A theme is simply a coordinated set of colours and surfaces that the whole site shares. A light theme uses dark text on light backgrounds. A dark theme flips that, using light text on dark backgrounds. The trick is that you are not designing two unrelated sites. You are designing one system with two outfits, and the goal is that both outfits look like they belong to the same brand.

If you want a fuller look at the case for offering a darker option in the first place, the trade-offs are laid out well in dark mode websites. This article assumes you have decided to support both and now want them to feel polished rather than bolted together.

Think in tokens, not fixed colours

The single most useful idea in theming is the colour token. Instead of saying "this heading is dark navy," you say "this heading uses the primary text colour," and then you define what that token means in each theme. In light mode the primary text token might be near-black, and in dark mode it becomes near-white. Because every heading points at the same token, switching themes updates them all at once.

This naming approach keeps the two themes in step and stops you chasing stray colours around the site. You typically need tokens for backgrounds, surfaces like cards, primary and secondary text, borders, and a small set of accent and state colours such as success and error. Get those names right and the rest of the work becomes filling in two values per token rather than redesigning every screen.

Keep one brand colour anchored

Your primary brand colour, the one people associate with you, should stay recognisable across both themes. It may need a slightly lighter or more saturated version in dark mode so it does not disappear, but the family should feel the same. This is where the wider thinking in fonts and colours for your website and the brand-level guidance in brand typography pay off, because a consistent identity makes both modes feel intentional.

Dark mode is not just inverted light mode

The most common mistake is taking a light design and literally inverting every colour. Pure white text on pure black is harsh and can make text shimmer or feel like it is vibrating, an effect known as halation. Real dark themes are gentler. Backgrounds are usually a very dark grey rather than absolute black, and text is an off-white rather than blinding white. The contrast is still strong, just not punishing.

Surfaces also behave differently. In light mode you separate a card from the background with shadow. In dark mode shadows barely show, so you separate surfaces by making them slightly lighter than the background instead. A card that floats above the page is a touch brighter, not darker. Getting this layering right is what makes a dark interface feel like it has depth rather than looking flat.

Mind your contrast in both directions

Accessibility is where many dual-theme sites quietly fail. A grey that reads perfectly on a white background can become unreadable on a dark one, and the reverse is also true. You have to check contrast separately in each theme, not assume that passing one means passing the other. Widely used accessibility guidelines set minimum contrast ratios between text and its background, and meeting them in both modes is non-negotiable if you want everyone to be able to read your content.

This is the same care that underpins web accessibility basics. Pay particular attention to secondary text, placeholder text in forms, and disabled states, which are the elements most likely to drift below the threshold when you flip themes.

Handle images, logos and icons thoughtfully

Photos usually survive a theme switch, but they can look like glowing rectangles against a dark page. A subtle border or a slight dimming of very bright images helps them sit more comfortably. Logos and icons need more attention. A logo designed for a white background may vanish or look heavy on a dark one, so you often need a light variant of the logo for dark mode.

Icons drawn as simple lines or shapes are easiest because you can colour them with a token, so they recolour automatically. Detailed full-colour illustrations are trickier and sometimes need a second version. This is part of why simple, flexible imagery tends to age better, a theme explored in choosing website images.

Respect the visitor's choice

Most modern devices let people set a system-wide preference for light or dark. A well-built site can detect that preference and start in the matching theme, so a visitor who keeps their phone in dark mode lands on your dark theme automatically. That small courtesy makes the site feel attentive from the first second.

It is also good practice to offer a manual toggle so people can override the default if they want, and to remember their choice on future visits. The toggle should be easy to find but not shouty, often tucked in the header or footer. Done well, this respect for preference is exactly the kind of detail that contributes to a professional-looking website.

Keep the layout stable across themes

Switching themes should change colours and surfaces, not move things around. If your dark theme uses different spacing or font sizes, the site will feel like two different products. Lean on a consistent grid and layout system so the structure stays identical and only the palette changes. The visitor should feel like they dimmed the lights in the same room, not walked into a new building.

Watch the in-between states

Hover effects, focus rings, selected items and loading states all need defining in both themes. These are easy to forget because they only appear on interaction, yet they are exactly where a half-finished theme shows its seams. A button that looks great at rest but has an invisible hover state in dark mode undermines the polish of everything around it. The same attention to detail that improves visual hierarchy applies to these quiet moments too.

Do not let a second theme slow the site

Supporting two themes should not double the weight of your site. A common slip is loading two full sets of images, icons or styles and shipping both to every visitor, which quietly bloats the page and makes it sluggish. The better approach is to share as much as possible between the themes and only swap the handful of things that genuinely differ, such as a logo variant or a few colour values. The structure, the layout and most of the assets stay the same.

It is also worth avoiding a jarring flash when the page first loads, where a visitor briefly sees the wrong theme before the correct one snaps into place. Handling the preference early, before the page paints, keeps the experience smooth. Treating theming as part of overall speed rather than a bolt-on is the same mindset behind a site that feels fast as well as considered, and it pays off as your site grows over time.

Test like a real person would

The only way to know your themes work is to actually use them. View every important page in both modes, on a phone and a larger screen, in a bright room and a dim one. Look specifically at forms, tables, alerts, and any place where colour carries meaning. Ask a couple of people who were not involved to flip the toggle and tell you if anything looks broken or hard to read.

Build this check into your wider process rather than treating it as a final scramble. If you are planning a refresh, theming sits naturally alongside the kind of forward-looking thinking in future-proofing your website. And if you would like help getting both themes to feel genuinely finished, you can always reach out.

Frequently asked questions

References

1. W3C. "Web Content Accessibility Guidelines (WCAG)." w3.org.
2. Nielsen Norman Group. "Dark Mode vs. Light Mode." nngroup.com.
3. Apple. "Human Interface Guidelines: Dark Mode." developer.apple.com.