How to Enable Dark Mode in WordPress (in 5 Easy Steps)

How to Enable Dark Mode in WordPress – In this article I’ll show you how to enable dark mode in WordPress.

You will learn what dark mode is, why it could be a good option for your website and how to enable dark mode in WordPress.

What is Dark Mode?

Dark mode is a display setting for your laptop, desktop, tablet and mobile devices showing grey or light-white text on a dark background (instead of the default black text on white background, which is commonly referred as light mode).

What Are the Benefits of Dark Mode?

Dark mode has a number of benefits, including:

• Health and well-being – It’s much easier on the eyes, especially in a dark room. It also doesn’t interfere with the production of melatonin, a hormone needed for sleep
• Battery savings – Devices using dark mode between 15-60% screen energy more than the default light mode
• Aesthetics – In a number of cases, a dark background looks more stylish and cool

What Services Do Use Dark Mode?

You can enable dark mode on the following services:

Operating Systems

• Windows 10
• Mac OS Mojave (from)
• Android
• IOS 13 (from)

Web Browsers

• Google Chrome
• Safari
• Mozilla Firefox

Messaging Apps

• Facebook Messenger
• Whatsapp
• Viber
• Skype

Social Networks

• Facebook
• Twitter
• Instagram

Other Tools

• Todoist
• Notion
• Trello
• Slack

Does WordPress Have Dark Mode?

You can enable dark mode in WordPress by using one of the following plugins:

• WP Dark Mode (the plugin used in this tutorial)
• WP Markdown Editor (formerly Dark Mode)
• Darkup Lite

You can find the full list of plugins to enable dark mode on the WordPress plugin repository.

How to Enable Dark Mode in WordPress Frontend

To enable dark mode in WordPress frontend (with WP Dark Mode):

1. From your WordPress dashbloard, click on Plugins > Add New
2. Type ‘WP Dark Mode’ in the plugin search bar
3. Click on Install Now next to the corresponding plugin. Once installed, click on Activate
4. Upon activation, dark mode will be enabled. To switch to dark mode, simply click on the toggle in the bottom right of the screen
5. To switch back to light mode, click on the toggle again

1-3

4

5

Note from the author of the article: The switching to dark mode resulted in a colour scheme that needed almost no adjustment, with the exception of a couple of buttons and the sticky main navigation. Having said that, if you need to customise the style or options other than the General Settings of the plugin, you will be prompted to upgrade to the pro and paid version.

How to Enable Dark Mode in WordPress Admin

To enable dark mode in WordPress admin (with WP Dark Mode):

1. From your WordPress admin, click on Settings > WP Dark Mode
2. In the General Settings tab, switch on the toggle Enable Backend Darkmode
3. Click on Save Settings
4. Switch the toggle in the admin bar to dark to enable dark mode in WordPress admin

1-3

4

Sources

https://unsplash.com/photos/DCEuAVqX6lk