How to Add Automatic Dark Mode to WordPress Websites

Update: The Twenty Twenty-One by WordPress comes with color mode switcher. The feature is opt-in and supported in most operating systems, including Android, iOS, macOS, Windows 10, as well as most Linux distributions. If you have Dark Mode enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system’s preferences.

So if you’re new to tweaking CSS, you don’t have to follow my guide. You could just install the latest version of Twenty Twenty-One.

But, if you are determined, continue reading this blog post.

Now that prefers-color-scheme is available for modern web browsers, you can use it to enable an automatic dark mode for WordPress websites. It is a CSS media feature used to detect if the user has requested the system to use a light or dark color theme.

Meaning, you can define a dedicated style for each color scheme. And the browser will display the specific color scheme of the website according to the user’s system settings.

The recommended way to use it

@media (prefers-color-scheme: dark) {
body  {
background-color: #121212;color: #fafafa;}}
@media (prefers-color-scheme: light)  {
body {
background-color: #fafafa;color: #121212;}}

Refer to https://developer.mozilla.org/

But I use something straightforward like this

@media (prefers-color-scheme: dark) {
body {
background-color: #121212;color: #fafafa;}}

I prefer this approach since I’m confident with my default color combination. Take a look at the styling I use for dark mode.

@media (prefers-color-scheme: dark) 
{
body, .page-hero {
background-color: #121212;
}
.entry-content, .entry-summary, h1, h2, h3, h4, .main-title, .main-title a, .main-title a:hover, .main-title a:visited, .wp-caption .wp-caption-text, br, .entry-title a, .entry-title a:visited {
color: hsla(0,0%,100%,.75);
}
top, .generate-back-to-top {
color: hsla(0,0%,100%,.75);
background-color: #525252;
text-decoration:none;
}
top, .generate-back-to-top:hover {
color: hsla(0,0%,100%,.75);
background-color: #72b1db;
text-decoration:none;
}
*.lgc-grid-50:hover {
background: #72b1db;
color: hsla(0,0%,100%,.75);
}
}

~~I use the GeneratePress framework for WordPress.~~ I use a modded version of WP’s Twenty Twelve theme now.

How to Implement Dark Mode for WordPress Websites

STEP 1: Understand and take a note of your default style.css or color options. It varies according to the WordPress theme you’re using. Make sure you don’t leave out tiny details such as the color combination for hyperlinks, menu elements, footer, code, blockquote, etc.

STEP 2: Adjust colors. You can add the prefers-color-scheme CSS media feature within style.css or to the additional CSS section of WordPress. Which is accessible via Dashboard → Appearance → Customize → Additional CSS.

BEST PRACTICE: It’s recommended to place @media (prefers-color-scheme: dark) {} right beneath the current set of additional CSS.

Keep in mind that dark theme isn’t just about replacing colors. Don’t use high contrast colors for paragraphs. Adhere to WebAIM guidelines and Google best practices. Good luck!

Tip me if you like

Support if you’d like by referring my resume or donating through PayPa l.