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.
Opens WPIDE on
Code
<button type="button" id="wpide-dark-toggle" aria-label="Toggle dark mode" aria-pressed="false">☾</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 ? '☀' : '☾';
}
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.