Dark mode toggle con CSS e Javascript

Mattepuffo's logo
Dark mode toggle con CSS e Javascript

Dark mode toggle con CSS e Javascript

Programmazione, HTML - CSS

In questo articolo vedremo come abilitare/disabilitare la dark mode usando CSS e un pizzico di Javascript.

La parte HTML ovviamente sarà basica; ho agigunto qualche elemento giusto per farvi vedere cosa succede al cambio di modalità.

Qui sotto il codice completo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <style>
      .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid black;
      }

      .menu_links {
        display: flex;
        gap: 10px;
      }

      .dark_nav {
        background-color: #191919;
        border-bottom: 1px solid #f1f1f1;
      }

      .menu_links li {
        list-style: none;
      }

      .dark_mode {
        background-color: #191919;
        color: #f1f1f1;
      }
    </style>

    <script>
      onload = (event) => {
        const nav = document.querySelector('.nav');
        const darkMode = document.querySelector('#btn_change');
        const body = document.body;

        darkMode.addEventListener('click', () => {
          nav.classList.toggle('dark_nav');
          body.classList.toggle('dark_mode');
        });
      }
    </script>

  </head>

  <body>
    <nav class="nav">
      <ul class="menu_links">
        <li>UNO</li>
        <li>DUE</li>
        <li>TRE</li>
      </ul>

      <div>
        <button type="button" id="btn_change">CAMBIA MODALITA</button>
      </div>
    </nav>

    <h2>H2</h2>
    <p>Paragrafo</p>
    <a href="">Link</a>
  </body>

</html>

Enjoy!

Condividi

Commentami!