Tema dia/noite JavaScript

O que é

É o "modo escuro" do site. Você coloca sw-day num botão e ele passa a alternar a página entre claro e escuro. O SW Core lembra a escolha da pessoa (na próxima visita ela já volta no tema que escolheu) e, se ninguém escolheu ainda, segue o tema do celular/computador dela. Além do botão, você pode pedir que uma imagem, um fundo, uma cor, uma fonte ou um texto sejam diferentes em cada tema — por exemplo, a logo clara no escuro e a logo escura no claro.

O tema fica escrito no <html> como sw-theme="light" ou sw-theme="dark", e todas as cores do SW Core mudam sozinhas a partir disso. Se a sua página não tiver nenhum botão sw-day, o SW Core coloca um botão pequeno preso na borda direita da tela. O atalho Ctrl+Shift+D também troca o tema. Tudo isso vem no arquivo principal — não precisa do pacote de animação.

Quando usar

• Todo site com textos longos (blog, painel, loja): muita gente lê à noite e prefere o escuro.
• Logo que não aparece num dos temas: troque a imagem por tema com sw-day-img-light / sw-day-img-dark.
• Marca que só existe num tema (site todo escuro, por exemplo): trave com <html sw-day-lock="dark"> — o botão some.
• Quer que a primeira visita já comece escura, mas deixar a pessoa trocar depois: <html sw-day-default="dark">.

Comece aqui

1. 1

   Coloque o SW Core na página. O CSS no <head>, o JS no fim do <body>. O arquivo compl é só para os ícones de sol e lua do botão.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.compl.min.css">
   
   <!-- fim do <body> -->
   <script src="swcore/swcore.min.js"></script>

2. 2

   Coloque o botão onde quiser (no menu, no rodapé). Clique nele: esta página inteira troca de tema, porque é o mesmo SW Core rodando aqui.

   <button sw-day sw-btn="ghost" aria-label="Alternar tema"><i class="sw-daytg-ico"></i></button>

3. 3

   Para a página não "piscar" branca antes de ficar escura, cole este script bem no começo do <head>, antes do CSS. Ele aplica o tema salvo antes de a página aparecer.

   <script>
     try {
       var t = localStorage.getItem('sw-theme');
       if (t === 'light' || t === 'dark') document.documentElement.setAttribute('sw-theme', t);
     } catch (e) {}
   </script>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

2. Coisas que mudam com o tema

Escreva o valor de cada tema direto no elemento: sw-day-…-light vale no claro e sw-day-…-dark vale no escuro. Troque o tema e veja estes quadros mudarem.

Promoção da semana

Frete grátis hoje

Bom dia! ☀️

Horário de atendimento

Só muda no escuro

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<nav class="flx alc j-sb gap-4 p-m bd r-m f-wr">
  <strong>Padaria Pão Quente</strong>
  <div class="flx alc gap-3">
    <a href="/cardapio" class="Tsw-link">Cardápio</a>
    <a href="/encomendas" class="Tsw-link">Encomendas</a>
    <button sw-day sw-btn="ghost rnd" aria-label="Alternar tema"><i class="sw-daytg-ico"></i></button>
  </div>
</nav>

Logo que troca com o tema (cabeçalho) Ao vivo

Bom dia, visitante

<header class="flx alc gap-4 p-m bd r-m">
  <img src="/img/logo-dia.webp"
       sw-day-img-light="/img/logo-dia.webp"
       sw-day-img-dark="/img/logo-noite.webp"
       width="48" height="48" alt="Minha empresa">
  <strong sw-day-text-light="Bom dia, visitante"
          sw-day-text-dark="Boa noite, visitante">Bom dia, visitante</strong>
</header>

<!doctype html>
<html lang="pt-BR" sw-day-lock="dark">
  …
  <!-- os botões sw-day somem sozinhos e o atalho Ctrl+Shift+D para de trocar -->
</html>

<style>
  .banner { background-image: url('/img/banner-dia.webp'); }
  html[sw-theme="dark"] .banner { background-image: url('/img/banner-noite.webp'); }
</style>

<button type="button" sw-btn="out p" onclick="SW.Day.set('light')"><i class="swi-sun"></i> Claro</button>
<button type="button" sw-btn="out p" onclick="SW.Day.set('dark')"><i class="swi-moon"></i> Escuro</button>

<script>
  // avisar o seu código quando o tema mudar (ex.: trocar as cores de um gráfico)
  document.addEventListener('sw:theme:change', (e) => {
    console.log('tema agora é', e.detail.theme);
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js — o tema e o botão.
• swcore.compl.min.css — só para o ícone de sol/lua (.sw-daytg-ico) e outros ícones swi-*.

Cuidados — erros comuns

• Sem o script do passo 3 no <head>, quem escolheu o escuro vê um clarão branco de meio segundo ao abrir cada página.
• sw-day-text-{tema} troca o texto, não a cor. Para cor use sw-day-color-{tema}.
• Na imagem, mantenha também o src normal: ele é o que aparece enquanto o JavaScript ainda não rodou (e para buscadores).
• Botão só com ícone precisa de aria-label para quem usa leitor de tela.
• Com sw-day-lock no <html>, SW.Day.set() para o outro tema não faz nada — não é defeito, é a trava.
• As classes sw-bl e sw-border só dão a cor da borda: junte com uma classe que desenha a borda, como bd.

O que ele não faz

• A escolha fica salva no navegador daquele aparelho. Em outro celular/computador, a pessoa começa de novo pelo tema do aparelho (ou pelo sw-day-default).
• Cada elemento aceita um valor por tipo e por tema (uma imagem, um fundo, uma cor, uma fonte, um texto). Para mudanças maiores, escreva CSS em cima de html[sw-theme="dark"].
• Na primeira visita sem sw-day-default, o tema segue o do aparelho e já fica salvo; se a pessoa mudar o tema do aparelho depois, o site continua no que foi salvo até ela clicar no botão.