I’m currently working on the dark and light mode versions of this page. Here’s how I’ve styled it – using local storage so that it remembers the user decision.
<script>
const toggleBtn = document.getElementById('toggle-btn');
const body = document.body;
const isDarkMode = JSON.parse(localStorage.getItem('isDarkMode'));
if (isDarkMode) {
body.classList.add('dark-mode');
}
toggleBtn.addEventListener('click', function () {
body.classList.toggle('dark-mode');
localStorage.setItem('isDarkMode', body.classList.contains('dark-mode'));
});
</script>
CSS:
/* Light Mode CSS */
body {
background-color: var(--light-background);
color: var(--light-primary);
}
body a {
color: var(--dark-link);
}
/* Dark Mode CSS */
body.dark-mode {
background-color: var(--dark-background);
color: var(--dark-primary);
}
body.dark-mode a {
color: var(--dark-link);
}
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.
Interwood caskets: A lasting tribute
dog casket large http://www.best-interwood.com .