How to Enable Dark Mode in WordPress Site?

Dark mode helps to offer better reading experience and avoid looking at the brighter screen in dim environment. Operating systems like Windows and macOS has built-in dark mode and browsers also have an option to toggle dark theme. However, these things will not help to view the website’s content in real dark mode. Generally, the site will show with white background regardless of your system’s or browser’s setup. If you really want to use dark mode for your WordPress site, here are the options for you.

Dark Mode Theme and Considerations

If you are planning to launch a new WordPress site or considering a theme change, then the best option is to look for a theme that supports dark mode. For some reasons if your current theme does not support the feature then you have lot of plugins for that purpose. In addition, themes do not provide additional features like dark mode for admin area, changing toggle switch design, changing color preset, etc. Therefore, using a plugin is the way for using dark mode in WordPress.

Remember, whether you use plugin or theme for dark mode there will be lot of CSS and JavaScript added to the source code. You should use caching plugins like WP Rocket or Autoptimize to aggregate the inline styles/JS and delay/defer the files so that your page speed score is not affected.

Dark Mode Plugins for WordPress

We will explain here with three different plugins and you can choose the one based on your need.

• DarkLooks – Dark Mode Switcher – for frontend mode toggling with complete customizations.
• Dark Mode for WP Dashboard – for WordPress admin dashboard with no settings.
• WP Dark Mode – Best Dark Mode and Social Sharing Plugin for WordPress – for frontend, backend and block editor with frustrating upselling of pro features.

1. Enable Dark Mode in WordPress Frontend with DarkLooks Plugin

Below is how our test site looks like in Chrome browser with default display. Let’s apply dark mode to this site and check how it looks.

Login to your WordPress dashboard and navigate to “Plugins > Add New” section. Search for “dark mode” to find DarkLooks plugin and then install and activate it.

Go to “DarkLooks > Settings” section where you can find all customization options.

• General Setting – here you can enable dark mode, toggle button and use OS option instead of plugin’s option.

• Advanced Setting – add toggle button in top navigation menu, include/exclude elements and set body font size.
• Switch Setting – currently there are 5 styles are available for toggle switch and you can choose one of the four corners to display.

• Color Preset – select “Color Set Method” and “Preset Color” options to select from one the available presets. You can also set custom colors for dark mode appearance. Black and light-grey preset works out of the box for most cases.

• Image Setting – upload logo for light and dark modes and set opacity for dark mode images.
• Time Based – schedule dark mode based on the set start and end time.
• Custom CSS – add your custom CSS to adjust any elements that do not look properly on dark mode. The editor supports syntax highlighting and shows errors / warnings which helps to validate your CSS.

All these options are free without any frustrating upselling of pro version (though you can find recommended plugins from author separately under “DarkLooks > Recommended Plugins” section). After enabling dark mode, our test site looks like below without any custom CSS. As you can see the dark mode toggle switch is added both in menu as well as in bottom right corner. You can use one of these button options optimal for your site setup.

2. Enable Dark Mode for WordPress Admin Dashboard

The only feature missing in DarkLooks plugin is that it does not support dark mode for WordPress admin panel. If you want that feature for your backend, then install and activate “Dark Mode for WP Dashboard” plugin. Once you activate the plugin, it will instantly apply dark mode with preset color as shown below.

There are no customization settings available for this plugin. You can toggle dark and default modes by using the “Dark Mode Toggle” button on the top admin bar. If you want to disable dark mode for user level, go to “Users > Profile” section, check “Disable darkmode” option and save your changes.

3. Dark Mode for Gutenberg Editor, Frontend and Backend with WP Dark Mode

WP Dark Mode plugin is a good choice which helps to toggle frontend, admin area and Gutenberg editor. Other than these features, all other settings are premium based which will easily annoy you. For example, you can’t add custom CSS, include or exclude elements. If you do not worry about a plugin makes the admin area congested with little value, then you can go for WP Dark Mode plugin. After installing and activating, go to “WP Dark Mode > Settings” section and here are the free options available for you.

• General Settings – here you can enable dark modes for frontend, backend, block editor and OS based option. When backend option is enabled, top admin bar will show toggle button to switch the modes.

• Advanced Settings – here you can make the dark mode as default option for readers.
• Color Settings – choose the default color preset as Gold or Sapphire mode.

• Switch Settings – show floating toggle button, select from 3 free styles, change the size, add two animation effects.
• Image Settings – add low brightness and grayscale effect for images.
• Animation – add animation effects when user switches the mode.

If you have enabled dark mode for block editor in “General Settings”, go to the editor and you will see a toggle icon on the top bar. Click on that and choose the “Dark Mode” option. You can also insert a “Dark Mode Switch” block anywhere on the content area and choose the switch style.

Below is how test site looks in Gold and Sapphire color presets using WP Dark Mode plugin.

Final Words

As you can see, you do not see a theme support for using dark mode in WordPress sites. Install one of the plugins you like and add a toggle button for users to switch the modes. We recommend WP DarkLooks plugin which has neat and free set of tools. After enabling dark mode, make sure to test your site thoroughly to check logo, test and images are appearing properly. If needed, you can also use dark mode for admin dashboard and toggle when needed.