A member texts your senior pastor at 10:14 p.m. asking for the link to Sunday's sermon notes. She opens it in bed, phone brightness already dimmed. The page floods the room with a wall of white. She squints, closes the tab, and reads something else. That small friction repeats a hundred times a week on church websites we audit, and until recently the fix required either a heavy JavaScript toggle or a full second stylesheet. It does not anymore.
CSS now has a two-word function that solves the problem for most sites: light-dark(). Paired with a single color-scheme declaration, it lets you write one stylesheet that adapts to a visitor's operating system preference in real time, with no flash of the wrong theme and no library to ship. As of early 2026 it has full support in Chrome, Edge, Firefox, and Safari, which puts it firmly in the Baseline tier we recommend for church production sites.
Why this matters for ministry, not just design
Dark mode is not a trend. It is now the default reading environment for a large share of your audience. Younger adults set their phones to dark almost universally. Many older members do it deliberately after a cataract surgery or a migraine diagnosis. Late-evening Bible study, early-morning prayer, hospital waiting rooms — the moments when a person most needs your site are often the moments a bright white page is least welcome.
Beyond comfort, there is a hospitality argument. When a visitor opens your homepage and the page instantly matches the way the rest of their phone looks, something quiet and important happens: the site feels like it belongs to them, not like a poster shouting from across the room. That first impression is worth more than any hero image.
There is also a real accessibility gain. People with light sensitivity, low vision, or certain forms of dyslexia often report significantly better reading endurance on a dark background with warm-white text. Meeting that need is not a preference. It is the same welcome you extend when you offer large-print bulletins in the lobby.
The old way was painful
For years, offering dark mode on a church site meant one of three things. You wrote a full second theme with duplicated variables. You shipped a JavaScript toggle that swapped classes and had to guess the user's preference on first load, causing a jarring flash of the wrong colors. Or you did nothing and hoped no one noticed.
The old CSS media query approach helped, but it left every color variable defined twice:
:root {
--bg: #ffffff;
--text: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #f5f5f5;
}
}
For a site with fifty custom colors — brand gold, muted greens, hover states, focus rings, borders — that block grew into a maintenance burden that most volunteer webmasters quietly gave up on.
The new way is one line per color
light-dark() collapses each color pair into a single declaration. You tell the browser both values at once, and it picks the right one based on the visitor's setting.
html {
color-scheme: light dark;
}
:root {
--bg: light-dark(#ffffff, #121212);
--text: light-dark(#1a1a1a, #f5f5f5);
--gold: light-dark(#b78d3a, #d9b26a);
--link: light-dark(#7a1f1f, #e9a4a4);
}
body {
background: var(--bg);
color: var(--text);
}
The color-scheme declaration is the piece most teams forget. Without it, the browser will still render form controls, scrollbars, and the initial page background in light mode even if your custom CSS is dark. Adding color-scheme: light dark at the root tells the browser your page understands both, and it will style native elements accordingly. That prevents the momentary white flash between page load and stylesheet application — a small polish that turns out to matter enormously.
A few practical rules for church sites
We have deployed this pattern across a handful of ministry sites this year, and a short list of guidelines has emerged.
Test your donation page first. It is the single page where trust matters most and where a color misfire feels the most jarring. Give it dedicated attention before rolling the pattern across the whole site.
Do not simply invert your logo. Most church logos have a cross, a mark, or a wordmark whose meaning is tied to its color. Provide a proper dark-mode variant that keeps the mark recognizable rather than letting CSS filters mangle it. An img tag with a srcset and prefers-color-scheme media condition handles this cleanly.
Check contrast in both modes. A gold that reads beautifully on white can whisper illegibly against near-black. Use a tool like the WebAIM contrast checker and target at least 4.5:1 for body text in both modes.
Respect the user's choice. If you add a manual toggle, store it in a way that overrides the system preference only on your site, not across the browser. And make sure the toggle itself is reachable by keyboard.
Remember Scripture typography. Long passages benefit from a slightly warmer off-white (something like #efece4) rather than pure #ffffff on a dark background. It is closer to the color of a well-thumbed page and easier on tired eyes.
The quiet posture we are aiming for
There is a lesson in a feature like this. The best web work fades into the background, meeting people where they actually are rather than insisting they meet the site on its own terms. A page that shows up already tuned to the room a person is standing in is a small gift, and small gifts add up.
If your church or ministry site still forces every late-night reader into a wall of white, we would be glad to help. Most sites can adopt this pattern in an afternoon, and the payoff shows up the first evening someone opens the sermon notes without wincing.