Dark Mode Toggle Pro

Set up light and dark modes across WordPress

Dark Mode Toggle Pro adds a switch visitors can use to change a WordPress website between light and dark modes. They can choose light mode on a website that starts with a dark theme. A dark background with light text may reduce bright-screen discomfort for some people, though visual preferences vary.

Choose dark mode as the default or have the initial display match the operating system theme. The plugin can remember a user’s choice through the next page refresh and later visits, so they do not have to choose a mode each time.

Shape the button to fit your interface

Set the toggle’s position, width, height, border radius, colors, and font size. Add custom text or emoji labels, upload a button image, or use various pictures for light and dark modes. You can use a custom button, keep the toggle sticky, and enable a transition animation when the mode changes.

Choose where the options apply

Separate options cover the front end and administration area. Dark mode can also be enabled on WordPress admin pages and the post editor screen. The add-on is intended to work with WordPress themes, page builder extensions, and modern browsers.

To change dark-mode treatment on particular blocks, add the dmt-filter-1 or dmt-filter-0 CSS class. These classes invert the effect on elements such as images, columns, cover blocks, and buttons. The setting applies to the elements you mark.

Install and configure the plugin

Install and activate Dark Mode Toggle Pro in WordPress. Then open Appearance > Dark Mode to set the button styling, starting mode, and front-end or administration options. Add a filter class to individual block elements when you need to change how dark mode affects them.