Agregando el Dark Mode

No se compliquen con las cards (tarjetas), en el archivo index.css o tailwind.css como sea lo hallan nombrado, definan un estilo para las tarjetas pares y otro para las impares.

.card:nth-child(odd) {
  @apply bg-secondary text-white dark:bg-gray-700;
}
.card:nth-child(even) {
  @apply bg-white text-tertiary dark:bg-gray-800 dark:text-gray-300;
}

Briam Flores Torres

Es más sencillo solo utilizando la función toggle del classlist. Con esto simplementa agregará o quitará la clase según sea el caso correspondiente, quedaría de la siguiente manera:

const htmlElement = document.querySelector("html");
const toggleButton = document.querySelector("#toggle");

toggleButton.addEventListener("click", () =>{
	htmlElement.classList.toggle('dark');
})

José Miguel Duque Mejía

Pueden ahorrarse más definiciones de id’s (o clases si lo desean) si obtenemos todos los elementos que coinciden y les asignamos los eventos mediante un ciclo:

const htmlElement = document.querySelector('html');
const toggleButton = document.querySelectorAll('.toggle');
toggleButton.forEach( item => {
    item.addEventListener('click', () => {
        htmlElement.classList.toggle( 'dark' );
    });
});

Ahora, puedo asignar la clase (para mi caso) toggle en cualquier elemento que quiera darle el comportamiento y no tendré que escribir código adicional.

Platzinauta

Para agregar el dark mode se debe configurar el archivo de configuración tailwind.config.js agregando la propiedad darkMode seguido de la palabra ‘class’ (importante hacer build al guardar cambios).

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

En los elementos del sitio web se agrega la clase dark: seguido de la clase que tendrá el dark mode, por ejemplo:

<p class="text-3xl font-semibold text-primary dark:text-white">Recomendados</p>

–
Mi bloque de javacript en el archivo index.html:

    <script>
        const htmlElement = document.querySelector('html');
        const moonNav = document.querySelector('#moonNav');
        const moonTab = document.querySelector('#moonTab');
        const toggleButton = document.querySelector('#toggle');
        const toggleButtonSm = document.querySelector('#toggle-sm');

        toggleButton.addEventListener('click', toggleDarkMode);
        toggleButtonSm.addEventListener('click', toggleDarkMode);

        function toggleDarkMode() {
                htmlElement.classList.toggle('dark');
                moonNav.classList.toggle('dark');
                moonTab.classList.toggle('dark');
            }
    </script>

José Mauricio Lemús Rodezno

Otra forma de implementar el Dark Mode es utilizando Alpine.js

Primero agregamos el script de Alpine.js a nuestro index.html

 <script src="//unpkg.com/alpinejs" defer></script>

Luego agregamos el siguiente código a nuestra etiqueta html, que básicamente crea una variable que nos permitirá a partir de su valor asignar el valor de la clase dinámicamente.

<html lang="en" x-data="{dark:false}" x-bind:class="dark ? 'dark' : ''">

Para finalizar agregamos el siguiente código a nuestro botón de Dark Mode de modo que cada vez que hagamos click en el botón cambie el valor de la variable dark.

<button x-on:click="dark=!dark">
    <i class="fa-solid fa-moon"></i>
</button>

y eso seria todo ya tenemos nuestro Dark Mode 😀

Maria Cristina Ferraro Moretti

Así vamos hasta ahora!

Captura de pantalla 2023-01-12 a la(s) 4.14.55 p.m..png

Rubén Ernesto Aragón Gil

