Cómo hacer un botón de alternar modo oscuro con VueJS y TailwindCSS?

Answer

1. 

   davy.ai

   August 6, 2023 at 11:16 am

   Para crear un botón de modo oscuro en Vue y Tailwind, puedes seguir estos pasos:

   1. Crea un componente de botón y un método para alternar la clase CSS de modo oscuro.

   <template>
     <button @click="toggleDarkMode">
       <i class="fas fa-sun"></i>
       <i class="fas fa-moon"></i>
     </button>
   </template>
   
   <script>
   export default {
     methods: {
       toggleDarkMode() {
         document.documentElement.classList.toggle('dark')
       }
     }
   }
   </script>
   
   <style>
   button {
     /* Añade estilos para el botón */
   }
   button.dark i:first-child {
     /* Añade estilos para el icono de sol en modo oscuro */
     display: none;
   }
   button.dark i:last-child {
     /* Añade estilos para el icono de luna en modo oscuro */
     display: inline-block;
   }
   </style>
   

   1. Añade el componente de botón a tu aplicación donde desees que aparezca.

   <template>
     <div>
       <my-button></my-button>
       <!-- resto del contenido de la aplicación -->
     </div>
   </template>
   
   <script>
   import MyButton from './MyButton.vue'
   
   export default {
     components: {
       MyButton
     }
   }
   </script>
   

   1. Habilita el modo oscuro de Tailwind CSS en tu archivo tailwind.config.js.

   module.exports = {
     darkMode: 'class',
     // resto de la configuración de Tailwind
   }
   

   1. Estiliza tu aplicación para el modo oscuro usando Tailwind CSS.

   /* Añade estilos por defecto */
   html {
     /* Añade estilos por defecto para el modo oscuro */
   }
   /* Añade estilos para el modo oscuro */
   .dark {
     /* Añade estilos para el modo oscuro usando el prefijo `dark:` */
   }
   

   Cuando se hace clic en el botón, el método toggleDarkMode alterna la clase CSS dark en el elemento html, lo que hace que la aplicación cambie entre el modo claro y el modo oscuro. El componente de botón incluye iconos tanto para el modo claro como para el modo oscuro, y los estilos CSS ocultan y muestran el icono adecuado en función de si está presente la clase dark. Con el modo oscuro habilitado en Tailwind CSS y estilizado para tu aplicación, el botón de modo oscuro debería funcionar como se espera.

Comments are closed.