Estoy usando next.js con tailwindcss y Swiper js. También he implementado una funcionalidad de modo oscuro. Básicamente, quiero cambiar el color de fondo de todos los divs con la clase de deslizador deslizante. Tengo algunas imágenes png en cada diapositiva deslizante y cuando enciendo el modo oscuro necesito que cambie el fondo de la diapositiva deslizante. Así que quiero agregar la clase de let say dark:bg-blue-900. Intenté tomar las diapositivas del deslizador en useEffect usando querySelector all y luego usando un bucle for of para agregar las clases, pero las clases no parecen aplicarse en absoluto cuando inspecciono los elementos. ¿Cómo puedo agregar la clase? Aquí está mi componente

 export default function VerticalSwiper() { const content = [ { id: 1, img: PizzaImg }, { id: 2, img: HamburgerImg }, { id: 3, img: SteakImg }, { id: 4, img: Salad1Img }, { id: 5, img: WineImg }, { id: 6, img: KebabImg }, { id: 7, img: SodaImg }, { id: 8, img: BeerImg }, { id: 9, img: Salad2Img }, ]; useEffect(() => { const root = window.document.documentElement; if (root.classList.value === 'dark') { const swiperSlides = document.querySelectorAll('.swiper-slide'); for (const swiperSlide of swiperSlides) { swiperSlide.classList.add('dark:bg-blue-900'); } } }); return ( <div className="swiper-container"> <Swiper direction={'vertical'} autoplay={{ delay: 3500, disableOnInteraction: false, }} pagination={{ clickable: true, }} modules={[Autoplay, Pagination]} className="mySwiper" > {content.map((item) => ( <SwiperSlide key={item.id}> <SwiperContent img={item.img} /> </SwiperSlide> ))} </Swiper> </div> ); }