home ⫸ blog ⫸

█▓▒░ Style for dark mode ░▒▓█

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);
  }

░░ MICHELEBORN.COM