En este artículo, exploraremos cómo implementar el modo oscuro en Tailwind CSS. El modo oscuro se ha convertido en una tendencia de diseño popular, ya que proporciona una mejor experiencia de usuario en entornos con poca luz y reduce la fatiga visual. Tailwind facilita la compatibilidad con el modo oscuro con sus utilidades integradas.

1. Cómo funciona el modo oscuro en Tailwind

Tailwind ofrece un enfoque simple para implementar el modo oscuro a través de la variante oscura. De forma predeterminada, verifica la configuración del sistema del usuario para el modo oscuro y aplica los estilos correspondientes.

Configurar el modo oscuro en Tailwind:

En su archivo tailwind.config.js, habilite el modo oscuro configurándolo en medios (preferencia del sistema) o clase (alternancia manual):

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

• media: activa el modo oscuro según la configuración del sistema operativo del usuario.
• clase: le permite alternar manualmente el modo oscuro agregando una clase oscura.

2. Estilo para modo oscuro

Una vez habilitado el modo oscuro, puedes usar la variante oscura para aplicar estilos específicos para el modo oscuro.

Ejemplo:

    This is a dark mode toggle example

• bg-white y text-black se aplican al modo claro.
• dark:bg-gray-800 y dark:text-white se aplican cuando el modo oscuro está activo.

Esta flexibilidad le permite diseñar sus componentes de manera diferente para los modos oscuro y claro.

3. Modo oscuro con la estrategia de clase Tailwind

Si desea que los usuarios cambien manualmente entre los modos claro y oscuro, utilice la estrategia de clase. Esto le permite alternar el modo oscuro agregando o eliminando la clase oscura en el elemento o

Ejemplo con JavaScript:

  
    

      Toggle dark mode manually
    
    
      Toggle Dark Mode
    
  

Con esta configuración, al hacer clic en el botón se alternará la clase oscura y se cambiará entre los modos claro y oscuro.

4. Usar el modo oscuro para elementos específicos

A veces, es posible que desees que solo secciones específicas de tu página web cambien al modo oscuro y dejes otras partes sin cambios. Puede aplicar el estilo del modo oscuro por elemento envolviendo las clases del modo oscuro dentro de ciertos contenedores.

Ejemplo:

    

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

Este método te brinda más control sobre qué partes de tu diseño se ven afectadas por el modo oscuro.

5. Adaptación de los colores del modo oscuro

También puedes personalizar los colores del modo oscuro en tu archivo tailwind.config.js ampliando la paleta de colores.

Ejemplo:

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

Ahora puedes usar estos colores personalizados del modo oscuro como este:

    Custom Dark Mode Colors

Conclusión

Tailwind CSS hace que la implementación del modo oscuro sea sencilla, ya sea a través de la configuración del sistema o al alternar manualmente. Con la variante oscura, puedes crear un diseño visualmente atractivo que se ajuste perfectamente a las diferentes preferencias del usuario.

Sígueme en LinkedIn- Ridoy Hasan
Visita mi sitio web- ridoyweb.com
leer siguiente-
Mejores prácticas para escribir CSS