Estuve mirando alrededor, pero no pude encontrar ninguna pregunta y respuesta relacionada. Estoy creando un proyecto en ReactJS con tailwindCSS e implementando el modo oscuro en el sitio. Todo funciona bien, pero ahora tengo algunos problemas con una imagen de fondo. He configurado las dos imágenes en tailwind.config.js
darkMode: 'class', theme: { extend: { backgroundImage: (theme) => ({ 'code': "url('/src/components/About/coding-bg-dark.png')", 'light-code': "url('/src/components/About/lightcode.png')", }) }, },y tener los classNames en la sección decente
<section id='introduction' className="bg-code dark:bg-light-code bg-cover bg-fixed flex flex-wrap content-center w-full md:h-screen">pero cuando alterno el modo oscuro, la imagen no cambia, la imagen oscura permanece en el modo claro. ¿Alguna idea de cómo podría dar la vuelta?
Debe agregar darkMode: 'media' en su tailwind.config.js , así como ampliar las variantes de la imagen de fondo para incluir el modo oscuro. Aquí hay un ejemplo de tailwind.config.js :
module.exports = { darkMode: 'media', theme: { extend: { backgroundImage: (theme) => ({ 'image-one': "url('https://images.unsplash.com/photo-1629651480694-edb8451b31aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80')", 'image-two': "url('https://images.unsplash.com/photo-1629651726230-6430554a8890?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2734&q=80')", }), }, }, variants: { extend: { backgroundImage: ['dark'], }, }, plugins: [], }Entonces debería funcionar. Puede ver un ejemplo de trabajo aquí .
Estoy usando nuxt con @nuxtjs/color-mode para dichas funciones. Para mí, esto es más robusto y más fácil de mantener.
<img v-show="$colorMode.value === 'dark'" src="~/assets/images/index/bg-1.jpg" class="absolute w-full" style="height: 50vh" /> <span v-show="$colorMode.value === 'dark'" class=" absolute w-full h-full bg-gradient-to-t from-gray-800 to-transparent " /> <img v-show="$colorMode.value === 'light'" src="~/assets/images/index/bg-2.jpg" class="absolute w-full" style="height: 50vh" /> <span v-show="$colorMode.value === 'light'" class=" absolute w-full h-full bg-gradient-to-tl from-gray-900 to-transparent " />