Dark mode toggle functionality can be a great addition to a WordPress website. This can improve accessibility and visibility for many users.
In this guide, we learn how to add a dark mode toggle switch button to a WordPress site using a simple plugin.
Dark Mode Toggle Plugin for WordPress
Dark Mode Toggle is a WordPress plugin to bring the dark mode toggle switch feature to any WordPress site. This plugin is compatible with any WordPress theme.
The premium version, Dark Mode Toggle Pro is also available with many advanced features.
After you install and activate the free or premium version of this plugin, you will find a new menu under “Appearance” to configure the plugin options.
Front Settings – Dark Mode Toggle
You can find options related to the front toggle button in the “Front Settings”.
Here, you can set the following options:
- Position of Toggle Button
- Width and Height
- Border Radius
- Font Size
- Label for Toggle Button
- Button Colors
This plugin works out of the box and the toggle button appears on your WordPress site in the desired position. Now, the users can click on the button to toggle the color scheme to dark or light depending on the WordPress theme.
Advanced Settings
When the user toggles the mode, by default, it saves the choice for the next page refresh. The plugin comes with an option to save the user’s choice on local storage.
In “Advanced Settings”, you may uncheck “Save User’s Choice” in case you don’t want the plugin to persist user choice on the next page refresh.
Also, you can set the switching transition time or hide the toggle button on small-screen mobile devices.
If you check the “Auto Match OS Theme” option, then it automatically shows dark mode if the user’s OS preferred theme is dark.
CSS Overrides (Advanced Users Only)
The plugin works with any WordPress theme to automatically change the color scheme. Depending upon the theme, you may want to take full control of the color scheme with CSS.
To allow CSS overrides, you can check the “Allow CSS Overrides” option. A CSS class, “darkmode–activated” is added to the <body> tag. This will allow you to write your own custom CSS depending on your theme.
Toggle Button in WordPress Admin
You can also enable the toggle switch button on the WordPress admin area in the “Admin Settings” tab. In this tab, separate options are available for the admin area.
In this way, the toggle button will appear in every part of the WordPress admin including the WordPress block editor screen.
