Like the content on this site? Please leave a review on my Google My Business page. I'm a freelancer. Your positive feedback will boost my local search presence.

Automatic Dark Mode for WordPress Websites

Continue reading if you are familiar with Cascading Style Sheets.

Good news if you want to join the dark side. Now that prefers-color-scheme is available for modern web browsers, you can use it to enable an automatic dark mode for WordPress websites.

The prefers-color-scheme 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.

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 Google’s best practices. Good luck!