004-dark-mode/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Dark mode</title>
  </head>
  <body>
    <div id="dark-mode-toggle" title="Dark mode toggle">🌒</div>
    <div class="container">
      <img src="semicolon.png" class="logo" alt="Semicolon logo" />
      <h1>Amazing Semicolon</h1>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe repellat
        quasi autem, repellendus eius minus nostrum dolor amet suscipit nisi.
        Praesentium vel dolorum aperiam sint commodi incidunt, nobis nulla odit.
      </p>
      <div>
        <button class="btn primary-btn">Primary</button>
        <button class="btn secondary-btn">Secondary</button>
      </div>
    </div>
    <script>
      const darkModeToggleBtn = document.getElementById('dark-mode-toggle');
      let theme = localStorage.getItem('theme');

      if (theme === 'dark') enableDarkMode();

      darkModeToggleBtn.addEventListener('click', () => {
        theme = localStorage.getItem('theme');
        if (theme === 'dark') {
          disableDarkMode();
        } else {
          enableDarkMode();
        }
      });

      function enableDarkMode() {
        darkModeToggleBtn.innerHTML = '☀️';
        localStorage.setItem('theme', 'dark');
        document.body.classList.add('dark-mode');
      }

      function disableDarkMode() {
        darkModeToggleBtn.innerHTML = '🌒';
        localStorage.setItem('theme', 'light');
        document.body.classList.remove('dark-mode');
      }

      window
        .matchMedia('(prefers-color-scheme: dark)')
        .addListener((e) => (e.matches ? enableDarkMode() : disableDarkMode()));
    </script>
  </body>
</html>