Pular para o conteúdo

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

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.

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.

  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.

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

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

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

Contribua

O que passa em sua cabeça?

Comunidade