Tema escuro (dark mode)

Mais do que inverter fundo e texto: hierarquia por luminância e camadas.

GuiasGlossário › Tema escuro

GlossárioInterfaceVer todos os conceitos

Em uma frase

Tema escuro é uma variante de interface em que superfícies predominantes são escuras, texto e iconografia tendem a tons claros, e estados (hover, seleção, foco) precisam ser reequilibrados para manter contraste perceptivo e conforto em ambientes com pouca luz ambiente.

Elevação sem sombra forte

Em material design e derivados, "elevar" um cartão no modo escuro costuma significar clarear levemente o fundo do cartão em relação ao fundo da página, não apenas projetar sombra. A pilha visual continua legível porque o olho lê diferença de luminância, não porque o bloco flutue.

Preto puro

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

Tokens

O ideal e não duplicar manualmente dezenas de hex; usar variáveis 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 primária e superfície conversam.