These days, users are starting to see a WordPress dark mode as a necessity. After all, switching away from a bright interface tends to be easier on the eyes. However, you might not know how to add this feature to your site.
Fortunately, the process can be very simple. With the help of the free WP Dark Mode plugin, you can add a dedicated dark mode toggle for your frontend users and your backend admins. If you only want your site to use a permanently dark design, many modern block themes can also handle that through built-in Styles or color settings, without a dedicated dark mode plugin.
In this article, we’ll show you how to enable dark mode on the frontend of your site. Then, we’ll show you how to do the same on the backend. Here’s a quick overview:
- For the frontend, you’ll install WP Dark Mode, enable frontend dark mode, turn on the floating switch, and customize the colors.
- For the backend, you’ll enable admin dashboard dark mode, optionally adjust the built-in WordPress admin color scheme, and use the toolbar switch to move between Light and Dark modes.
In short, a dark color scheme and a dark mode toggle are not exactly the same thing. A theme-based dark color scheme gives your site a permanently dark look, while a dark mode plugin adds a visitor-facing or admin-facing switch so people can toggle between light and dark views.
Here’s an example of what your backend dashboard can look like by the end of this tutorial:
Let’s get started!
How to enable dark mode on the frontend of your site
Let’s start with changing the display for your frontend. If you want to provide your visitors with a light/dark toggle, follow this method. If you only want a permanently dark website design, you may also be able to do that with your theme’s built-in Styles or Site Editor color settings instead of using a dedicated plugin.
Step 1: Install a dark mode plugin
WordPress does not include a built-in frontend dark mode toggle for visitors. However, that doesn’t mean it’s impossible! Thanks to the huge library of plugins, you can find several tools to help you out.
We recommend WP Dark Mode if you want a user-facing or admin-facing toggle. It gives you options for features such as frontend dark mode, admin dashboard dark mode, floating switches, and color presets. It’s also compatible with many popular themes, meaning that most people will be able to use it.
Nevertheless, there are plenty of other options out there, so feel free to browse through them if you’re looking for a better fit. Once you decide on a plugin, install and activate it before moving on to the next step.
Step 2: Enable dark mode
Once you’ve installed your plugin, it’s time to activate the main features. If you’re using WP Dark Mode, start by going to WP Dark Mode → Settings → Controls → Frontend Dark Mode. You’ll see the main options for enabling dark mode on the front of your site.
Next, make sure the Enable Frontend Dark Mode switch is in the on position. The plugin will now let you serve a dark version of your interface on the frontend.
Another option to consider is the mode selector under Choose how you want to use Dark Mode. If you choose Use system settings, visitors whose devices prefer dark mode will automatically be served the dark mode version of your site, which can improve your site’s user experience.
Once you’re happy with your choices, go ahead and click on Save Settings. Then, move on to the next step for a few more advanced features.
Step 3: Turn on the floating switch
Next up, you have the option to give your users a bit more control over your dark mode options. Not all of your users will like browsing in dark mode. Additionally, some users might want to change their preferences depending on the time of day or other browsing conditions.
Fortunately, you can provide them with a switch to do exactly that. There are two main parts here: activating the feature, then customizing it. Let’s start with the first one by going to WP Dark Mode → Settings → Customization → Switch Settings → Floating Switch:
Make sure that the Display Floating Switch toggle is in the on position. Then, save your changes. It’s as simple as that: your users will now have the on-screen option to switch between light and dark mode.
You can also get into the styling elements here. For example, consider changing the design of the button under Floating Switch Styles.
Other customization options include adding animation or placing it in a certain part of the screen. The free version now includes multiple floating switch styles, and you can unlock even more options with the premium version of this plugin. Save your switch changes and move on to the final step.
Step 4: Customize your dark mode
The customization potential doesn’t end with the switch. There are a few other ways that you can personalize your dark mode in WordPress. Let’s look at changing the color scheme first.
Go to WP Dark Mode → Settings → Customization → Color Settings:
If you don’t want to design your own color scheme, you can use the Choose Color Mode setting to select Color Presets for a range of built-in options:
Many of the preset options are now available in the free version, while more advanced features such as AI-generated custom presets require a paid plan. As such, you may want to consider upgrading if your color scheme is especially important to you.
Before you call it done, test a few key parts of your site in dark mode, such as forms, buttons, images, and any custom CSS. This can help you catch contrast issues or theme-specific styling conflicts before visitors run into them.
How to enable dark mode in your WordPress dashboard
Your frontend users aren’t the only ones who might benefit from a dimmer screen. You can follow these steps to turn the option on for your dashboard, too.
Step 1: Turn on backend dark mode
We’ll be using the same WP Dark Mode plugin for this method. Go back to WP Dark Mode → Settings → Controls → Admin Panel Dark Mode. However, this time make sure that the Enable Admin Dashboard Dark Mode option is on.
Similar to how it works for your users, your dashboard will automatically shift into dark mode. You’ll also have a button at the top toolbar to switch between the two modes.
As you might expect, this will only impact your backend users. If you haven’t activated dark mode for the frontend, your visitors will see your normal site.
If you’re not looking for any other tailoring, you can stop here. However, if you want more ways to personalize the WordPress admin interface, you can continue to the next step.
Step 2: Change your admin color scheme
Once you’ve enabled dark mode, we encourage you to explore the backend of your site. For instance, you might find that the default WordPress colors don’t fit your needs when they’re dimmer.
The good news is you can easily change your admin color scheme to match your new dark mode settings. You don’t even need an extra plugin for this step – this feature is built into the WordPress system.
First, go to Users → Profile:
From here, you can choose whatever color combination you want. When you click on one, you’ll be able to see the changes immediately. Feel free to switch between them and get a feel for your options. When you’re all set, remember to click on Update Profile at the bottom of the page.
Additionally, you can also apply these changes to someone else’s backend profile. To get started with this, go to Users → All Users this time. Then, find the user you want to change and click on Edit under their account:
After that, you’ll be taken to a similar editing screen from before. You can then change other users’ admin color schemes to better match the new dark mode options.
Step 3: Toggle between normal and dark mode
If you’re like a lot of people, you probably don’t want to stick to only normal or dark mode all the time. Fortunately, the process of switching is simple and intuitive.
Let’s say you’re starting in the default light mode. Go to the top of your admin toolbar. Here, you’ll see a small switch with two options: Light and Dark:
All you have to do now is click on the mode you want to switch to. After you do that, your screen should look something like this:
Remember that the dark mode settings in the admin screen won’t affect your users. As such, feel free to switch between your color schemes as necessary – if you followed the first method as well, your visitors will be able to do the same.
Conclusion
A WordPress dark mode option can be a real asset to your users – and your administrators. Whether they’re looking for a calmer interface or just prefer that color scheme, it’s a simple way to customize your site’s user experience. Fortunately, WP Dark Mode makes the process simple when you want an actual toggle, while modern themes may be enough if you only need a permanently dark design.
In this article, we showed you how to enable and customize dark mode on the frontend of your site in four steps. We also walked you through how to do the same for you and your administrators on the backend of your site.
FAQ
Does WordPress have a built-in dark mode?
WordPress includes built-in admin color schemes, but it does not include a built-in frontend dark mode toggle for visitors. If you want a switch for visitors or administrators, you’ll usually need a plugin.
Can block themes create a dark site without a plugin?
Yes. Many modern block themes can create a permanently dark site design through built-in Styles or Site Editor color settings. A plugin is more useful when you want people to switch between light and dark modes.
Does admin dark mode affect visitors?
No. Admin dark mode only changes the WordPress dashboard experience for logged-in backend users. It does not change what visitors see on the frontend unless you also enable frontend dark mode.
What should you test after enabling dark mode?
Check key elements such as forms, buttons, images, and any custom CSS. Pay close attention to contrast and theme-specific styling conflicts so your dark mode stays readable and usable.
If you’re interested in some other ways to customize your site’s backend dashboard, you can check out our guides on how to customize the WordPress backend and how to change the WordPress toolbar.
Do you have any questions about turning on dark mode for your website? Let us know in the comments section below!
FREE GUIDE
4 Essential Steps to Speed Up Your WordPress Website
Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀
