--- title: "WordPress Dark Mode: How to Add a Site-Wide Light/Dark Toggle (With and Without Elementor)" url: https://theplusaddons.com/blog/wordpress-dark-mode/ date: 2026-09-08 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "I went looking for a dark mode plugin to recommend in this guide and found that the one most sites actually use, WP Dark Mode, has been closed on the..." image: https://theplusaddons.com/wp-content/uploads/2026/09/wordpress-dark-mode-featured-1024x538.jpg word_count: 881 --- # WordPress Dark Mode: How to Add a Site-Wide Light/Dark Toggle (With and Without Elementor) ## - WP Dark Mode is closed on the official WordPress.org plugin directory since August 5, 2026, pending a review, so fresh downloads are not available even though existing installs still work. - A site-wide dark mode toggle needs three pieces: a dark CSS palette, a stored preference via localStorage or a cookie, and an instant switch mechanism that toggles a class on the or element before the page paints. - The prefers-color-scheme media query matches the visitor’s operating system setting at no cost and with no plugin, but it does not provide a manual toggle for users who want to override their OS choice. - Elementor sites can build a custom dark mode toggle without a dedicated plugin by adding an icon or switch in the header, giving it a unique CSS ID such as dark-toggle, and using JavaScript to toggle body.dark-mode and save the state to localStorage. I went looking for a dark mode plugin to recommend in this guide and found that the one most sites actually use, WP Dark Mode, has been closed on the official WordPress.org plugin directory since August 5, 2026, pending a review. It is not deleted, existing installs still work, but nobody can download it fresh right now. That is an unusual thing to happen to a plugin with tens of thousands of installs, and it is exactly the kind of single point of failure worth knowing about before you build a feature around one plugin. This guide covers what a real site-wide dark mode toggle actually requires, the current state of the WordPress plugin options, and how to add one with or without Elementor. Table Of Contents ## What a Site-Wide Dark Mode Toggle Actually Needs A working light/dark toggle is three separate pieces working together, not one setting: - **A dark CSS palette.** Every background, text, border, and image needs a dark-mode counterpart, usually written as CSS custom properties (variables) so you can swap the whole set at once. - **A stored preference.** The visitor's choice needs to persist across pages and return visits, typically via `localStorage` or a cookie, so they do not have to re-toggle it on every page load. - **An instant switch mechanism.** Toggling a class on the `` or `` element that the CSS palette responds to, applied before the page paints to avoid a flash of the wrong theme. Miss the third piece and you get the common "flash of light mode" bug where a returning dark-mode visitor sees a half-second of white background before JavaScript kicks in. ## Method 1: The Native Browser Preference (Zero Plugins) The CSS `prefers-color-scheme` media query lets your stylesheet automatically match whatever light or dark setting the visitor has already chosen in their own operating system: `@media (prefers-color-scheme: dark) { body { background: #121212; color: #e0e0e0; } }` This costs nothing, needs no plugin, and respects the visitor's system-level choice. Its limitation is that there is no manual toggle switch. A visitor whose OS is set to light mode but who personally prefers a dark website has no way to override it, which is why most sites still add an explicit on-page switch on top of this baseline. ![WordPress.org plugin page showing the WP Dark Mode plugin closed pending review](https://theplusaddons.com/wp-content/uploads/2026/09/hWXX3FltYVHp1XxWBVahEBlEm6vR3zNOw_uTRJewjR1hinfozjHBoEt7UA5QXIx3fcDB7D_SbwwG6I2I5orN2w-scaled.png)The popular WP Dark Mode plugin was closed on WordPress.org pending review as of August 2026. ## Method 2: A Dedicated Dark Mode Plugin Dedicated dark mode plugins add a floating toggle button, an admin-configurable color palette, and localStorage handling without you writing any code. The catch right now is fragmentation: with WP Dark Mode closed pending review, the remaining active alternatives on WordPress.org (Dark Mode Toggle, Darklup, Darkify, Dark Mode for WP Dashboard) each sit at roughly 700 to 3,000 active installs, well short of a single dominant, battle-tested option. One older entrant, Dark Mode for Elementor, was closed permanently back in December 2023 for a guideline violation, so check a plugin's last-updated date and active-install count before you commit to it, not just its name. ***Also Read:** before adding any new plugin for a cosmetic feature, it is worth auditing what is already slowing your site down. See [how to clean up a bloated Elementor site](https://theplusaddons.com/blog/clean-up-bloated-elementor-site/) for a practical plugin-and-database audit.* ## Method 3: A Theme or Page Builder's Built-In Dark Mode Some WordPress themes ship a dark mode toggle natively in their customizer, and it is worth checking Appearance > Customize before installing anything. This is usually the cleanest option when it exists, because the theme author already wrote dark-mode CSS for every one of that theme's own components, which a generic plugin cannot guarantee. ## Method 4: A Custom Toggle Built With Elementor + a Few Lines of JS On a site already built in Elementor, you do not need a dedicated plugin at all for a basic toggle. Add an icon or switch as an Elementor button widget in your header, give it a unique CSS ID (for example `dark-toggle`), then add a small custom JavaScript snippet (via Elementor's own custom code area, or a code snippets plugin) that toggles a `dark-mode` class on `document.body` and saves the state to `localStorage`. Your dark CSS palette then targets `body.dark-mode` for every color override. This keeps the feature entirely inside your existing Elementor build with no new plugin dependency, at the cost of writing (or copying) a small amount of code yourself instead of getting an admin settings panel for free. ***Also Read:** for other small interactive touches you can add the same way, see how to add [CSS hover effects in Elementor](https://theplusaddons.com/blog/css-hover-effects-in-elementor/) and how to build [an animated toggle switch in CSS and Elementor](https://theplusaddons.com/blog/animated-toggle-switch-css/), which is the exact switch UI a dark mode toggle needs.* ## Which Method Should You Actually Use? | Method | Manual toggle | New plugin dependency | Best for | | ------ | ------------- | --------------------- | -------- | | prefers-color-scheme only | No | No | Zero-effort baseline, no admin control needed | | Dedicated dark mode plugin | Yes | Yes (check install count first) | Non-developers who want an admin settings panel | | Theme's built-in dark mode | Usually | No | Themes that already ship one; check first | | Custom Elementor toggle + JS | Yes | No | Elementor sites wanting no extra plugin weight | ## Suggested Reading - [How to Clean Up a Bloated Elementor Site (Plugins, Database, and Unused Assets)](https://theplusaddons.com/blog/clean-up-bloated-elementor-site/) - [How to Add CSS Hover Effects in Elementor (With and Without Code)](https://theplusaddons.com/blog/css-hover-effects-in-elementor/) - [3 Ways to Build an Animated Toggle Switch (CSS + Elementor)](https://theplusaddons.com/blog/animated-toggle-switch-css/) - [Why Your Elementor Hero Image Hurts PageSpeed (LCP Fix)](https://theplusaddons.com/blog/elementor-hero-image-lcp/) ## Frequently Asked Questions **Q: Why does a site-wide dark mode toggle need more than just a color switch?** A: A real site-wide toggle has three parts working together: a dark CSS palette, a stored preference, and an instant switch mechanism. The palette handles backgrounds, text, borders, and images, usually through CSS custom properties. The preference keeps the visitor’s choice across pages and return visits with localStorage or a cookie. The switch has to flip a class on the html or body element before paint, or you get the flash of light mode bug. **Q: How do I stop the flash of light mode when a visitor returns in dark mode?** A: The fix is to apply the theme class before the page paints, not after JavaScript finishes loading. The page calls out the common flash of light mode bug as what happens when the switch happens too late. That matters because returning visitors can briefly see a white background even though their saved preference is dark. A class on html or body needs to be in place early enough for the CSS palette to respond immediately. **Q: Can I use WordPress dark mode without installing a plugin?** A: The native browser route works with the prefers-color-scheme media query, so it needs no plugin and costs nothing. It follows the visitor’s operating system setting automatically, which makes it a clean baseline for sites that just want automatic matching. The tradeoff is control: there is no manual toggle, so someone on light OS settings cannot force dark mode for your site unless you add an on-page switch. **Q: What are the downsides of using a dark mode plugin on WordPress?** A: The main downside is plugin fragmentation right now. WP Dark Mode was closed on WordPress.org pending review as of August 2026, and the remaining active alternatives listed on the page sit at roughly 700 to 3,000 active installs each. That means there is no single dominant option to bet on blindly. The page also notes that Dark Mode for Elementor was closed permanently in December 2023 for a guideline violation. **Q: Should I use my theme’s built-in dark mode or build one with Elementor?** A: A theme’s built-in dark mode is usually the cleanest choice when it exists because the theme author already wrote dark-mode CSS for that theme’s own components. That makes it more complete than a generic plugin that has to guess how every element should look. If you are already building in Elementor and want to avoid another plugin dependency, a custom toggle with Elementor plus a few lines of JS is the other practical path. **Q: What is the best way to add dark mode to an Elementor site without extra plugin weight?** A: A custom toggle built with Elementor and a few lines of JavaScript is the leanest option for an Elementor site. The page describes adding an icon or switch as an Elementor button widget in the header, giving it a unique CSS ID like dark-toggle, then using custom JavaScript to toggle body.dark-mode and save state in localStorage. That keeps everything inside your existing build instead of adding another plugin layer.