Implementar modo escuro com Claude Code

Comece pelo risco de produto

Implementar modo escuro com Claude Code não é pedir ao Claude Code uma tela mais bonita. O objetivo é melhorar uma interface real sem quebrar conversão, leitura, acessibilidade ou layout móvel. Em produção, estados vazios, carregamento, erros, foco de teclado, textos longos, anúncios, blocos de código e CTA importam muito.

Leia também claude code design system, claude code accessibility, claude code code review. As referências oficiais são Claude Code docs, MDN prefers-color-scheme, MDN color-scheme, WCAG contrast. O pedido ao Claude Code deve conter objetivo, limites, use case, pitfall e verificação.

Prompt recomendado

Implemente esta melhoria com a menor mudança segura.
Respeite componentes, tokens de design e rotas existentes.
Cubra use case, pitfall, acessibilidade, mobile e estados de erro.
Retorne código copiável e uma review checklist.

Use case checklist

1. Landing pages e artigos onde o leitor precisa ver o próximo passo.
2. Dashboards SaaS com carregamento, vazio, erro e sucesso.
3. Compra, cadastro e consulta onde o botão principal precisa continuar claro.
4. Revisão em equipe, com código e critérios gerados por Claude Code.

Código de implementação

:root {
  color-scheme: light;
  --color-page: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-border: #dbe3ef;
  --color-link: #2563eb;
  --color-focus: #f59e0b;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #0b1120;
  --color-surface: #111827;
  --color-text: #f8fafc;
  --color-muted: #cbd5e1;
  --color-border: #334155;
  --color-link: #93c5fd;
  --color-focus: #fbbf24;
}

body {
  background: var(--color-page);
  color: var(--color-text);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

const storageKey = "theme";
const root = document.documentElement;
const stored = localStorage.getItem(storageKey);
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = stored === "light" || stored === "dark" ? stored : prefersDark ? "dark" : "light";

root.dataset.theme = theme;

type Theme = "light" | "dark" | "system";

export function ThemeToggle({ value, onChange }: { value: Theme; onChange: (theme: Theme) => void }) {
  return (
    <fieldset aria-label="Theme">
      {(["light", "dark", "system"] as const).map((theme) => (
        <button
          key={theme}
          type="button"
          aria-pressed={value === theme}
          onClick={() => onChange(theme)}
        >
          {theme}
        </button>
      ))}
    </fieldset>
  );
}

Pitfall checklist

• Otimizar só para screenshot pode piorar o fluxo real.
• Depender apenas de cor ou movimento prejudica acessibilidade.
• Não testar em 375px pode criar rolagem horizontal.
• Ignorar dados vazios, rótulos longos e rede lenta gera bugs.
• Mudanças sem relação aumentam o custo de revisão.

Verificação

Peça uma segunda passada apenas de review. Claude Code deve listar arquivos alterados, riscos, checagens de navegador e testes manuais. Depois revise no mobile, confirme ausência de overflow, rolagem do bloco de código, CTA visível e foco claro.

Monetização

Esse trabalho afeta anúncios, cards de produto, links de consulta, preços e formulários. Para aplicar em um repositório real, a página de treinamento e consultoria Claude Code transforma isso em processo repetível.

Nota de teste prático

Testei em três etapas: implementação, review e verificação mobile. O diff ficou menor e os problemas de layout e acessibilidade apareceram antes do deploy.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.

Notas extras de revisão

• Compare screenshots antes e depois, olhando CTA, anúncios, texto, formulários e blocos de código.
• Pergunte ao Claude Code o que pode ser removido, quais nomes não combinam e quais suposições são arriscadas.
• Antes do deploy, teste mobile, desktop, teclado, rede lenta, dados vazios e reload.