Dark mode is an option you should consider adding to your WordPress website, as many (particularly) mobile users appreciate it since it puts less strain on the eyes during night time.
Why mobile users? Because almost all devices released today natively support dark mode, which means that your website can follow user device preferences and automatically show a dark or light version depending on their device settings.
Alternatively, you can add a dark mode toggle and allow the visitor to manually enable or disable it directly when visiting your website.
Android and iOS come with night mode, which uses warmer hues to help you look at the screen at night; dark mode uses an alternative approach and adds black colors to the background.
In both cases, the goal is to reduce the emission of white light from your screen as it’s harder to read and keeps you awake.
Web browsers have had the option of adding a non-native dark mode to them via browser extensions.
For example, one such extension is Night Eye, and it supports most modern browsers:
The majority of popular websites (Facebook, Youtube, etc.) offer dark color schemes to provide a more pleasant viewing experience to users.
WordPress allows you to add dark mode to both your frontend (what your customers see) and backend (what you see, your WordPress dashboard), so if you spend your nights working on your website – this is something you should definitely consider enabling.
Enable dark mode on your WordPress website
First, we’ll enable dark mode to our website. Log in to your WordPress dashboard, head to Plugins > Add New, and fill in WP Dark Mode in the search field on the top right.
Click Install Now to install the plugin:
Once installed, click Activate to activate the plugin on your site:
The plugin will automatically take you to its settings (Settings > WP Dark Mode section), where you need to make sure that Enable Frontend Darkmode, Show Floating Switch, and Enable OS aware Dark Mode options are enabled:
Click Save Settings to save changes.
Here are the explanations of the settings:
Enable Frontend Darkmode – Enables the dark mode option on your website.
Show Floating Switch – Shows the button on your site that allows your visitors to enable/disable the dark mode.
Enable OS aware Dark Mode – This option will automatically turn on your site’s dark version for visitors whose device is set to dark mode.
When you visit your website, you will see the switch in the bottom right corner:
The plugin itself offers a bunch of other options, but you’re limited with the free version, and if you want to customize it thoroughly – you’ll have to purchase the PRO or ULTIMATE versions here.
The PRO version of the plugin provides many more customization options and allows you to turn on the dark mode at specific times.
For example, you can only use two styles for the floating switch in the Display Settings section with the free version:
And two dark mode themes in the Style Settings section:
Make sure to click Save Settings to save changes if you change anything.
Enable dark mode on your WordPress dashboard
Your WordPress dashboard has several color schemes available, but none of them reduce the white light emission from your screen.
The WP Dark Mode plugin can help with that as well.
Head to Settings > WP Dark Mode > General Settings tab, and toggle the Enable Backend Darkmode switch:
Click Save Settings to save changes, and you’ll see a new switch in the top menu bar in your WordPress dashboard:
Click that switch to toggle between light and dark modes instantly. Each user on your WordPress website can toggle this setting on their end as well.
Keep in mind that dark mode is not a WordPress dashboard color scheme, and you can use it in conjunction with the existing admin color scheme. Make sure to toggle the dark mode off and head to Users > Profile to see the color scheme options:
