{"id":45898,"date":"2021-11-03T11:31:00","date_gmt":"2021-11-03T09:31:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=45898"},"modified":"2023-06-13T15:54:09","modified_gmt":"2023-06-13T12:54:09","slug":"wordpress-dark-mode","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/wordpress-dark-mode\/","title":{"rendered":"WordPress Dark Mode: How to Enable It on Your Site (Beginner’s Guide)"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Fortunately, the process can be very simple. With the help of the free WP Dark Mode plugin, you can add a dedicated dark mode for your frontend users and <\/em>your backend admins<\/a>.<\/p>\n\n\n\n

In this article, we\u2019ll show you how to enable dark mode on the frontend<\/a><\/strong> of your site. Then, we\u2019ll show you how to do the same on the backend<\/a><\/strong>. Here’s an example of what your backend dashboard can look like by the end of this tutorial:<\/p>\n\n\n\n

Let\u2019s get started!<\/p>\n\n\n\n\t\t

<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tWant to switch to #dark mode in #WordPress? Here's how to enable it in 4 steps \ud83c\udf19<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n\n\n\n\n\n\n\n

How to enable dark mode on the frontend of your site<\/h2>\n\n\n\n

Let’s start with changing the display for your frontend. To provide a dark mode option to your users, follow this method. <\/p>\n\n\n\n

Step 1: Install a dark mode plugin<\/h3>\n\n\n\n

Unfortunately, WordPress does not offer a built-in function to enable dark mode on your site. However, that doesn’t mean it’s impossible! Thanks to the huge library of plugins, you can find several tools to help you out.<\/p>\n\n\n\n

We recommend WP Dark Mode<\/a>. This user-friendly plugin gives you a ton of options: you can change elements like the color palette, button design, and animations. It’s also compatible with most of the top WordPress themes<\/a>, meaning that most people will be able to use it.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Step 2: Enable dark mode<\/h3>\n\n\n\n

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 \u2192 Settings<\/em>. You’ll see a lot of different settings, but for now, we’ll focus on the basics in General Settings<\/em>:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Next, make sure the Enable Frontend Darkmode<\/em> switch is in the on position. The plugin will now show the dimmer version of your interface by default.<\/p>\n\n\n\n

Another option to consider is the Enable OS aware Dark Mode<\/em>. If you turn this on, users with their device preferences set to dark mode will automatically be served the dark mode of your site, which can improve your site’s user experience<\/a>.<\/p>\n\n\n\n

Once you\u2019re happy with your choices, go ahead and click on Save Settings<\/em>. Then, move on to the next step for a few more advanced features.<\/p>\n\n\n\n

Step 3: Turn on the floating switch<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

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 \u2192 Settings \u2192 Switch Settings<\/em>:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Make sure that the Show Floating Switch<\/em> 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. <\/p>\n\n\n\n

You can also get into the styling elements here. For example, consider changing the design of the button under Floating Switch Style<\/em>. <\/p>\n\n\n\n

Other customization options include adding animation or placing it in a certain part of the screen. You can unlock even more options with the premium version of this plugin. Save your switch changes and move on to the final step.<\/p>\n\n\n\n

Step 4: Customize your dark mode<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Go to WP Dark Mode \u2192 Settings \u2192 Color Settings<\/em>:<\/p>\n\n\n

\n
\"A<\/figure><\/div>\n\n\n

If you don’t want to design your own color scheme, you can also toggle on Want to use color presets? <\/em>for a few default options:<\/p>\n\n\n

\n
\"A<\/figure><\/div>\n\n\n

Most of the options here will require a premium version. This will help you adjust anything from overall brightness to contrast levels. As such, you may want to consider upgrading if your color scheme<\/a> is important to you.<\/p>\n\n\n

<\/div>\n\n\n\n

How to enable dark mode in your WordPress dashboard<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Step 1: Turn on backend dark mode<\/h3>\n\n\n\n

We’ll be using the same WP Dark Mode plugin for this method. Go back to WP Dark Mode \u2192 Settings \u2192 General Settings<\/em>. However, this time make sure that the Enable Backend Darkmode <\/em>option is on. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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<\/a>, you can continue to the next step.<\/p>\n\n\n\n

Step 2: Change your admin color scheme<\/h3>\n\n\n\n

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. <\/p>\n\n\n\n

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 \u2013 this feature is built into the WordPress system.<\/p>\n\n\n\n

First, go to Users \u2192 Profile<\/em>:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

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<\/em> at the bottom of the page.<\/p>\n\n\n\n

Additionally, you can also apply these changes to someone else’s back-end profile. To get started with this, go to Users \u2192 All Users <\/em>this time. Then, find the user you want to change and click on Edit<\/em> under their account: <\/p>\n\n\n

\n
\"An<\/figure><\/div>\n\n\n

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.<\/p>\n\n\n\n

Step 3: Toggle between normal and dark mode<\/h3>\n\n\n\n

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. <\/p>\n\n\n\n

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<\/em> and Dark<\/em>:<\/p>\n\n\n

\n
\"A<\/figure><\/div>\n\n\n

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: <\/p>\n\n\n

\n
\"An<\/figure><\/div>\n\n\n

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 \u2013 if you followed the first method as well, your visitors will be able to do the same.<\/p>\n\n\n

Go to top<\/a><\/div>\n\n\n\n

Conclusion<\/h2>\n\n\n\n
\n
\n

A WordPress dark mode option can be a real asset to your users \u2013 and your administrators. Whether they\u2019re looking for a calmer interface or just prefer that color scheme, it\u2019s a simple way to customize your site\u2019s user experience. Fortunately, WP Dark Mode makes the process simple. <\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tWant to switch to #dark mode in #WordPress? Here's how to enable it in 4 steps \ud83c\udf19<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

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.<\/p>\n\n\n\n

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<\/a> and how to change the WordPress toolbar<\/a>.<\/p>\n\n\n\n

Do you have any questions about turning on dark mode for your website? Let us know in the comments section below!<\/em><\/strong><\/p>\n\n\n