EspañolBotão de modo escuro para site
Escolha as cores dos dois temas. O código traz as variáveis CSS, o script que evita o piscar e o botão acessível com aria-pressed.
Como usarTema claro e escuro com um botão
1. No <head>, antes do CSS
2. CSS
3. Botão e script, no corpo da página
Disponível em: 
Botão de modo escuro para site: para que serve
O modo escuro virou padrão nos celulares, e muita gente espera que os sites acompanhem. Este gerador monta o tema claro e escuro com variáveis CSS e prefers-color-scheme, de modo que o site siga o sistema sozinho, mais um botão para a pessoa escolher outro tema só no seu site.
O código vem em três partes: uma linha para o head que aplica a escolha salva antes da página aparecer (sem o flash de tema errado), o CSS com color-scheme para campos e barras de rolagem acompanharem, e o botão com aria-pressed e ícones de sol e lua.
Como usar
- Escolha as cores do tema claro e do escuro.
- Teste o botão na prévia.
- Cole a linha no head, o CSS e o botão no lugar certo.
Quando usar
- Blog e sites de conteúdo.
- Sistemas e painéis.
- Portfólio de desenvolvedor.
Perguntas frequentes
Como evitar o flash de tema claro ao carregar?
O script que lê a escolha salva precisa rodar no head, antes de a página aparecer. O código vem separado em duas partes: uma linha para o head e o botão para o corpo da página.
O que faz o color-scheme?
Avisa o navegador se a página está clara ou escura, para ele também ajustar barras de rolagem, campos de formulário e o fundo padrão. Sem ele, o modo escuro fica com campos brancos destoando.
Precisa de botão se o site já segue o sistema?
Não é obrigatório: só com prefers-color-scheme o site já acompanha o tema do celular ou do computador. O botão é útil para quem quer um tema diferente do sistema só no seu site.
É 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.