Fornecer temas alternativos para o seu site tem um apelo significativo. Ele não apenas permite que você altere toda a aparência do seu site com um clique de um botão, mas também se tornou um importante recurso de acessibilidade.
Existem várias maneiras de criar temas personalizados usando Tailwind CSS , uma estrutura CSS que prioriza o utilitário. Neste artigo, abordaremos as várias maneiras de implementar temas alternativos e os prós e contras de cada método.
Temas com plug-ins
A maneira mais fácil de criar um tema para seu site Tailwind é usar suas cores em um modo (tema) e habilitar um plugin como Nightwind para invertê-lo. Nightwind mapeia sua paleta de cores para que uma cor da escala 500 no modo claro se torne 400 no modo escuro, ou bg-red-900 em um modo se torna bg-red-50 no outro, por exemplo.
Para evitar essa inversão de cores no Nightwind, você pode usar a classe de utilitário nightwind-prevent, que desativa os efeitos do Nightwind para o elemento sem afetar seus nós descendentes. Usar nightwind-prevent-block, por outro lado, cobre os descendentes também.
Prós em usar Nightwind para temas
Um processo automático e, portanto, requer o mínimo de esforço Certos efeitos de plug-in geralmente pode ser substituído
Contras ao uso do Nightwind
Muito determinístico. Por exemplo, se você usar bg-white para o plano de fundo do site, a variante do modo escuro disso é um desagradável breu
Usando o modo escuro integrado no Tailwind CSS
Na forma de uma variante , O Tailwind fornece uma API de temas que fornece o máximo de controle de todos os métodos que discutiremos neste artigo. Por padrão, a variante escura é habilitada apenas para classes relacionadas a cores, como texto, fundo e cores de borda.
A rápida raposa marrom pula sobre o cachorro preguiçoso
Usando esta marcação, a classe dark: text-white tornará o parágrafo branco quando o modo escuro estiver habilitado. Esta é uma abordagem muito mais explícita e poderosa para os temas do que usar um plug-in.
Usando essa API, você pode criar um site que parece completamente diferente entre os modos claro e escuro. Aqui, estamos exibindo uma imagem diferente com base no tema:
Aqui está um excelente exemplo de as muitas possibilidades por trás da API do modo escuro no Tailwind , onde toda a aparência do site muda quando está no modo escuro, em vez de apenas inverter as cores:
Ativando escuro modo com Tailwind CSS
O Tailwind oferece suporte a duas estratégias para suas variantes de modo escuro: mídia e classe.
//tailwind.config.js module.exports={darkMode:’media’,//ou’class’}
A estratégia de mídia seleciona o tema atual nas configurações do próprio sistema operacional do usuário para o modo escuro, consultando o prefer-color-scheme , gerando CSS parecido com:
@media (preferers-color-scheme: dark) {.dark \: bg-white {cor de fundo: branco; }}
Usando essa estratégia, o usuário só pode alternar os temas alternando a preferência do modo escuro no nível do sistema operacional.
É aqui que entra a estratégia da classe. Ela fornece a você mais controle sobre o tema atual do seu aplicativo ativando o modo escuro usando o escopo CSS através do nome da classe, escuro. Isso significa que o modo escuro será habilitado para os descendentes de qualquer elemento com a classe escuro:
.dark.dark \: bg-white {background-color: white; }
