JS Module

SWDay Framework

Toggle de tema escuro/claro com persistência em localStorage, sincronização entre abas, detecção de preferência do sistema e atalho de teclado - zero configuração.

1. Demo

O botão no header desta página já está ativo. Clique e veja toda a documentação mudar de tema.

Botões de toggle - adicione sw-day em qualquer elemento

2. Como funciona

SWDay adiciona sw-theme="dark|light" no elemento <html> e sobrescreve as variáveis CSS semânticas do SW.

Tema escuro (padrão SW)

DARK MODE
--sw-bg-bas: neu-12 --sw-txt-bas: neu-2 --sw-bor: neu-10

Tema claro

LIGHT MODE
--sw-bg-bas: neu-1 --sw-txt-bas: neu-12 --sw-bor: neu-3 
/* Variáveis semânticas gerenciadas automaticamente pelo SWDay */
html[sw-theme="light"] {
    --sw-bg-bas:  var(--sw-neu-1);
    --sw-bg-sur:  var(--sw-neu-2);
    --sw-bg-sec:  var(--sw-neu-3);
    --sw-txt-bas: var(--sw-neu-12);
    --sw-txt-mut: var(--sw-neu-8);
    --sw-bor:     var(--sw-neu-4);
}

3. Sincronização de Mídia

Alterne imagens e fundos automaticamente sem escrever uma linha de CSS extra.

Troca de Imagem (src)

Toggle Img

Background Image

área com BG dinâmico

4. Sincronização de Fontes

Alterne a tipografia conforme o ambiente para máxima legibilidade.

Esta fonte muda conforme o tema!

No tema claro usamos Sans-Serif (Outfit), no escuro usamos Mono (JetBrains).

5. Persistência + Sistema

O tema — salvo automaticamente e sincronizado entre abas.

Fluxo de decisão

1 localStorage sw-theme salvo?
2 Se não → prefers-color-scheme
3 Se não → padrão dark

Recursos automáticos

✓ Persiste entre sessões (localStorage)
✓ Sincroniza entre abas abertas
✓ Respeita prefers-color-scheme
✓ Atalho Ctrl+Shift+D
✓ Evento sw:theme:change
✓ ícone ☀️/🌙 auto-injetado

6. API JavaScript

Controle programático completo.

// Setar tema
SWDay.set('dark');
SWDay.set('light');

// Toggle (dark → light → dark)
SWDay.toggle();

// Ler tema atual
console.log(SWDay.theme); // 'dark' | 'light'

// Escutar mudança de tema
document.documentElement.addEventListener('sw:theme:change', (e) => {
    console.log('Tema:', e.detail.theme);
    // atualizar gráficos, ícones, etc.
});

// Exemplo real: sincronizar Chart.js com o tema
document.documentElement.addEventListener('sw:theme:change', ({ detail }) => {
    const isDark = detail.theme === 'dark';
    myChart.options.scales.x.grid.color = isDark ? '#333' : '#ddd';
    myChart.options.scales.y.grid.color = isDark ? '#333' : '#ddd';
    myChart.update();
});

7. Quick Reference

Atributo / API Ação
sw-day Transforma elemento em botão de toggle
sw-day-demo Marca um sw-day como exemplo — não impede o FAB padrão de aparecer
<html sw-day-no-fab> Desativa o FAB padrão nesta página (mesmo sem nenhum botão próprio)
<html sw-day-lock="dark|light"> Trava o tema — desativa toggle, atalho, storage e some com qualquer botão
sw-day-img-[theme] Troca o src da imagem ao mudar de tema
sw-day-bg-[theme] Troca o background-image ou cor ao mudar de tema
sw-day-font-[theme] Troca a família de fonte ao mudar de tema
SWDay.set(theme) Altera o tema via JS - 'light' | 'dark'
SWDay.toggle() Inverte o tema atual
SWDay.theme Retorna o tema ativo atualmente
sw:theme:change Evento disparado no <html> ao trocar de tema