
In 2025, user experience in more important than ever before.
As a WordPress site owner, your site should offer visitors a pleasant experience. You don’t want them to strain their eyes or get uncomfortable while browsing your sites.
Also, let’s face it; we all prefer dark modes ourselves. So, if you’ve enabled dark mode on your phone, why would your users prefer anything different on your site?
And that’s why you must offer a dark mode on your WordPress site. But how does one do that? We’ve got you covered there as this blog will dive deep into enabling the dark mode (both via plugin and custom code), its benefits, and a lot more.
So, let’s learn more.
- What Is the WordPress Dark Mode (And Why Is It So Popular)?
- How to Add Dark Mode to Your WordPress Site (Step-by-Step)
- Common Mistakes to Avoid When Implementing WordPress Dark Mode
- Final Thoughts
Enjoy Dark Mode Without the Slowdown
Enabling dark mode can add extra scripts and styling that slow down WordPress. But with Cloudways’ optimized stack, featuring NVMe storage, Object Cache Pro, and a built-in CDN, your site stays fast, smooth, and efficient.
What Is the WordPress Dark Mode (And Why Is It So Popular)?
As the name suggests, the dark mode in WordPress is a display setting that simply changes your site’s background from light to dark.
Doing so creates a comfortable & visually appealing browsing experience. The darker shades are usually black or dark gray while the text and other content is kept in lighter colors for contrast.
Just like on your mobile phone, you have the option to switch between light and dark modes; the same is the case with WordPress’ dark mode. It gives your site visitors a button to toggle between the light and dark modes.
Now the question of its popularity, the answer is simple. Nobody wants to strain their eyes, and as discussed above, we all prefer it ourselves, and so do our users.
But besides that, it’s getting popular due to reasons like eye comfort, battery life (yes, dark mode saves battery life), improved focus, and, of course, we can’t take away the element of aesthetics and modern appeal.
How to Add Dark Mode to Your WordPress Site (Step-by-Step)
Now, let’s get to the real part. How does one enable a dark mode on their WordPress site? Well, there are multiple methods, and we’ve covered the 3 most common methods, which are:
- Using a WordPress Dark Mode plugin
- Choosing a theme that already supports dark mode
- Using a Dark Mode JavaScript Library
Click on whichever method looks more fun to learn its implementation steps. All will lead to a common result: activating the dark mode on your WordPress site.
Method#1: Using a WordPress Dark Mode Plugin
- Have a running WordPress site? Skip to this step.
- Log in to your Cloudways account or sign up for a new Cloudways account.
Note: Cloudways gives a FREE 3-day trial to all new users, that too without asking for credit card details. Try it risk-free.
- Click “Servers” and then click on “Add Server.”
- Select “WordPress” as your application. Name your app & server.
- Select your server from the choices of DigitalOcean, Vultr, Linode, AWS, and Google Cloud.
- Select your server size & location. Click Launch Now.
- The setup will take 5 to 7 minutes to launch your server. Wait or grab a cup of coffee to celebrate the start of your speedy journey with Cloudways. 😉
- Our server is now ready. Yay. Click “Applications,” and then click on your WordPress app.
- You’ll be redirected to your site’s Application Settings. Click on the URL under the Admin Panel section and copy/paste the credentials from there.
Go to Your WordPress Dashboard
- You’ll be redirected to your site’s dashboard. Also, users who already have a running WordPress site; Welcome. The steps will be the same for everyone from here on.
- Click Plugins > Add New Plugin.
- Search for a plugin of your own choice; we are going with WP Dark Mode here.
- Install & Activate the plugin.
- After activation, you’ll see the plugin’s settings in your WordPress dashboard’s sidebar.
- Click “Settings” under your chosen plugin’s menu.
- Toggle the buttons to enable the dark mode on your site’s front end and admin panel. And the dark mode would be activated instantly.
- To check the results on my admin dashboard, I’m enabling the dark mode and saving the changes.
- After saving the changes, you’ll find the options of Light & Dark in your site’s top bar. And as you can see, I’m enjoying the dark mode on my admin dashboard.
Prevent Dark Mode Glitches with SafeUpdates
Outdated themes and plugins can cause dark mode display issues. SafeUpdates automatically keeps everything up to date, ensuring a smooth, glitch-free dark mode experience.
Method#2: Choosing a Theme That Already Supports Dark Mode
Don’t fancy using a plugin and want an option that requires less work? Just choose a WordPress theme that supports the dark mode by default. Here are some of such WordPress themes:
- Neve
- OceanWP
- Hestia
- Astra (with Color Customization)
- GeneratePress
- Kadence
- Zakra
- Sydney
- Shapely
- Soledad
We’ll be going with Neve for this tutorial.
- Click Appearance > Themes on your WordPress dashboard’s sidebar.
- Click Add New Themes & search for your preferred theme.
- Install & Activate the theme.
- Once activated, click Customize.
- Locate and click Colors and Background on the left menu.
- Click Dark Mode to see the changes then click publish.
Before:
After:
- And that’s it. We’ve successfully enabled the dark mode by using a WordPress theme
Method#3: Using a Dark Mode JavaScript Library
Don’t want the easier methods & wish to get your hands dirty with some coding lines (nothing complicated). We’re here to satisfy your coding bug, so let’s dive into the steps.
So, this process breaks down into four steps:
Step#1: Download or Link to Darkmode.js Library
You have the choice to either download the library & host it on your server or simply use a CDN link. We’ll use the CDN method here:
- Go to the official Darkmode.js GitHub repository: Darkmode.js GitHub
- Alternatively, you can use a CDN to link to the latest version directly.
Here’s the CDN link to the library:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/darkmode.min.js"></script>
Step#2: Add the JavaScript to Your WordPress Site
We’ll have to include the script in our theme’s footer (or header) so that it runs on every page of our site. Again, we have two options here. We can either use the theme’s footer or use a custom code snippet plugin. We’ll go with the former option here.
- Go to your WordPress dashboard.
- Navigate to Appearance > Theme File Editor.
- Find and select the footer.php file under the Theme Files section in the right sidebar.
- Insert the following script just before the closing </body> tag:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/darkmode.min.js"></script> <script> new Darkmode().showWidget(); </script>
- Save the changes.
Step#3: Customize the Dark Mode Widget
We can customize the appearance of the dark mode toggle button (the widget) and its behavior as well. Darkmode.js has various configuration options.
Here’s a basic example of how to adjust the widget settings:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/darkmode.min.js"></script> <script> new Darkmode({ label: '🌓', // This will change the icon of the toggle button bottom: '32px', // Adjust the position of the toggle button from the bottom right: '32px', // Adjust the position of the toggle button from the right backgroundColor: '#000000', // Customize the background color of the widget buttonColorDark: '#fff', // Button color in dark mode buttonColorLight: '#000', // Button color in light mode saveInCookies: true // This will save the user's preference in cookies }).showWidget(); </script>
Step#4: Test the Dark Mode on Your Site
After adding the script and customization, visit your site to check if the Dark Mode toggle button appears. You’ll see the button at the bottom right corner of your page.
Also, you can check if the dark mode is working fine by switching between the two models and checking if the theme is adjusting everything, like the background, text, etc, accordingly.
Common Mistakes to Avoid When Implementing WordPress Dark Mode
Even though there are many compelling reasons why you should implement dark mode on your WordPress site, you must take into account some common issues you run into.
So, let’s address them along with their solutions.
1. Logos Not Appearing Properly
When you use dark mode on your WordPress site, logos with dark colors or white backgrounds may look awkward with jagged edges or disappear entirely.
An easy solution to this problem is to use a transparent PNG background for logos, or you can use white outlines/shadows. This should make your logos appear correctly.
What you can also do is define separate CSS for both light and dark themes for your website to load different logo versions.
2. Poor Contrast Between Text and Background
Similar to the logo issue we discussed earlier when implementing dark mode, it is important to pay attention to the text color you’ve used for your website. Most websites use black or dark grey as the text color.
However, this can make the text blend into the background, making it unreadable. This is why you should choose appropriate contrasting colors for text and UI elements to maintain accessibility plus readability.
3. Not Testing on Different Devices
When you implement dark mode, it is important to test on different devices and browsers. This is important because dark mode can render differently on different devices and web browsers.
4. Hardcoding Colors
Hardcoding colors will render your theme’s ability to dynamically adjust its color scheme when switching between dark mode and light mode. Instead, you can use CSS variables to manage color schemes for light and dark modes.
Final Thoughts
User experience is everything these days, and enabling dark mode on your WordPress site improves both accessibility and aesthetics. Users appreciate WordPress sites that offer a dark mode as they cater to their preferences and give them benefits like battery saving and eye comfort.
This blog has covered multiple methods for implementing a dark mode on your site so that you can provide a modern and visually appealing experience to your visitors.
Setting up dark mode is easy, whether through a plugin, a theme, or JavaScript. Just make sure you avoid common mistakes like poor contrast or logo visibility.
Frequently Asked Questions
Q. How do I turn dark mode on in WordPress?
Here’s how you can turn the dark mode on in WordPress:
- Go to your WordPress dashboard.
- Click on your username at the top right, then select “Edit Profile.”
- Scroll down to “Admin Color Scheme” and choose the dark theme option.
Following the steps above will help you switch the WordPress admin interface to dark mode.
Q. Does WordPress have night mode?
Yes, WordPress offers a night mode feature for the admin dashboard. And you can activate it by going to your profile and selecting “Edit Profile.” Finally, choose a dark theme under “Admin Color Scheme.”
Q. How do I turn my page into dark mode?
You can turn your page into dark mode by installing a plugin like WP Dark Mode or using a theme like Nivi that offers dark mode by default.
Q. How do I make my WordPress background black?
You can make your WordPress background black by either customizing your theme’s CSS or using a plugin. In CSS, add `background-color: #000;` to your body or page container. Also, some themes like Nivi help you to set the background colors directly in the Customizer settings.
Q. How do I turn off dark mode in WordPress?
Here’s how you can turn off the dark mode in WordPress:
- Go to your user profile & click “Edit Profile.”
- Change the “Admin Color Scheme” to a lighter theme.
If you’re using a plugin for dark mode, simply turn it to Light from the toggle button on the top bar.
Sarim Javaid
Sarim Javaid is a Sr. Content Marketing Manager at Cloudways, where his role involves shaping compelling narratives and strategic content. Skilled at crafting cohesive stories from a flurry of ideas, Sarim's writing is driven by curiosity and a deep fascination with Google's evolving algorithms. Beyond the professional sphere, he's a music and art admirer and an overly-excited person.