Tema Escuro
A aplicação tem tema claro e escuro — claro por padrão, mas segue automaticamente o sistema operacional/navegador quando o usuário nunca escolheu um dos dois manualmente. A escolha (Claro/Escuro/Sistema) fica no botão de sol/lua do cabeçalho e é salva só no aparelho, não na conta.
Só os tons neutros (fundo, borda, texto) mudam entre os temas — a escala de marca e as cores de status (ver {comp:estilo-cores}) são as mesmas nos dois.
Como funciona
O botão de aparência (ícone de sol/lua) fica no cabeçalho da aplicação, ao lado do sino de notificações — e aqui mesmo na documentação, ao lado do buscador. Ele guarda a escolha só neste aparelho (não é uma preferência de conta), com 3 opções:
Claro
Sempre claro, ignora o sistema.
Escuro
Sempre escuro, ignora o sistema.
Sistema (padrão)
Segue o SO/navegador — muda sozinho se ele mudar.
Fundos e overlay do tema escuro
surface-muted
Fundo principal (base) · #141416
surface
Fundo secundário / cards · #1f1f23
surface-elevated
Fundo elevado (hover / popover) · #27272a
border
Borda / divisores · #2c2c31
border-subtle
Borda sutil · #3a3a40
foreground
Texto principal · #f4f4f5
muted-foreground
Texto secundário · #a1a1aa
overlay
Overlay (backdrop de modal/drawer) · rgb(0 0 0 / 60%)
A escala de marca (brand-50…900) e as cores de status (âmbar, azul, esmeralda, rosa, violeta) não mudam entre os temas — ver {comp:estilo-cores}.
Componentes no escuro
Título do card
Mesmo componente real (Card/CardContent) usado no resto da aplicação.