Tratamento de cor

Interface escura

Dark interface

Organiza a hierarquia sobre fundos escuros com níveis de superfície e contraste próprios.

VISÃO GERALSeu espaço.
Outro tom.● Tudo em dia

Exemplo didático · Representação visual do padrão

Quando usar

Oferecer uma preferência visual ou integrar produtos com ambientes escuros.

Cuidados e acessibilidade

Não inverta cores mecanicamente; teste textos, gráficos, estados e imagens.

Como reconhecer

Fundos escuros, superfícies graduais e cores de destaque ajustadas à legibilidade.

Não confunda

Tema escuro não é automaticamente mais acessível nem adequado a toda pessoa.

Exemplo de código

:root { color-scheme: dark; }
body { background: #17191e; color: #f5f5f7; }
a { color: #b8a9ff; }

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie uma interface no estilo Interface escura (Dark interface) em português do Brasil. Organiza a hierarquia sobre fundos escuros com níveis de superfície e contraste próprios. Contexto de uso: Oferecer uma preferência visual ou integrar produtos com ambientes escuros. Estrutura: Fundos escuros, superfícies graduais e cores de destaque ajustadas à legibilidade. Características visuais: color-scheme: dark. Requisito: Não inverta cores mecanicamente; teste textos, gráficos, estados e imagens. Considere também: Tema escuro não é automaticamente mais acessível nem adequado a toda pessoa. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Aprofundar a referência ↗Copiar link deste termo ↗