Automatic Dark Mode for WordPress

Update: The Twenty Twenty-One by WordPress comes with a color mode switcher. The feature is opt-in and supported in modern operating systems, including Android, iOS, macOS, Windows 11, and most Linux distributions. If you enable Dark Mode, 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 that detects 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. 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.

How to Implement Dark Mode for WordPress Websites

STEP 1: Understand and take note of your default style.css or color options. It varies according to the WordPress theme you’re using. Ensure 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 in 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) {} it right beneath the current set of additional CSS.

Keep in mind that a 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!

Thanks for reading. Support if you’d like by referring to my resume.