🎨Geradores

Gerador de color-scheme

Monta a meta color-scheme para indicar suporte a light/dark no navegador.

Valor (light, dark, light dark)

color-scheme: a propriedade que todo site dark mode esquece

A propriedade CSS color-scheme — ou seu equivalente em meta tag <meta name="color-scheme"> — diz ao navegador em quais esquemas de cor a página aceita renderizar. Valores aceitos são normal, light, dark ou qualquer combinação separada por espaço. O efeito é sutil mas transformador: quando a página declara light dark, o navegador troca automaticamente as cores padrão dos controles de formulário, da scrollbar, do canvas, do cursor do sistema e até do currentColor de SVGs para casar com a preferência do SO — sem CSS customizado para essas primitivas.

/* Opção em CSS */
:root { color-scheme: light dark; }

/* Opção em HTML, parseada antes pelo navegador */
<meta name="color-scheme" content="light dark">

Por que um "site branco" também precisa declarar

Mesmo que seu design seja só claro, declarar color-scheme: light explicitamente impede que o Chrome no Android e o Edge apliquem suas heurísticas de auto-dark — recursos que invertem a página algoritmicamente quando o usuário ativa dark mode no SO e o site não optou. A inversão automática geralmente produz resultado feio (fundos cinzentos, cores de marca desbotadas, contraste quebrado). Definir a propriedade como only light é um opt-out limpo; definir como light dark é um opt-in em que você se compromete a tratar com seu próprio tema escuro.

Media query prefers-color-scheme e integração com Tailwind

A media query CSS @media (prefers-color-scheme: dark) é o hook em runtime que permite trocar sua paleta com base na preferência do usuário. A variante dark: do Tailwind é um wrapper em volta dessa media query (ou de uma estratégia por classe, se você preferir controle manual). Combinar color-scheme com a media query dá uma pilha consistente: o navegador estiliza suas primitivas e o seu CSS estiliza seus widgets customizados.

:root {
  color-scheme: light dark;
  --bg: white;
  --fg: #111;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b0b0b; --fg: #e6e6e6; }
}
body { background: var(--bg); color: var(--fg); }

Seletor de tema manual com CSS custom properties

Quando o usuário quer controle explícito (um botão que força dark independentemente do SO), o padrão comum é: salvar a escolha no localStorage, adicionar um atributo data-theme no <html> e trocar as variáveis CSS com base nele. Combine com a propriedade color-scheme — também sobrescritível inline — para que as primitivas do navegador sigam a escolha manual. Senão, scrollbars e inputs continuam mostrando a preferência do SO enquanto o resto da página está no tema forçado, gerando uma divisão visual desagradável.

[data-theme="dark"]  { color-scheme: dark; --bg: #0b0b0b; --fg: #eee; }
[data-theme="light"] { color-scheme: light; --bg: white;   --fg: #111; }

// JS
const saved = localStorage.getItem('theme') ?? 'auto';
document.documentElement.dataset.theme = saved;

SVG, currentColor e bateria em telas OLED

SVG inline com fill="currentColor" inverte automaticamente quando o color-scheme muda, porque o color herdado muda — sem JS.
Telas OLED (a maioria dos smartphones modernos) consomem ~20% menos bateria exibindo majoritariamente pixels pretos; um tema escuro real é ganho mensurável em acessibilidade e sustentabilidade.
Use pesos de fonte um pouco mais leves no dark — texto claro em fundo escuro aparenta mais bold por halação; trocar 400 por 350 (ou 500 por 400) compensa.
Cores de marca quase sempre precisam de tuning: um vermelho saturado vibrante que fica ótimo no branco pode vibrar doloroso no preto. Dessature 10–20% para a variante escura.
Apple Human Interface Guidelines e Material You formalizam paletas tonais para temas adaptativos — vale emprestar a metodologia mesmo fora de plataformas nativas.

Perguntas frequentes

Meu site é só claro — preciso de color-scheme? Sim. Declare color-scheme: light explicitamente para optar contra os recursos de auto-dark do navegador e documentar a intenção.

Ícones SVG funcionam com color-scheme? Sim, desde que use fill="currentColor" ou stroke="currentColor". A cor herdada segue o esquema automaticamente.

Posso deixar o usuário sobrescrever a preferência do SO? Sim. Use um seletor manual com localStorage e atributo data-theme no <html>, e sobrescreva color-scheme inline para que as primitivas do navegador casem com a escolha manual.

Suporte de navegador em 2026? Chrome 81+, Edge 81+, Firefox 96+, Safari 13+. A cobertura combinada passa de 97% do tráfego global. Seguro como declaração baseline.

Ferramentas Relacionadas

📐

CSS cubic-bezier()

Crie curvas de easing CSS com cubic-bezier ajustando os pontos de controle visualmente. Veja a animação em tempo real e copie a função pronta para usar.

🔷

Gerador de Padrão SVG

Crie padrões SVG repetíveis para usar como fundo de sites: bolinhas, linhas, xadrez, grade, diagonal e hexágonos. Personalize cores e tamanho. Copie o código SVG ou o CSS background-image.

⏳

Gerador de Loader CSS (animado)

Gera o CSS completo de loaders animados comuns: spinner circular, dots pulsantes, barra de progresso, ring conic-gradient.