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 tema alternável interativo apenas com JavaScript e CSS
• Enviar a menor quantidade de JavaScript possível ao navegador!

Adicione e estilize um ícone de toggle de tema

Seção intitulada Adicione e estilize um ícone de toggle de tema

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

   src/components/ThemeIcon.astro

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

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

   src/components/Header.astro

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

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

Seção intitulada Adicione estilos CSS para um tema escuro

Adicione algumas cores alternativas para utilizar no modo escuro.

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

Seção intitulada 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.

1. Adicione a seguinte tag <script> em src/components/ThemeIcon.astro após sua tag <style>:

   src/components/ThemeIcon.astro

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

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

Teste seu conhecimento

Seção intitulada Teste seu conhecimento

Escolha se cada uma das afirmações a seguir descreve tags <script> do Astro, componentes de frameworks de UI, ou ambos.

1. Eles te permitem incluir elementos de UI interativos no seu website.

   1. tags <script> do Astro

   2. componentes de frameworks de UI

   3. ambos

   Enviar

2. Eles irão criar elementos estáticos no seu site a não ser que você inclua client: para enviar seu JavaScript para o cliente e executá-lo no navegador.

   1. tags <script> do Astro

   2. componentes de frameworks de UI

   3. ambos

   Enviar

3. Eles te permitem “testar” um novo framework sem precisar iniciar um projeto completamente novo utilizando seu conjunto de tecnologias.

   1. tags <script> do Astro

   2. componentes de frameworks de UI

   3. ambos

   Enviar

4. Eles te permitem reutilizar código que você escreveu em outros frameworks e você pode frequentemente só colocá-los diretamente no seu site.

   1. tags <script> do Astro

   2. componentes de frameworks de UI

   3. ambos

   Enviar

5. Eles te permitem adicionar interatividade sem precisar conhecer ou aprender qualquer outro framework JavaScript.

   1. tags <script> do Astro

   2. componentes de frameworks de UI

   3. ambos

   Enviar

Checklist

Seção intitulada Checklist

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

Recursos

Seção intitulada Recursos

• <script> no lado do cliente no Astro