Estuve casi todo el curso sin poder usar los colores del framework, pero con esto ya me jaló:

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    "./src/**/*.{html,js}", "./public/index.html",
  ],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
    colors : {
      'primary':"#CC2D4A",
      'secondary':"#8FA206",
      'tertiary':"#61AEC9",
    },
    textColor:{
      'principal': '#CC2D4A',
      'secondary': '#8FA206',
      'tertiary': '#61AEC9',
    },
    fontFamily: {
      Montserrat: ["Montserrat", "sans-serif"],
    },
      backgroundImage: {
        'sanFrancisco': "url('../img/sanFrancisco.jpg')",
			  'sanFranciscoDesktop': "url('../img/sanFranciscoDesktop.jpg')",
			  'yosemite': "url('../img/yosemite.jpg')",
			  'LA': "url('../img/LA.jpg')",
			  'seattle': "url('../img/seattle.jpg')",
			  'new_york': "url('../img/new_york.jpg')",
			  'norway': "url('../img/norway.jpg')",
			  'sydney': "url('../img/sydney.jpg')",
			  'miami': "url('../img/miami.jpg')",
			  'switzerland': "url('../img/switzerland.jpg')",
			  'bali': "url('../img/bali.jpg')",
			  'norway': "url('../img/norway.jpg')",
			  'chicago': "url('../img/chicago.jpg')",
			  'europe': "url('../img/europe.jpg')",
			  'iceland': "url('../img/iceland.jpg')",
      },
    },
  },
  plugins: [    
    require('tailwind-scrollbar-hide')
  ],
}

Ariel Hernán

Esta clase no me funcionó. No comprendo cual es la causa y en la parte donde “No funciona el darkmode, hay un corte y la profesora no explica cuales serían las causas del no funcionamiento”…venia bien, pero no esta funcionando.

Use el mismo código…

    const htmlElement = document.querySelector("html");
    const toggleButton = document.querySelector("#toggle");
    const toggleButtonSm = document.querySelector("#toggle-sm");
    const toggleDarkMode = () => {
      htmlElement.classList.toggle("dark");
    };
    toggleButton.addEventListener("click", toggleDarkMode);
    toggleButtonSm.addEventListener("click", toggleDarkMode);

John Steven González

Yo hice el **darkmode **más modular, cree un archivo “darkmode.js” y le meti el codigo, y luego en puse la ruta script src=/path/darkmode.js

Tengo entendido que es buena práctica 😊 apenas estoy iniciando como front

David Hilera

https://www.youtube.com/watch?v=z2B3gRt2nj0

Para los que están usando NextJs les dejo una mejor forma de aplicar el darkMode.

Fernando Francisco López Mauro

Me siento superado con mi codigo jajaja

const htmlElement = document.querySelector("html");
      const button = document.querySelectorAll(".buttonDark");
      button.forEach(el => el.addEventListener("click", cambiar));
      function cambiar(){
         htmlElement.classList.toggle("dark");
      }

Joan Alexander Valerio Rodríguez

Ese corte que hicieron en el video cuando presentaron el error en el script para controlar el dark mode con los botones, debió ser aclarado... Si leen los comentarios se darán cuenta que dejaron muchos estudiantes sin idea como resolver este error. Comunidad les dire como pude resolver este error. 1\. Eliminar la class="dark" del tag html. Recuerden que esto esta forzando el código. 2\. Crear los id en los botones. No necesitan utilizar # para esto. ejemplo: id="toggle". 3\. Mejorar la calidad del script. Pueden lograr el efecto esperado con menos lineas de código: ```js const TOGGLE_BUTTON = document.querySelector('#toggle'); const TOGGLE_BUTTON_MOBILE = document.querySelector('#toggle-mobile'); function toggleDarkMode() { document.documentElement.classList.toggle('dark'); } TOGGLE_BUTTON.addEventListener('click', toggleDarkMode); TOGGLE_BUTTON_MOBILE.addEventListener('click', toggleDarkMode); ```Suerte a todos !

JUAN JOSE HERNANDEZ MUÑOZ

