Without plugins！Copy and paste, 3 minutes, super easy！How to implement dark mode.WordPress

Implement dark mode in WordPress.No plugin is required.

1.JavaScript description.

Put the following js code in the header.

 document.addEventListener('DOMContentLoaded', function() {
            const toggleButtons = document.querySelectorAll('.toggle-mode');

            toggleButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    const currentMode = localStorage.getItem('data-mode');
                    const newMode = currentMode === 'dark' ? 'light' : 'dark';
                    localStorage.setItem('data-mode', newMode);
                    applySavedMode();
                });
            });
            applySavedMode();
        });
        function applySavedMode() {
            const savedMode = localStorage.getItem('data-mode');
            if (savedMode === 'light') {
                document.documentElement.setAttribute('data-mode', 'light');
            } else if (savedMode === 'dark') {
                document.documentElement.setAttribute('data-mode', 'dark');
            }
        }

2.Css description.

Write the following code in the Css file.

/*Dark mode control*/
html[data-mode="dark"] {
filter: invert(1) hue-rotate(180deg);
}

html[data-mode="dark"] img {
filter: invert(1) hue-rotate(180deg);
}

html[data-mode="dark"] iframe {
filter: invert(1) hue-rotate(180deg);
}

/*Switch icon*/
.toggle-mode{
height: 7px;
padding: 0;
margin: 0;
}

Change the css of the above switching icons to your liking.

3.HTML description.

Write the following code where you want the switching icon (.svg) to appear.The icon is your choice.Be sure to describe the markup, as it will not be inverted unless it is a markup.

<button class="toggle-mode"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="25" height="25" viewBox="385 385 30 30"><path d="M400 392.48a7.52 7.52 0 1 0 0 15.04 7.52 7.52 0 0 0 0-15.04z"/><path d="M415 400c-4.58-2.87-5.75-5.48-4.4-10.6-5.12 1.35-7.73.18-10.6-4.4-2.87 4.58-5.48 5.75-10.6 4.4 1.35 5.12.18 7.73-4.4 10.6 4.58 2.87 5.75 5.48 4.4 10.6 5.12-1.35 7.73-.18 10.6 4.4 2.87-4.58 5.48-5.75 10.6-4.4-1.35-5.12-.18-7.73 4.4-10.6zm-15 9.83a9.83 9.83 0 1 1 0-19.66 9.83 9.83 0 0 1 0 19.66z"/></svg></button>

That’s all, and that’s all you need to complete the Dark Mode implementation.