Tema escuro (dark mode)

Mais do que inverter fundo e texto: hierarquia por luminancia e camadas.

GuiasGlossario › Tema escuro

Em uma frase

Tema escuro e uma variante de interface em que superficies predominantes sao escuras, texto e iconografia tendem a tons claros, e estados (hover, selecao, foco) precisam ser reequilibrados para manter contraste perceptivo e conforto em ambientes com pouca luz ambiente.

Elevacao sem sombra forte

Em material design e derivados, "elevar" um cartao no modo escuro costuma significar clarear levemente o fundo do cartao em relacao ao fundo da pagina, nao apenas projetar sombra. A pilha visual continua legivel porque o olho le diferenca de luminancia, nao porque o bloco flutue.

Preto puro

#000000 em tela OLED economiza energia, mas em leitura longa pode causar halacao com texto branco puro. Muitos produtos usam cinza muito escuro (#121212, #1a1d28) e branco levemente suavizado para corpo de texto.

Tokens

O ideal e nao duplicar manualmente dezenas de hex; usar variaveis como --surface-0, --surface-1, --text-primary para claro e escuro. O gerador de tema claro e escuro do site produz um bloco inicial; o simulador mostra como primaria e superficie conversam.

Ver tambem: Luminancia · Gamut