Choosing a Dark Mode Template for Late Night Readers

A reader who runs a Blogger site about weekly football results sent me his analytics last spring. Almost 60 percent of his visits arrived between 9pm and 2am. His template was bright white with pale grey text. On a phone in a dark room, it was like opening a fridge door in the middle of the night. His average time on page was 38 seconds.

He switched to a dark template in April. By June, the average was just over a minute and a half. Nothing else on the blog had changed. That is an unusually clear result, but it matches what I have seen on other blogs whose readers mostly arrive late in the evening.

Who actually needs a dark template

Dark mode is not right for every blog. A recipe blog read in a bright kitchen, or a craft blog read on a laptop on a Sunday afternoon, usually reads better on a light background. The case for dark mode is strongest when your analytics show a large share of visits in the evening or late at night.

Some niches lean heavily that way. Sports blogs peak after evening matches. Gaming blogs peak late. Blogs that track weekly draws and pool results, for readers who check numbers from sites like ankertoto after the evening results come in, are almost entirely a night time audience. If your readers are mostly on phones in dim rooms, a bright white page is working against you.

The quickest way to check is the hourly report in your analytics. If more than 40 percent of sessions start after 8pm local time, dark mode is worth testing.

What makes a dark template readable

Most free dark Blogger templates get the basic idea right and the details wrong. The details are what decide whether people stay.

Element	Common mistake	What works
Background	Pure black, #000000	Very dark grey, around #121212 to #1a1a1a
Body text	Pure white, which glares	Soft off white, around #e0e0e0
Links	Default bright blue, hard to read on dark	A lighter, less saturated tone
Images	Bright images with white borders	No borders, slightly reduced brightness
Tables	Borders invisible on dark backgrounds	Subtle lighter row shading instead of lines

Pure black with pure white text is the classic error. The contrast is so high that the text appears to shimmer, especially for readers with astigmatism. A dark grey background with slightly softened text is much easier on the eyes over a long read.

The advice I disagree with: just add a toggle

The popular recommendation is to keep your light template and add a dark mode toggle button, so each reader can choose. It sounds like the best of both worlds.

On Blogger, I think it is usually the worst of both. A toggle needs JavaScript to switch styles and remember the choice, which adds weight to every page. Many free toggle scripts load the light page first and then switch, so dark mode readers get a bright flash on every visit. And most readers never notice the toggle exists. In the blogs I have checked, fewer than one in twenty visitors ever clicks it.

A better option on modern browsers is to let the reader's own device decide. A few lines of CSS using the prefers-color-scheme media query will show your dark styles automatically to anyone whose phone is already set to dark mode, with no script and no flash. If your audience is overwhelmingly night time readers, a template that is simply dark by default is even simpler.

Switching templates without losing your work

Changing a Blogger template can wipe gadgets, custom CSS and settings if you are not careful. Before you switch:

Download a full backup of the current template from the Theme page.
Copy any custom CSS into a separate text file.
Take screenshots of your Layout page so you can rebuild the gadget order.
Test the new template on a second, private blog first if you can.

What to back up before changing your Blogger theme covers each of these steps in more detail. It is ten minutes of work that saves hours of rebuilding.

Checking the result on a real phone

Do not judge a dark template on your desktop monitor in daylight. Judge it the way your readers see it: on a phone, at night, with the room lights off. Check three things:

Can you read a full paragraph without squinting or feeling the glare?
Are links clearly different from body text?
Do any images or ads suddenly flash bright and break the page?

Ads are the most common problem. Many ad units are designed for white pages and appear as bright rectangles on a dark background. If your ad network allows it, choose dark or transparent ad styles. If it does not, consider placing ads lower on the page. The same mobile checks apply here as in why your blog looks different on mobile than on desktop.

The football results blog I mentioned at the start now uses a dark grey background, soft white text and muted green links. It loads without a script, it looks the same on every visit and its readers stay long enough to read the whole weekly roundup. You can find more layout decisions like this in our Blog Design section.