Dark Mode Toggle Switch Plugin to Add Dark Mode in WordPress

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”.

Dark Mode Toggle Pro - Front Settings — Dark Mode Toggle Pro – 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.

Dark Mode Toggle Switch in WordPress Website

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.

Save User Choice - Advanced Settings — Save User Choice – Advanced Settings

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.

Applying Additional Filter Class to Blocks

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.

Fix Images using CSS when Dark Mode is Active

If you see any reverse effect on certain images when dark mode is active, then you can avoid this reverse effect on those images with the CSS.

For example, if all those images have a class, “.css-selector”, then you can apply this CSS to remove the invert effect from those images:

.darkmode--activated .css-selector { filter: invert(1); }

The above CSS rule would work for any HTML element having a class, “.css-selector”.

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. For example:

.darkmode--activated .css-selector { background-color: #ff0000; }

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.

Dark Mode Toggle Pro - Admin Settings — Dark Mode Toggle Pro – Admin Settings

In this way, the toggle button will appear in every part of the WordPress admin including the WordPress block editor screen.