# Dark Mode Toggle Button

> Adds a floating moon button that switches the site to a dark color scheme, remembers the visitor's choice and follows their system setting on the first visit.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: dark-mode, accessibility, css, javascript
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-dark-mode-toggle/

## Code

```html
<button type="button" id="wpide-dark-toggle" aria-label="Toggle dark mode" aria-pressed="false">&#9790;</button>
<style>
#wpide-dark-toggle{position:fixed;left:20px;bottom:20px;z-index:9999;width:42px;height:42px;border:0;border-radius:50%;background:#1e1e1e;color:#fff;font-size:20px;line-height:42px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);}
html.wpide-dark{filter:invert(1) hue-rotate(180deg);background:#fff;}
html.wpide-dark img,html.wpide-dark video,html.wpide-dark iframe,html.wpide-dark picture,html.wpide-dark [style*="background-image"],html.wpide-dark #wpide-dark-toggle{filter:invert(1) hue-rotate(180deg);}
</style>
<script>
(function () {
    var root = document.documentElement, button = document.getElementById('wpide-dark-toggle');
    var stored = null;
    try { stored = localStorage.getItem('wpide-dark'); } catch (e) {}
    var dark = stored !== null ? stored === '1' : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
    function apply() {
        root.classList.toggle('wpide-dark', dark);
        button.setAttribute('aria-pressed', dark ? 'true' : 'false');
        button.innerHTML = dark ? '&#9728;' : '&#9790;';
    }
    button.addEventListener('click', function () {
        dark = !dark;
        try { localStorage.setItem('wpide-dark', dark ? '1' : '0'); } catch (e) {}
        apply();
    });
    apply();
})();
</script>
```

## Notes

This uses a color inversion that works on most themes; photos and videos are re-inverted so they look normal. Tune the colors if your theme has its own dark palette.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Dark Mode Toggle Button" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/