I am using next.js with tailwindcss and Swiper js. I have also implemented a darkmode functionallity. So basically I want to change the background-color of all divs with the class of swiper-slide. I have some png images in every swiper slide and when i toggle the darkmode on I need the background of the swiper-slide to change. So I want to add the class of let say dark:bg-blue-900. I have tried grabbing the swiper-slides in useEffect by using querySelector all and then using a for of loop to add the classes, but the classes doesn't seem to be applied at all when I inspect the elements. How can I add the class? Here is my component

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