If you’re interested in adding a dark mode option to your WordPress website, this post is going to cover everything that you need to know.
First, you’ll learn some of the benefits that dark mode can have for your site, including improving accessibility, creating a healthier experience for visitors, reducing energy usage, and just generally satisfying user preferences.
Then, we’ll show you exactly how to add dark mode to WordPress using code-free plugins or custom code solutions.
By the end of the post, you’ll know why and how to set up WordPress dark mode. Let’s get into it…
What is WordPress dark mode?
WordPress dark mode refers to giving your website’s visitors the option to choose between a “light” style theme and a “dark” style theme.
You might already be familiar with this concept from your computer or smartphone operating system. Most operating systems let you choose between light and dark modes for the interface, with some even letting you automatically switch between light and dark modes based on the time of day.
It’s the same basic idea for WordPress dark mode. Visitors can use a button or other interface element to easily toggle between light and dark modes. The content will be exactly the same either way — the only difference is the color scheme.
Here’s an example of our test WordPress site in its default “light” mode:
Then, here’s that exact same site in “dark” mode:
Our test site will automatically choose which version to display based on each visitor’s operating system preferences. Then, users can also manually adjust their experiences by using the widget in the bottom-right corner.
Why offer dark mode on WordPress?
There are a lot of reasons that you might want to consider offering dark mode on your website. These can range from simple user preferences to making your website more accessible and creating a healthier experience for visitors.
Let’s go through them…
Dark mode makes your website more accessible
One big advantage of offering dark mode is that it can help make your website more accessible.
Sometimes abbreviated as a11y, accessibility refers to the practice of making your website usable by as many people as possible, including people with disabilities.
One example of accessibility is ensuring that people browsing your site with assistive screen readers can still have a good experience.
Beyond just generally being a good thing to make it easier for everyone to enjoy your website, accessibility is also a legal requirement in many jurisdictions. For example, there’s the Americans With Disabilities Act (ADA) and the European Accessibility Act.
While offering dark mode is not directly part of the Web Content Accessibility Guidelines (WCAG), it can still improve accessibility in other ways.
Here are some notable areas where dark mode can improve accessibility:
- Improved contrast for text content. Dark mode usually has a very strong contrast between the background colors and text colors. This can make it easier for people with vision issues to read and consume content. High contrast is part of the WCAG, so offering dark mode can indirectly help you follow WCAG.
- Easier comprehension for some visitors. Visitors who suffer from dyslexia or other visual processing disorders can have difficulty interpreting black text on a white background, so dark mode can create a better experience for these visitors. This issue is called Scotopic Sensitivity Syndrome or Irlen Syndrome.
- Fewer issues for people suffering from migraines. People who have issues with migraines are often recommended to avoid bright lights. By creating a dark experience, these visitors can enjoy your website while minimizing the risk of aggravating their migraines.
With that being said, dark mode isn’t the best option for accessibility in every single situation. For example, people suffering from astigmatism can have difficulty reading light text on a dark background because it can cause a blurry effect called “halation”. This is one reason why it can be beneficial to give users the option to choose between light and dark mode.
Dark mode can be healthier for your visitors
Offering a website dark mode can also help create a healthier experience for your visitors in a couple of different ways.
First off, dark mode can help visitors implement better sleep hygiene, especially if they’re browsing near their bedtimes. Sleep experts recommend that people try to avoid bright lights in the hours before bed.
The lighter and brighter your website, the worse it is for your visitors’ sleep hygiene. By offering dark mode, you can let your visitors still interact with your WordPress site with minimal impact on their sleep schedules.
Many dark mode implementations can also automatically enable dark mode based on each visitor’s operating system preferences. If a visitor configures their operating system to automatically switch to dark mode near bedtime, your website can follow that schedule.
Dark mode can also be easier on visitors’ eyes and cause less eye fatigue. For example, in a study from the University of Central Florida (UCF), the study authors found that “participants’ visual fatigue was significantly lower with the dark mode than with the light mode.”
Furthermore, participants had higher visual acuity in dark mode and completed the study’s tests “with significantly fewer errors for the dark mode than the light mode.”
Dark mode can consume less energy
While this isn’t an advantage for every single visitor, another small benefit of offering dark mode is that it will consume less energy on OLED screens. Because OLED screens are able to turn off individual pixels rather than lighting the entire screen, OLED screens require less energy to display dark-colored pixels.
The exact energy savings will depend on the user’s screen brightness settings, but it can range anywhere from a modest 3%–9% on low brightness to a much larger 39%–47% when the user’s screen brightness is set higher.
These numbers come from a Purdue University study that analyzed screen energy usage at different brightness levels.
Some people just prefer dark mode
Beyond the specific benefits above, it’s also worth noting that some of your visitors might just want to use dark mode because of their own personal preferences.
These preferences might be a result of some of the listed benefits, or someone might just prefer dark mode for their own unique reasons.
By offering dark mode as an option, you can create a better user experience for these visitors.
4 ways to implement dark mode on WordPress
If you’re sold on the idea of adding dark mode to WordPress, you can accomplish it in a few different ways.
Below, we’ll go through four different options:
1. Use a WordPress dark mode plugin
If you don’t want to work with code, one of the easiest ways to add dark mode to your website is to use a WordPress dark mode plugin.
What makes most of these plugins so easy to work with is that they’re essentially just plug-and-play. You can have dark mode working within minutes and then adjust things if needed.
For example, here’s how it works with one of the most popular options — the free WP Dark Mode plugin at WordPress.org.
After activating the plugin, you’ll instantly have a working dark mode on your website. In fact, it’s the same plugin that we used for the example screenshots above.
It will automatically choose which version to use based on each visitor’s operating system preferences. Then, users can manually change between modes by using a floating widget in the bottom-right corner.
If you want to adjust how the dark mode functions, you can go into the plugin’s settings. There, you can tweak the styles, select how to choose the default experience, and more.
If you’re interested in going the plugin route, here are some popular free dark mode plugins that you can consider:
Because these plugins can have a large effect on your frontend site, we highly recommend testing them before activating them on your live website.
If you use Kinsta’s managed WordPress hosting, you can use Kinsta’s staging functionality to easily test these plugins on a safe sandbox version of your site.
2. Choose a theme that already supports dark mode
Another code-free way to access dark mode is to choose a WordPress theme with built-in dark mode functionality.
For example, Rich Tabor’s free Kanso theme includes its own built-in dark mode functionality, which you can see in action on Rich’s personal website.
If you’ve already built your site with another theme, it’s probably not worth switching themes just to access dark mode. However, if you’re still working on building your site and having dark mode is important to you, it might be worth putting that on your list of features to consider when choosing a WordPress theme.
3. Use a dark mode JavaScript library
If you feel comfortable working with code, there are also premade JavaScript libraries that you can use to add dark mode to your website.
Or, if you’re a WordPress developer, you can also use these libraries to easily add dark mode to a plugin or theme that you’re developing. In fact, some of the dark mode plugins at WordPress.org are built on top of these libraries.
You can find several different dark mode libraries, but here are two of the most popular options:
- darkmode.js
- drkmd.js
If you want to use either of these libraries, we highly recommend testing them on a staging site before adding code to your live website. Again, if you host your WordPress site with Kinsta, you can use Kinsta’s built-in staging feature.
darkmode.js
Darkmode.js uses VanillajS and CSS mix-blend-mode to add dark mode without any additional configuration. By default, it adds a floating switcher that visitors can use to switch between dark mode and light mode, but you can disable this widget if you’d prefer to build your own solution.
On a user’s first visit, it will choose the mode based on their operating system preferences, and it also supports local storage so that visitors’ preferences will be saved for future visits. You can see a preview of it in action on the darkmode.js page linked above.
Because it uses mix-blend-mode rather than requiring you to add your own CSS rules, this one is pretty close to plug-and-play.
drkmd.js
Drkmd.js uses a slightly different approach. Rather than using CSS mix-blend-mode to automatically create a dark mode of your site, it instead lets you specify the actual CSS that you want to use for dark mode. You can then add these style rules to your site using the theme-light and theme-dark classes.
It also allows you to easily add your own toggle to switch between the modes. To do this, add the data-drkmd-attach attribute to the script tag.
It also includes other helpful features, such as the ability to automatically detect users’ operating system preferences and save users’ choices in local storage.
4. Use your own code solution
In addition to using a JavaScript library, there are also other code-based solutions that you can implement to add dark mode to your site.
Typically, these work by applying one set of CSS rules for light mode and then a different set of rules for dark mode.
One option would be to do this with jQuery, as documented in this tutorial. Essentially, you’ll add CSS rules for both light and dark modes.
Then, you can add a button or some kind of switch to enable dark mode. If a user enables that switch, you can use JavaScript to switch which CSS classes to use. The linked tutorial above accomplishes this with jQuery and the hasClass(), addClass(), and removeClass() methods.
You can also get more complex if you want. For example, in this JavaScript-based tutorial, the tutorial takes you through adding two main enhancements to your site’s dark mode:
- It can automatically detect users’ preferred modes based on their system preferences.
- It can store users’ choices and automatically load the correct mode when they come back to your site.
Overall, it’s probably simpler to use one of the dark mode JavaScript libraries above. But if you don’t want to do that, these methods offer another code-based alternative.
How to enable WordPress dashboard dark mode
So far, we’ve focused on how to add dark mode to your frontend WordPress website. However, you also might be interested in adding a WordPress dashboard dark mode so that you can manage your site in a more user-friendly interface.
After all, why should your site’s visitors be the only ones who are able to access the benefits that we talked about above?
If you want to add dark mode to your WordPress dashboard, the simplest option is to use a plugin. There are two main categories of plugins that you’ll find:
- Plugins that keep the same admin interface, but just switch the styles to enable dark mode.
- Plugins that create a custom dashboard interface and also offer dark mode.
If you want to keep the exact same WordPress dashboard but add a dark mode option, you can consider the Dark Mode for WP Dashboard plugin, which looks like the screenshot below.
Some of the frontend dark mode plugins above also offer features to enable dark mode in the WordPress dashboard, such as the WP Dark Mode plugin.
If you want to try a completely new dashboard experience with a dark mode option, you can consider these plugins:
Summary
Adding dark mode as an option on your website can improve its accessibility, offer a healthier experience to visitors, reduce energy usage on some screens, and generally satisfy some users’ personal preferences.
If you want to add dark mode to WordPress, you have a lot of options. For code-free solutions, you can use a dark mode plugin or a theme with built-in dark mode. For slightly more technical options, you could use a dark mode JavaScript library or code your own solution.
Because adding dark mode will have a big effect on your site’s frontend appearance, you should make sure to test it thoroughly before adding it to your live WordPress site.
With Kinsta’s managed WordPress hosting, you can safely test dark mode using Kinsta’s built-in staging feature and then apply the changes once you’re confident everything is working properly.
Leave a Reply