Implementa suporte a dark mode usando variáveis CSS e a media query prefers-color-scheme.
:root {
--cor-fundo: #ffffff;
--cor-texto: #1a1a1a;
--cor-borda: #e2e8f0;
--cor-card: #f8fafc;
--cor-accent: #3b82f6;
}
@media (prefers-color-scheme: dark) {
:root {
--cor-fundo: #0f172a;
--cor-texto: #f1f5f9;
--cor-borda: #334155;
--cor-card: #1e293b;
--cor-accent: #60a5fa;
}
}
/* Ou via classe no HTML (para toggle manual) */
[data-tema="escuro"] {
--cor-fundo: #0f172a;
--cor-texto: #f1f5f9;
--cor-borda: #334155;
}Link "pular para o conteúdo" que aparece no foco do teclado, melhorando a acessibilidade.
Cabeçalho que muda de estilo ao rolar a página, usando Intersection Observer.
Utilitário simples para ler, escrever e remover cookies no navegador.
Estrutura completa de variáveis CSS para cores, tipografia, espaçamento e breakpoints.