Style for dark mode

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);
  }
By on Aug 24th, 2023 in Code

One response to “Style for dark mode”

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Continue reading »