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 (Pro)
- Label for Toggle Button (Pro)
- Button Colors (Pro)
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.
Applying an Additional CSS Filter Class to Any Block
You can add an additional filter CSS class: dmt-filter-1 or dmt-filter-0 to any block element like images, columns, cover blocks, buttons, etc. This will invert the effect on those block elements. Here’s how to do it:
- Select the block element where you want to invert the effect.
- Navigate to the “Block” tab in the sidebar, then you can add a new CSS class dmt-filter-1 or dmt-filter-0 in the “Additional CSS class(es)” field.
This is useful when you want to skip or avoid dark mode on any elements or to remove inverted effects from certain images or blocks by simply adding an additional CSS.
Toggle Dark Mode with a Custom Button (Pro)
You can also trigger dark mode with a click of any custom button or element. To do that, you can simply add a CSS class: darkmode-tg-cs to any button or element. This will toggle dark mode with a click of that button or element.
At the same time, you may also want to hide the default sticky toggle button. To hide it, you can set any negative positions like -999 in “Position from Botton”, “Position from Left”, etc.
Note: The custom button toggle feature is available in the pro version only.
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 (Pro)
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.
