How to Add Dark Mode to WordPress Dashboard: A Step-by-Step Guide

Using dark mode both on the website’s back and front end has been increasingly popular over the last few years. It not only gives a good look but also reduces eye strain and saves the battery life of devices.

This article will provide an easy step-by-step guide on how to add dark mode to the WordPress dashboard. Whether you’re a night owl or low light user, you can try this mode, at least for an experiment. Let’s get started!

How to Add Dark Mode to WordPress Dashboard

There are many good plugins online you can use to enable dark mode on your WordPress dashboard. WP Dark Mode is one of the best as it allows you to enable the dark mode both on the back end and front end.

Now let’s see how to get started with the WP Dark Mode plugin.

Step 01: Install and Activate the WP Dark Mode Plugin

  • Log in to the WordPress dashboard.
  • Navigate to Plugins > Add New.
  • Type WP Dark Mode in the search box.
  • You’ll get the plugin on top, developed by WPPOOL.
  • Install and Activate it.
Install and Active the WP Dark Mode Plugin

Step 02: Enable Dark Mode on Back End and Front End

  • You’ll see a new option named WP Dark Mode on the WordPress admin bar.
  • Go to WP Dark Mode > Settings > General Settings.
  • You’ll see several toggles on/off options.
  • Let’s toggle on Enable Frontend Darkmode and Enable Backend Darkmode.
  • Scroll down a bit and hit Save Settings.
  • The front and back ends of your website will go into dark mode.

Note: If you want to apply dark mode only on your WordPress dashboard, toggle off next to the Enable Frontend Darkmode option.

Enable Dark Mode both on the front and back ends of your website

Step 03: Configure Default, Color, and Switch Settings

There are many other tabs you can see in this section. Let’s have an idea of what you can do with them.

  • Advanced Settings let you make the dark mode default. It also allows you to configure time-based and sunset modes (for Pro users only).
  • From Color Settings, you can set a color preset from a variety of options. Free users have access only to Gold and Sapphire color presets.
  • Switch Settings provide several types of toggle buttons from which you can select one that will be shown on the front end. It will allow visitors to switch the front end to dark or light mode as they wish.
Advanced, Color, and Switching Settings of Dark Mode

From Includes/Excludes to Custom CSS, most options of these tabs are reserved only for premium users. You can’t do much with them as a free user.

  • Includes/Excludes allow you to specify which CSS Selectors will be included or excluded from the dark mode.
  • You can disable dark mode on specific pages, posts, categories, tags, and custom post types from the Triggers tab.
  • Enabling the Performance mode will make the javascript files delayed loading.
  • You can change the toggle button’s font size, access keyboard shortcuts, URL parameters, and dynamic content mode from the Accessibility Settings.
  • The WooCommerce tab authorizes you to exclude specific WooCommerce categories and products from dark mode.
  • Image and Video Settings will let you define image and video links to be shown in dark or light mode.
  • If you want to apply dark mode on any specific CSS, you can do it from the Custom CSS tab.
Configure Image, Video, Accessibility, and WooCommerce Settings on WP Dark Mode

Step 04: Add Animation

  • From the Animation tab, you can configure a desired animation effect to your front-end dark mode.
  • You can activate varieties of reporting from the Analytics & Reporting tab.
  • Clicking the Support tab will take you to the support page of this plugin in WordPress.org. You can post your problems on this page to get a reply from their support team.
Add Animation to WP Dark Mode

Thus, you can add Dark Mode to the WordPress dashboard and front end.

Final Takeaway!

Dark mode can improve the user experience and allow them to enjoy a soothing environment who have an eye problem. Hopefully, you can easily implement this on your website with this step-by-step guide.

Please let us know through the comment section if you have loved this article. It will give us satisfaction. Thanks for your time. Happy reading!

Was this helpful?

Thanks for your feedback!

2 responses to “How to Add Dark Mode to WordPress Dashboard: A Step-by-Step Guide”

  1. Khan Al Amin Avatar
    Khan Al Amin

    Nice article. But I think it would have been better if instead of WP Dark Mode, you should go for Darklup plugin. It’s faster, smarter, and provides you more features in the free version. For details, check the link below-
    https://darklup.com/

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Thanks for sharing. We will also give Darklup a try.

Leave a Reply

Your email address will not be published. Required fields are marked *

Introducing New Table Block Plugin - Tableberg

X
Need help?