Dark Mode Toggle Switch Plugin to Add Light or Night Mode in WordPress
Posted in: Accessibility, Plugins, Themes, Widget, WordPress

Dark Mode Toggle Switch Plugin to Add Light or Night 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
  • 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.

Dark Mode Toggle Switch in WordPress Website
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.

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.

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.

Toggle Switch in WordPress Post Editor
Toggle Switch in WordPress Post Editor
Back to Top