How to Add Dark Mode to Your WordPress Admin Dashboard

Do you want to add dark mode to your WordPress admin dashboard? A dark mode color scheme makes it easier to work during late hours by reducing white light emitting from the screen. In this article, we will show you how to easily add dark mode to your WordPress admin dashboard.

Do you want to add dark mode to your WordPress admin dashboard? A dark mode color scheme makes it easier to work during late hours by reducing white light emitting from the screen. In this article, we will show you how to easily add dark mode to your WordPress admin dashboard.

Using your PC or laptop in the dark or at night is not a good thing for your eyes as it can cause eye strain. Which is the reason why many renown websites like Twitter have introduced Night Mode as it allows you to continue browsing at night without leaving you with eye strain. Here’s an example of Twitter’s Night Mode feature:

Here let’s search for Dark Mode. Press on Install now on this plugin. After the install press on Activate.

There are two main reasons to use dark mode within your WordPress admin area — one objective and one subjective. The subjective one assumes your own comfort during the work at night time. Lots of computer users prefer to minimize the light produced by their devices during night time. It helps to relax eyes and do not overload them with intense colors and brightness when lights in room are off. Dark mode provides the best combination of muted colors to save your eyes during night time computer usage.

If your main job supposes that you work with your PC for more than 8 hours a day, then you know for a fact what the eye strain is. Bright screen and white color schemes of online services, apps or software can gradually impair the sense of vision, so it will be tough for you to continue making your work effectively.

Way 1 is more comprehensive, and it doesn’t let you stuck anywhere while editing CSS (but requires access to FTP or hosting panel). On the other hand, way 2 is easy, but you may get stuck due to applying wrong CSS. For instance, if you accidentally hide admin wrapper, all content will be disappeared in admin panel. You can’t then edit admin css via admin panel. In that condition, you need to access css file via FTP or hosting file manager. (specially, editing php files via FTP (or file manager) is recommended)

It’s now worth noting that the dashboard has now been fully redesigned with a much nicer, darker colour palette as of version 1.1. There is now a filter hook available to use called dark_mode_css so you can change which Dark Mode stylesheet is used. The action hook doing_dark_mode is still included and can be used to enqueue plugin specific stylesheets now too.

The beauty of this method is that you don’t have to include very menu item, just the menu items you wish to appear first on the list. WordPress will automatically cycle the rest of the item below the included ones. So you don’t have to worry about including every item for the list. Now if you want to remove a menu item, use the method I described above. Another thing to note here is the use of value ‘separator1’. This value is used to add a visual separator between the menu items. You can add only one more separator using ‘separator2’ value. There is no separator3 so use the given two wisely. Now let’s take a look at some important styling customization that we can do in WordPress.