Adding a dark mode option to your website can be a great way to improve the user experience for your visitors. The dark mode is an aesthetic choice that can make it easier for some people to read your content, and it can also help conserve battery life on mobile devices.
And if you’re using WordPress, there are a few different ways that you can add a dark mode option to your site. In this article, we’ll show you how to add dark mode to WordPress using two different methods.
So, let’s get started!
What is Dark Mode & Benefits of Using Dark Mode?
Dark Mode is a color scheme that uses light-colored text on a dark background. It is designed to be easier on the eyes, make your website look attractive, and can also help in conserving the battery life of the user’s device.
There are a few different benefits of using dark mode:
- Dark mode can be easier on the eyes, especially for people who are sensitive to bright lights.
- Dark mode can help conserve battery life on devices with OLED or AMOLED displays.
- Dark mode can make it easier to read your content in low-light conditions.
And of course, they’re an aesthetic choice, and some people simply prefer the look of dark mode over the traditional light mode.
Whatever your reasons for wanting to add dark mode to your WordPress site, there are a few different ways you can do it.
Let’s take a look at how to add dark mode to WordPress using two different methods.
How to Add Dark Mode Option in WordPress
There are two different ways to add dark mode to your WordPress website, and these are
- Using a WordPress Plugin
- Manually adding custom CSS code.
In this guide, we’ll discuss both these methods so you can choose the one that suits you the most.
1. Adding Dark Mode Using WordPress Plugin
The easiest way to add dark mode to your WordPress website is by using a WordPress plugin.
There are a few different plugins that you can use to add this functionality to your site, but we recommend using the “WP Dark Mode” plugin. It’s a free plugin with power-packed features and it is available on the WordPress plugin repository. Plus, it’s easy to set up and use.
To install the plugin, head over to the Plugins section of your WordPress admin area and click the “Add New” button.
On the next screen, enter “WP Dark Mode” into the search field and press the “Enter” key on your keyboard. The plugin will show up as the first item on the list of results. Click on the “Install Now” button to install the plugin.
Once the plugin is installed and activated, head over to the WP Dark Mode → Settings page to configure the plugin’s settings.
On this page, you can choose when dark mode should be enabled on your website. You can choose to enable it automatically based on the time of day, or you can let the user choose when they want to enable dark mode.
In case you’re looking to enable dark mode on the backend of your website, you can check the “Enable Backend Darkmode” option.
And finally, you can also enter some custom CSS code that will be applied when dark mode is enabled on your website.
Once you’re done configuring the plugin’s settings, go ahead and click on the “Save Changes” button to save your changes. That’s all you need to do to add dark mode to your WordPress site.
2. Adding Dark Mode Stylesheet with CSS
If you don’t want to use a plugin to add dark mode to your WordPress site, you can also do it manually by adding some custom CSS code.
This is more complicated than using a plugin, but it gives you more flexibility in terms of the design and layout of your website.
To add dark mode to your website using CSS code, you’ll need to create a new CSS file and add the following code to it:
This code uses the “prefers-color-scheme” media query to target users who have dark mode enabled on their devices. You can then add any CSS rules that you want to be applied when dark mode is enabled.
For example, if you’re using the iPhone 14 Pro to visit your website, you will see the dark color scheme that you’ve added in the code above.
Once you’re done adding the CSS rules, save the file and upload it to your WordPress site.
Alternate Plugins for Dark Mode in WordPress
If you’re not interested in using the “WP Dark Mode” plugin and are looking for some alternative plugins, then here are a few plugins that work exactly like this one and offer incredible features and support.
Based on your requirements, you can choose one of the three alternate plugins we shared below.
1. Droit Dark Mode
Droit Dark Mode is a powerful WordPress plugin for creating a dark version of your website and dashboard. This plugin is also available for a paid plan, where you’ll get some extra features, such as image brightness, image opacity, and changing specific posts/pages/categories to dark mode, with a particular timing for dark mode.
I especially liked this plugin because of its simplicity to use and power-packed features. This plugin will also enable dark mode for custom OS and comes with different color presets for enabling dark and light admin dashboards based on your browser.
Key features of using this plugin on your WordPress website;
- It comes with multiple colors presets for your website to choose from.
- You can show a floating button anywhere on the body of your website.
- You can set the dark mode as your website’s default view.
- Your WordPress admin panel/dashboard can also be made dark.
- 10+ exclusive color presets are available to change the dark mode color from the color palette quickly.
2. Night Mode For WordPress
Night Mode for WordPress is another simple, straightforward plugin for WordPress websites. It has less than 100+ installs and hasn’t been updated in the past two years, so I would not recommend using it.
However, if you’re still thinking about using this plugin on your website, you can use it to increase or decrease the brightness of your website, add a night mode filter to the whole website, or adjust it to improve the readability of text, images, and other elements, and also protect eyes from hurting when the screen is too bright by dimming the light.
Key features of this plugin on your website;
- Option to add custom CSS to your website
- Import & export option
- Image filter (Opacity) and night mode options
- Compatibility with Chrome, Firefox, Safari, Opera, and Edge
3. DarklupLite – WP Dark Mode
If you’re looking for a powerful and feature-rich WordPress plugin for enabling dark mode on your website, then DarklupLite is all you need! You simply need to activate this plugin on your website, and it instantly enables the dark mode for you.
As of writing this article, the plugin has more than 600+ active installations with an average 4.5-star rating on the WordPress.org repository. And talking about the features, the plugin has many features that help you configure your site exactly how you always wanted.
Key features of using this plugin;
- It has OS-based color presets, so your website looks stunning on every device.
- It comes with more than four types of color presets.
- Easy to turn ON or OFF dark mode with a keyboard shortcut (Ctrl+Alt+D).
- Support dark mode options in both the front end and back end of your website.
- Automatic mode allows you to set pre-defined timing for enabling and disabling dark mode on your website.
Final Thoughts
Enabling dark mode on your WordPress website is an excellent way to improve your website’s usability and overall look. And for enabling the dark mode, I would recommend using the “WP Dark Mode” plugin.
It is a free plugin that is available on the WordPress.org repository with an average 4.5-star rating. Apart from that, the plugin is quite easy to use and configure. And it also comes with tons of features that help you configure your site exactly the way you always wanted.
So, that’s it for this article! I hope this article helped you learn how to add a dark mode option in WordPress. If you have any questions or suggestions, feel free to leave a comment below.
