Repository navigation
Alternador de tema claro/escuro (claro como padrão) - #12
Merged
Merged
Conversation
Adiciona um botão para trocar entre tema claro e escuro. O padrão passa a ser claro para todos que acessam — inclusive quem tem o sistema no escuro: o dark deixa de seguir `prefers-color-scheme` e passa a valer só quando escolhido, pelo atributo `data-theme="dark"` no <html> (como a ADR 0011 já previa). - globals.css: gatilho do dark vira `:root[data-theme="dark"]`; classes de ícone (lua/sol) trocadas por CSS, acompanhando o tema sem piscar. - components/theme-toggle.tsx: alternador (2 estados) que grava a escolha em localStorage['maa-tema'] e liga/desliga o data-theme. - layout raiz: script inline reaplica o tema antes da pintura (sem flash) e suppressHydrationWarning no <html>. - Botão na sidebar (desktop) e folha de conta (mobile) do app, no cabeçalho da landing e das páginas legais, e fixo no canto das telas de auth. - Atualiza a ADR 0011. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LRB4q3trRe3bYwbRrXninV
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adiciona um botão para alternar entre tema claro e escuro. O tema claro é o padrão para quem acessa — inclusive quem tem o sistema operacional no escuro.
O que muda
@media (prefers-color-scheme: dark)e passa a ser o atributodata-theme="dark"no<html>. Sem escolha salva, nenhum atributo é posto e o ramo claro do:rootvale — o escuro é opt-in pelo botão. A ADR 0011 já previa isto: "é só sobrescrever as variáveis num[data-theme]".localStorage['maa-tema']e é reaplicada por um script inline no<head>antes da pintura, sem flash (FOUC). O<html>recebesuppressHydrationWarningporque o script muta o atributo antes da hidratação.Onde fica o botão
Ícone de lua (tema claro → vira escuro) / sol (tema escuro → vira claro):
Acessibilidade
aria-label/titledescrevendo a ação, foco visível no padrão do app.[data-theme](não por estado do React), então acompanha o tema sem piscar nem descasar na hidratação.Arquivos
components/theme-toggle.tsx(novo) — o alternadorapp/(auth)/layout.tsx(novo) — chrome das telas de auth com o botão no cantoapp/globals.css,app/layout.tsx,components/nav.tsx,components/conta-sheet.tsx,app/page.tsx,app/(legal)/layout.tsxdocs/adr/0011-dark-mode-tema.md— seção de atualizaçãoVerificação
npm run typecheck✓ ·npm run lint(apenas o aviso pré-existente da fonte Poppins) ✓ ·npm test→ 57 testes passando ✓ ·npm run build✓ —/logine/nova-senhapré-renderizam como estáticas, confirmando que não há mismatch de hidratação.🤖 Generated with Claude Code
https://claude.ai/code/session_01LRB4q3trRe3bYwbRrXninV
Generated by Claude Code