Di nuovo sulla terraferma. Porta il tuo blog dal giorno alla notte, nessuna isola richiesta!

Ora che puoi costruire isole Astro per elementi interattivi, non dimenticare che puoi andare piuttosto lontano solo con JavaScript e CSS vanilla!

Costruiamo un’icona cliccabile per consentire ai tuoi utenti di alternare tra modalità chiara o scura usando un altro tag <script> per l’interattività… senza JavaScript framework inviato al browser.

Preparati a…

Costruisci un interruttore tema interattivo con solo JavaScript e CSS
Invia meno JavaScript possibile al browser!

Aggiungi e stila un’icona interruttore tema

Crea un nuovo file in src/components/ThemeIcon.astro e incolla il seguente codice al suo interno:

---
---
<button id="themeToggle">
  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
    <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
  </svg>
</button>

<style>
  #themeToggle {
    border: 0;
    background: none;
  }
  .sun { fill: black; }
  .moon { fill: transparent; }

  :global(.dark) .sun { fill: transparent; }
  :global(.dark) .moon { fill: white; }
</style>

Aggiungi l’icona a Header.astro in modo che venga visualizzata su tutte le pagine. Non dimenticare di importare il componente.

---
import Hamburger from './Hamburger.astro';
import Navigation from './Navigation.astro';
import ThemeIcon from './ThemeIcon.astro';
---
<header>
  <nav>
    <Hamburger />
    <ThemeIcon />
    <Navigation />
  </nav>
</header>

Visita l’anteprima del tuo browser su http://localhost:4321 per vedere l’icona ora su tutte le tue pagine. Puoi provare a cliccarla, ma non hai ancora scritto uno script per renderla interattiva.

Aggiungi stile CSS per un tema scuro

Scegli alcuni colori alternativi da usare in modalità scura.

In global.css, definisci alcuni stili scuri. Puoi scegliere i tuoi o copiare e incollare:
src/styles/global.css
```
html.dark {
  background-color: #0d0950;
  color: #fff;
}

.dark .nav-links a {
  color: #fff;
}
```

Aggiungi interattività lato client

Per aggiungere interattività a un componente Astro, puoi usare un tag <script>. Questo script può controllare e impostare il tema corrente da localStorage e attivare/disattivare il tema quando si clicca sull’icona.

Aggiungi il seguente tag <script> in src/components/ThemeIcon.astro dopo il tuo tag <style>:

<style>
  .sun { fill: black; }
  .moon { fill: transparent; }

  :global(.dark) .sun { fill: transparent; }
  :global(.dark) .moon { fill: white; }
</style>

<script is:inline>
  const theme = (() => {
    const localStorageTheme = localStorage?.getItem("theme") ?? '';
    if (['dark', 'light'].includes(localStorageTheme)) {
      return localStorageTheme;
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
      return 'light';
  })();

  if (theme === 'light') {
    document.documentElement.classList.remove('dark');
  } else {
    document.documentElement.classList.add('dark');
  }

  window.localStorage.setItem('theme', theme);

  const handleToggleClick = () => {
    const element = document.documentElement;
    element.classList.toggle("dark");

    const isDark = element.classList.contains("dark");
    localStorage.setItem("theme", isDark ? "dark" : "light");
  }

  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
</script>

Controlla l’anteprima del tuo browser su http://localhost:4321 e clicca l’icona del tema. Verifica di poter cambiare tra modalità chiara e scura.

Checklist

Posso usare JavaScript per l’interattività quando non voglio aggiungere un framework.

Risorse

<script> lato client in Astro (EN)

Contribuisci Comunità Sponsor

Di nuovo sulla terraferma. Porta il tuo blog dal giorno alla notte, nessuna isola richiesta!

Aggiungi e stila un’icona interruttore tema

Aggiungi stile CSS per un tema scuro

Aggiungi interattività lato client

Metti alla prova le tue conoscenze

Checklist

Risorse