De volta à terra firme. Leve seu blog do dia para noite, sem precisar de ilhas!

Agora que você pode construir ilhas Astro para elementos interativos, não se esqueça de que você pode ir bem longe com apenas JavaScript puro e CSS!

Vamos construir um ícone clicável para permitir usuários alternarem entre um modo claro ou escuro utilizando outra tag <script> para interatividade… com nenhum framework JavaScript enviado ao navegador.

Se prepare para...

Construir um toggle de tema com apenas JavaScript e CSS
Enviar a menor quantidade de JavaScript possível ao navegador!

Adicione e estilize um ícone de toggle de tema

Crie um novo arquivo em src/components/ThemeIcon.astro e cole o seguinte código nele:

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

Adicione o ícone em Header.astro para que ele seja mostrado em todas as páginas. Não se esqueça de importar o componente.

---
import Hamburguer from './Hamburguer.astro';
import Navigation from './Navigation.astro';
import ThemeIcon from './ThemeIcon.astro';
---
<Header>
  <nav>
    <Hamburguer />
    <ThemeIcon />
    <Navigation />
  </nav>
</Header>

Visite a sua pré-visualização do navegador em http://localhost:4321 para ver o ícone em todas as suas páginas agora. Você pode tentar clicá-lo, mas você ainda não escreveu um script para fazê-lo interativo.

Adicione estilos CSS para um tema escuro

Adicione algumas cores alternativas para utilizar no modo escuro.

Em global.css, defina alguns estilos escuros. Você pode escolher seus próprios, ou copiar e colar:
src/styles/global.css
```
html.dark {
  background-color: #0d0950;
  color: #fff;
}

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

Adicione interatividade no lado do cliente

Para adicionar interatividade para um componente Astro, você pode utilizar uma tag <script>. Esse script pode verificar e definir o tema atual de localStorage e alternar o tema quando o ícone é clicado.

Adicione a seguinte tag <script> em src/components/ThemeIcon.astro após sua 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 = (() => {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
      return localStorage.getItem('theme');
    }
    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>

Verifique sua pré-visualização do navegador em http://localhost:4321 e clique no ícone de tema. Verifique que você pode mudar entre os modos claro e escuro.

Checklist

Eu posso utilizar JavaScript para interatividade quando eu não quero adicionar um framework.

Recursos

<script> no lado do cliente no Astro