Switch between light and dark themes with a data attribute and remember the choice with localStorage.
HTML
<button class="lotgrafix-theme-toggle">Toggle Theme</button>
[data-theme="dark"] body {
background: #111;
color: #eee;
}
main.js
( function () {
var root = document.documentElement;
var saved = localStorage.getItem( 'lotgrafix-theme' );
if ( saved ) {
root.setAttribute( 'data-theme', saved );
}
document.addEventListener( 'click', function ( e ) {
if ( ! e.target.closest( '.lotgrafix-theme-toggle' ) ) {
return;
}
var next = root.getAttribute( 'data-theme' ) === 'dark' ? 'light' : 'dark';
root.setAttribute( 'data-theme', next );
localStorage.setItem( 'lotgrafix-theme', next );
} );
} )();