Blogging in the dark
I have both my laptop and phone set to always use dark mode. It's my preferred default, even if I often appreciate blogs that stick to a light theme. Some of my projects are done that way too.
What I have noticed quite a few times, though, is that some bloggers simply hardcode the background color to always keep it light. The problem is that the dark mode text, which naturally has a light color, stays the same. This makes it close to impossible to read for someone using dark mode.
I last noticed this just a few minutes ago, but couldn't find a way to contact the blogger. Hence this post. Here's how that post looked in dark mode:
A blog post title
This text is quite hard to read for dark mode readers, and the longer you read, the more it strains your eyes.
Background stuck at #fff. Dark mode text (#ddd) applied. Nearly invisible.
A blog post title
This text, on the other hand, is easy to read regardless of your system settings. No eye strain, no squinting.
Dark mode block removed. Light colors stay consistent for all readers.
Enabling reader mode in the browser solves this, of course, but it's not optimal to rely on readers doing that.
If you want your theme to always use light mode, the fastest and easiest way is to remove the dark mode tokens (example from Bear's default theme):
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
Another way is to use the light mode colors for dark mode too. Then it's easy to change if you ever decide to make a dark mode palette in the future.
Happy blogging, no matter mode.