A dark version of a website needs more design work than changing the page background and hoping the logo takes the hint.
The colors have to perform the same jobs on different surfaces. Text must remain readable, controls recognizable and images understandable. If the site offers a choice, the preference also needs to work predictably across the visit.
A second mode can be worthwhile for the audience, but it is another experience to maintain. A small website shouldn’t adopt it simply because the presentation looks rather handsome after the lights go down.
Decide whether a second mode serves a real need
Look at the task and the people using the site. A portal used regularly for extended work may present a different case from a short promotional page.
Nielsen Norman Group’s 2023 research found varied preferences and highlighted that users often think about dark mode through their device settings.1 That supports considering a person’s existing preference, rather than declaring one mode universally superior.
It does not establish that every site needs both, or that dark mode automatically improves comfort and accessibility for everyone.
I would put the proposal alongside the other work the audience needs. If people are struggling to find a service or complete a form, the second palette probably isn’t the first intervention.
Rebuild the palette around its roles
For a fictional client portal, begin with the colors used for text, page surfaces, panels, actions and feedback. Give those decisions clear roles before choosing the dark equivalents.
This is where a shared design system helps. The same functional role can use a different value in each mode without asking every component to invent a solution.
Keep text and actions legible in their actual combinations
A brand color that works as text on white may become difficult to read on a dark panel. A color used for a filled button may need another treatment for an ordinary text link.
Check the actual foreground and background pairings against the relevant contrast requirements. Include supporting text, placeholders where used, disabled states and focus indicators.
Do not rely on color alone to distinguish success, warning and failure. Labels and other appropriate cues need to carry the meaning as well.
A warning that disappears into the brand palette is impressively consistent and otherwise unhelpful.
See the brand and website we built for Tracy Nagle Immigration Law, from a standing start.
Give panels a visible relationship to the page
Dark surfaces can make elevation harder to express through the same shadows used in a light design. Cards, menus and dialogs still need boundaries and a clear hierarchy.
Try changes in surface value, borders and spacing where they make the relationship understandable. Test the focused and open states, not only a static dashboard.
The person should be able to identify which panel is active and which content belongs behind a dialog. Atmosphere shouldn’t require them to conduct a small archaeological dig through the layers.
Review images rather than inverting them indiscriminately
A logo may need an approved light version. A transparent illustration may contain details that vanish against a dark surface. A product image on a white background may need a considered surrounding treatment.
Photographs generally need to remain accurate representations of their subject. A broad inversion effect can change the information the image carries.
For the sample portal, inspect real uploaded content as well as the carefully prepared design assets. A system that looks coherent only with three selected images will have a fairly short period of perfection.
Make the preference behave like a choice
The visual design and implementation need to agree about which mode appears initially, what an explicit selection means and how the interface communicates that state.
Josh Comeau’s dark-mode tutorial explores these implementation concerns. Its older framework-specific code needs adaptation; the enduring question is how to avoid showing one theme before abruptly switching to another.
Keep the control and the displayed mode in agreement
The sample portal could offer light, dark and a system-following option if those choices fit the product. Explain the selected state clearly and make the control usable with a keyboard.
Remember an explicit choice according to the application’s agreed behavior. If the system preference changes, the system-following mode should respond as intended. A user override should not become a setting the website continually negotiates back.
Related read: Your brand palette needs to work when colors are harder to tell apart.
Test initial loading, navigation and a return visit. Also inspect embedded forms and third-party components, which may not automatically follow the site’s color system.
A good review uses the same tasks in both modes. Read a detailed page, complete a form, encounter an error and open a menu. The dark version should carry the same information and control with its own considered treatment.
When it does, the brand feels adaptable and the person gets a useful choice. We can enjoy the mood lighting without asking it to do the entire design job.
A night mode that follows the sunset
Not every darker look has to be a dark mode. For South Creek Santa, we built something more playful: a night mode for the homepage scene that follows the sky over South Creek, rather than a setting on the visitor’s phone.
The hero illustration runs on South Creek’s own clock, so everyone sees the same sky at the same moment. In the morning the sun climbs over the hills and the dawn colors warm into full daylight. Early in the evening it sets again, the sky deepens, the stars come out, the moon takes over and the windows of the little houses glow until sunrise.
The lessons from this article still applied. As the sky changes, the headline switches between light and dark lettering, whichever reads more clearly, and the festive red adjusts until it keeps enough contrast against the sky behind it. The mood lighting changes; the reading stays easy.
You don’t have to wait for sundown to see it. On southcreeksanta.com, tap the date in the eyebrow above the hero headline to step through sunrise, morning, midday, sunset and night. Tap once more after night to return to the current time.
South Creek Santa is a community project, and we were proud to build it for the community. It is a happy reminder that a website can be useful and still keep a little magic in it.