Modo oscuro

Tanto si estas utilizando nuestro tema hijo, como si lo estas configurando de forma manual, nuestros componentes y bloques estan optimizados para usar el modo oscuro, aqui te vamos a explicar como funciona.

El modo oscuro es una característica en Tailwind CSS que te permite alternar entre dos conjuntos de colores y estilos: uno para el modo claro (light) y otro para el modo oscuro (dark). Esto es especialmente útil para ofrecer una experiencia de usuario más agradable y adaptativa, ya que permite a los usuarios elegir entre un tema claro y uno oscuro según sus preferencias..

La manera más sencilla de implementar el modo oscuro es a través del uso del tema hijo, el cual automatiza la adición del interruptor de modo oscuro y la generación de una paleta alternativa de colores para la versión en modo oscuro de los tonos que hayas elegido para tu proyecto. Sin embargo, en esta guía, te proporcionaremos el código que debes insertar en el encabezado o pie de página de tu sitio web para mostrar este interruptor y te explicaremos cómo funciona y cómo puedes personalizar su comportamiento de manera sencilla.

Para habilitar el modo oscuro de forma manual, desbes proceder con lo siguientes pasos, si has utilizado nuestro archivo de configuración ya debes tener el primer paso listo, no obstante lo vamos a explicar para que puedas comprender o bien configurar Tailwind CSS desde cero.

Configura el modo oscuro en tu archivo de configuración: Abre tu archivo de configuración de Tailwind y añade la sección llamada darkMode. Aquí puedes configurar el modo oscuro de la siguiente manera:

module.exports = {
  // ...
  darkMode: 'class', // Opciones: 'class' o 'media'
  // ...
}
  • 'class': Con esta opción, Tailwind CSS agrega una clase CSS especial a que indica si el modo oscuro está habilitado. La clase predeterminada es .dark. Esto permite cambiar el tema del sitio aplicando clases específicas en tu código HTML o plantillas. Por ejemplo, puedes usar dark:text-white para aplicar un estilo de texto blanco en el modo oscuro.
  • 'media': Con esta opción, Tailwind CSS utiliza una consulta de medios CSS (@media (prefers-color-scheme: dark)) para aplicar los estilos del modo oscuro si el sistema operativo del usuario está configurado en modo oscuro. Esta opción no requiere clases adicionales en tu HTML.

Por defecto nosotros usaremos la utilización de 'class'.

Definir estilos específicos para el modo oscuro: Puedes definir estilos específicos para el modo oscuro en tu archivo de configuración de Tailwind bajo la sección theme. Aquí puedes ajustar colores, fondos y otros estilos para adaptarlos al modo oscuro.

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        dark: {
          primary: '#EDEDED', // Color primario en modo oscuro
          // Define más colores aquí
        },
      },
    },
  },
  // ...
}

Usar clases de utilidad de modo oscuro: Una vez configurado el modo oscuro, puedes aplicar clases de utilidad de modo oscuro directamente en tu código HTML o plantillas. Por ejemplo, puedes usar dark:bg-dark-primary para cambiar el fondo a un color específico en el modo oscuro.

<div class="bg-primary dark:bg-dark-primary">Contenido</div>

Puedes usar cualquier de ambos enfoques, o incluso una combinación de ambos, Nosotros preferimos utilizar una combinación, ya que nos permite por una lado realizar una configuración básica para evitarnos poner casles de utilidad de forma constante y usar la segunda opción para casos específos.