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>

CSS

[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 );
    } );
} )();
«
»