Neste artigo, exploraremos como implementar o modo escuro no Tailwind CSS. O modo escuro se tornou uma tendência de design popular, pois proporciona uma melhor experiência do usuário em ambientes com pouca luz e reduz o cansaço visual. O Tailwind facilita o suporte ao modo escuro com seus utilitários integrados.

1. Como funciona o modo escuro no Tailwind

Tailwind oferece uma abordagem simples para implementar o modo escuro por meio da variante escura. Por padrão, ele verifica as configurações do sistema do usuário para o modo escuro e aplica os estilos correspondentes.

Configurando o modo escuro no Tailwind:

Em seu arquivo tailwind.config.js, habilite o modo escuro configurando-o como mídia (preferência do sistema) ou classe (alternância manual):

module.exports = {
  darkMode: 'media', // or 'class'
}

• mídia: ativa o modo escuro com base nas configurações do sistema operacional do usuário.
• class: permite alternar manualmente o modo escuro adicionando uma classe escura.

2. Estilo para modo escuro

Depois que o modo escuro estiver ativado, você poderá usar a variante escura para aplicar estilos especificamente para o modo escuro.

Exemplo:

    This is a dark mode toggle example

• bg-white e text-black aplicam-se ao modo claro.
• dark:bg-gray-800 e dark:text-white aplicam-se quando o modo escuro está ativo.

Essa flexibilidade permite que você estilize seus componentes de maneira diferente para os modos claro e escuro.

3. Modo escuro com estratégia de classe do Tailwind

Se você deseja que os usuários alternem entre os modos claro e escuro manualmente, use a estratégia de classe. Isso permite alternar o modo escuro adicionando ou removendo a classe escura no elemento ou

Exemplo com JavaScript:

  
    

      Toggle dark mode manually
    
    
      Toggle Dark Mode
    
  

Com esta configuração, clicar no botão alternará a classe escura e alternará entre os modos claro e escuro.

4. Usando o modo escuro para elementos específicos

Às vezes, você pode querer que apenas seções específicas da sua página da web mudem para o modo escuro, deixando outras partes inalteradas. Você pode aplicar o estilo do modo escuro por elemento, agrupando as classes do modo escuro em determinados contêineres.

Exemplo:

    

        This section is in dark mode, while the outer section remains light.
    

Este método oferece mais controle sobre quais partes do seu design são afetadas pelo modo escuro.

5. Adaptando as cores do modo escuro

Você também pode personalizar as cores do modo escuro em seu arquivo tailwind.config.js estendendo a paleta de cores.

Exemplo:

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

Agora, você pode usar essas cores personalizadas do modo escuro como esta:

    Custom Dark Mode Colors

Conclusão

Tailwind CSS torna a implementação do modo escuro simples, seja por meio de configurações do sistema ou alternância manual. Usando a variante escura, você pode criar um design visualmente atraente que se ajusta perfeitamente às diferentes preferências do usuário.

Siga-me no LinkedIn- Ridoy Hasan
Visite meu site- ridoyweb.com
leia a seguir-
Melhores práticas para escrever CSS