It is recommended to add a daytime mode, which is simple to operate and does not require the introduction of cookies and external links.
HTML
You only need to add a toggle button.
<button id="toggleButton">Dark mode</button>
CSS
We need to define two styles: the colors of day mode and night mode.
/* day mode */
body {
background-color: #fff;
color: #000;
transition: background-color 0.3s, color 0.3s;
}
/* dark-mode */
.dark-mode body {
/* Site default style */
}
/* More... */
JavaScript
JavaScript is the key to the whole core.
const toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
toggleButton.textContent = 'Day mode';
} else {
toggleButton.textContent = 'Dark mode';
}
});
