Existen diferentes maneras de crear un dark mode con Tailwind CSS. En este tutorial aprenderás una manera rápida y sencilla de implementarlo utilizando clases. Lo que nos permite Tailwind de esta manera es modificar los estilos de nuestra página agregando o quitando la clase ‘dark’ a nuestra etiqueta ‘html’.
Para ello vamos a realizar unas configuraciones dentro de nuestro archivo de configuración de Tailwind, agregar la funcionalidad para cambiar entre dark y light mode con JavaScript y aprender cómo indicar qué estilos tendrá cada elemento cuando esté activado el modo oscuro.
1 - El primer paso es entrar en el archivo de configuración de Tailwind (tailwind.config.js) y añadir la siguiente línea:
module.exports = {
darkMode: 'class', // Agrega esta lineacontent: ['./public/index.html', './src/**/*.{html,js}'],
2 - En tu index.html debes tener un elemento ‘button’ para añadirle la funcionalidad de alternar el dark mode. En mi casa agregué un botón con el id ‘toggle’ que dentro contiene un ícono en formato .svg.
<buttonid="toggle"><svgwidth="30"height="30"viewBox="0 0 29 29"fill="none"xmlns="http://www.w3.org/2000/svg"></svg></button>3 - Dentro de tu archivo main.js o dentro del index.html en una etiqueta ‘’ implementaremos el código para darle funcionalidad al botón.
<script>const htmlElement = document.querySelector('html')
// traemos nuestro elemento html utilizando document.querySelectorconst toogleButton = document.querySelector('#toggle')
// traemos nuestro botón
toogleButton.addEventListener('click', () => darkMode())
// le añadimos un escuchador de eventos para el evento 'click' que dispare la función darkModeconst darkMode = () => {
htmlElement.classList.contains('dark') ?
htmlElement.classList.remove('dark') :
htmlElement.classList.add('dark')
}
// esta función verifica si la etiqueta html posee la clase dark. Si la posee, la remueve, si no la posee la añade.</script>4 - Una vez finalizado esto, estamos en condiciones de agregar los estilos para el dark mode. Usualmente, el dark mode lo vamos a crear luego de haber dado los estilos por default a nuestra página. Lo que vamos a hacer entonces es revisar cuales son los estilos que queremos cambiar de nuestra página cuando esté activo este modo, por ejemplo, el color de fondo.
<body class="font-Montserrat dark:bg-gray-900 ">
En este caso, el color de fondo del body es por default blanco, pero cuando el dark mode esté activo va a cambiar a un gray-900 (uno de los colores que nos da Tailwind por defecto). Esto lo implementamos agregando ‘dark:’ y luego la clase de Tailwind que necesitemos <ins>sin espacios</ins>.
Aquí dejo otro ejemplo de un párrafo con un color rojo de texto en light mode, un color blanco en dark mode:
<pclass="text-3xl font-semibold text-primary dark:text-white ">Recomendados</p>Aquí el resultado final:
