No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind 2 y 3

Curso B谩sico de Tailwind 2 y 3

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Agregando el Dark Mode

26/29
Recursos

Aportes 18

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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;
}

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');
})

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 馃榾

Pueden ahorrarse m谩s definiciones de id鈥檚 (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.

Para agregar el dark mode se debe configurar el archivo de configuraci贸n tailwind.config.js agregando la propiedad darkMode seguido de la palabra 鈥榗lass鈥 (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>

As铆 vamos hasta ahora!

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')
  ],
}

Esta clase no me funcion贸. No comprendo cual es la causa y en la parte donde 鈥淣o funciona el darkmode, hay un corte y la profesora no explica cuales ser铆an las causas del no funcionamiento鈥濃enia 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);

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

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

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

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");
      }

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))

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

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>

Interesante

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

鈥淧erfect铆simo鈥 jaja me encanta 馃槃