Utilice localStorage para guardar la opcion de dark o light dependiendo de lo ultimo que selecciono el usuario, me quedo asi: ```js const toggleDark = document.querySelector('.toggleDark') const html = document.querySelector('html') if (localStorage.getItem('darkMode') === 'true') { localStorage.setItem('darkMode', 'true') toggleDark.classList.add('active') html.classList.add('dark') } else { localStorage.setItem('darkMode', 'false') toggleDark.classList.remove('active') html.classList.remove('dark') } const toggleDarkMode = () => { console.log(html.classList.contains('dark')) if (!html.classList.contains('dark')) { html.classList.add('dark') toggleDark.classList.add('active') localStorage.setItem('darkMode', 'true') } else { html.classList.remove('dark') toggleDark.classList.remove('active') localStorage.setItem('darkMode', 'false') } } toggleDark.addEventListener('click', toggleDarkMode) ```

Luis Herrera

hace 9 meses

Antes de ver el video, veo los comentarios y ya me asuste 😥

Paula Inés Cudicio

Logrado!!! https://paulaxam.github.io/Platzi-travel/

Tomas Salina

Otra forma de hacer que funcionen los botones es la siguiente:

const $html = document.getElementById('html')
const $buttonsDark = document.querySelectorAll('.toggleDark')

const handleDark = () => {
  $html.classList.toggle('dark')
}

$buttonsDark.forEach(btn => btn.addEventListener('click', handleDark))

analitica gc

He notado que las cards se ponen detrás del div de RECOMENDADOS y para solucionarlos agregue los siguientes atributos

class="inline-flex z-10"

donde

<div class="w-auto h-72 items-center mt-6 overflow-x-auto overscroll-x-contain flex space-x-6 overflow-y-hidden inline-flex z-10">

que es el padre de todas las cards

Jahiker Rojas

Hice mi implementacion del manejo del dark mode usando web components, ya que me parece mas ordenado y escalable, mi js queda asi:

class ThemeToggle extends HTMLElement {
  constructor() {
    super();

    this.init();
    this.addEventListener("click", this.toggle.bind(this));
  }

  init() {
    if (
      localStorage.theme === "dark" ||
      (!("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    ) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }

  toggle() {
    if (
      localStorage.theme === "dark" ||
      (!("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    ) {
      localStorage.theme = "light";
    } else {
      localStorage.theme = "dark";
    }
  }
}

customElements.define("theme-toggle", ThemeToggle);

Y en el html simplemente envolvemos los switchs de tema en un elemento asi :

<theme-toggle></theme-toggle>

Any Omaña

hace un mes

El dark mode no pudo conmigo 😎 **Versión mobile:** ![](https://static.platzi.com/media/user_upload/image-5f61ce0f-54f1-4ee5-892a-59688e5f8f5a.jpg) Aquí les dejo el repositorio con todo el proyecto 💚💚 Mucho éxito en este mundo tech <https://github.com/iamanyyeei/HelloTravel-Tailwind-CSS>

Luis David Perez

También se puede seleccionar todos los botones en una sola sentencia de la siguiente manera ```js const htmlElement = document.querySelector('html') const darkModeButton = document.querySelectorAll('.dark-mode-btn') darkModeButton.forEach((btn) => { btn.addEventListener('click', () => { htmlElement.classList.toggle('dark') }) }) ```

CLAUDIA ANDREA CAMPO GRIJALBA

![](https://static.platzi.com/media/user_upload/mobile%20%286%29-689f6863-034a-463f-add9-1c4cfde416b9.jpg)![](https://static.platzi.com/media/user_upload/mobile%20%285%29-ab411289-3053-4633-9771-0ef0288a3b9e.jpg) Muchas formas de hacerlo, me encanta que asi sea. Yo busque una forma diferente a como lo hice antes, se puede hacer con alpinejs, antes lo hice con js pero cambiando el icono desde js, ahora camvio el icono en tailwind y js solo lo utilizo para hacer toogle

Raymondi Alejandro Ramos Vásquez

Interesante

Raycris Maldonado

Aquí les dejo link a mi project hecho en Reactjs
https://github.com/raycris/travel/tree/master

Ameth Ordoñez Erazo