Dark Mode Toggle Pro

Set the starting mode and let users switch

Dark Mode Toggle Pro lets a WordPress site start in dark mode or match the user’s operating system theme on initial display. Visitors can switch between light and dark modes, including choosing light mode on a website with a darker theme. Their choice can be saved for the next page refresh and later visits.

Customize the toggle button

Adjust the button’s position, width, height, border radius, colors, and font size. Add custom text or emoji labels, upload a button picture, or pick different images for light and dark modes. You can use a custom button, make it sticky, and enable a transition animation when modes change.

Choose where dark mode applies

Separate settings cover the front end and administration area. Dark mode can be used on WordPress admin pages and the editor screen.

For block-level changes, add the dmt-filter-1 or dmt-filter-0 CSS class to an element. These filters can change dark mode’s effect on components such as images, columns, cover blocks, and buttons.

Where it can help

A dark background with light-colored text may reduce bright-screen discomfort for some people and fit different readability preferences. The add-on is designed to work with WordPress themes, page builder add-ons, and modern browsers.

Configure the extension

After installing Dark Mode Toggle Pro in WordPress, open Appearance > Dark Mode. Set the button design and display behavior, then choose front-end or admin preferences. Add a supported filter class to individual blocks when you want to change how dark mode affects them.