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.
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.
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.
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.
- 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.
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.
Thus, you can add Dark Mode to the WordPress dashboard and front end.
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!
Leave a Reply