Gerador de tema claro e escuro (variáveis CSS)

Gerador de tema claro e escuro (variáveis CSS): para que serve

Um tema escuro bem feito não é a inversão do claro. A partir da cor principal da sua marca, o gerador monta as variáveis CSS dos dois temas (fundo, superfície, borda, texto, texto secundário, cor principal e o texto sobre ela) com cinzas neutros ou puxados para a cor da marca.

Cada par de cores tem o contraste calculado pela fórmula da WCAG e marcado como AAA, AA ou insuficiente, e a cor principal é ajustada para passar de 4,5:1 nos dois temas. O código troca de tema pelo modo do sistema (prefers-color-scheme) e, se quiser, também por um botão com data-theme.

Como usar

1. Escolha a cor principal.
2. Confira a prévia e a tabela de contraste.
3. Copie as variáveis CSS.

Quando usar

• Criar o modo escuro de um site.
• Montar a paleta de um projeto novo.
• Conferir a acessibilidade das cores.

Perguntas frequentes

Por que o modo escuro não é só inverter as cores?

Inverter deixa o fundo preto puro e as cores da marca berrantes, cansando a vista. Um bom tema escuro usa um fundo cinza bem escuro, texto quase branco e uma versão mais clara da cor principal, para manter o contraste sem ofuscar.

O que significam AA e AAA no contraste?

São níveis das diretrizes de acessibilidade WCAG. AA pede contraste de pelo menos 4,5:1 para texto normal; AAA, 7:1. O gerador mostra a razão de cada par de cores e avisa quando algum fica abaixo de 4,5:1.

Como trocar de tema com um botão?

O código responde ao modo do sistema (prefers-color-scheme) e também ao atributo data-theme no html. Um botão que coloca data-theme="dark" ou "light" força o tema escolhido; a ferramenta Botão de modo escuro deste site gera esse botão.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas