JS Module

Y2Day 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 y2day em qualquer elemento

2. Como funciona

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

Tema escuro (padrão Y2)

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

Tema claro

LIGHT MODE
--y2-bg-bas: neu-1 --y2-txt-bas: neu-12 --y2-bor: neu-3 
/* Variáveis semânticas gerenciadas automaticamente pelo Y2Day */
html[y2-theme="light"] {
    --y2-bg-bas:  var(--y2-neu-1);
    --y2-bg-sur:  var(--y2-neu-2);
    --y2-bg-sec:  var(--y2-neu-3);
    --y2-txt-bas: var(--y2-neu-12);
    --y2-txt-mut: var(--y2-neu-8);
    --y2-bor:     var(--y2-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 y2-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 yd:day:changed
✓ ícone ☀️/🌙 auto-injetado

6. API JavaScript

Controle programático completo.

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

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

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

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

// Exemplo real: sincronizar Chart.js com o tema
document.documentElement.addEventListener('yd:day:changed', ({ 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
y2day Transforma elemento em botão de toggle
y2day-img-[theme] Troca o src da imagem ao mudar de tema
y2day-bg-[theme] Troca o background-image ou cor ao mudar de tema
y2day-font-[theme] Troca a família de fonte ao mudar de tema
Y2Day.set(theme) Altera o tema via JS - 'light' | 'dark'
Y2Day.toggle() Inverte o tema atual
Y2Day.theme Retorna o tema ativo atualmente
yd:day:changed Evento disparado no <html> ao trocar de tema