From 826dfb407f0f9d503c22dcc6fa4b95fd696754e9 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Fri, 15 Mar 2024 13:46:38 -0500
Subject: [PATCH] Add dark mode style

---
 src/components/BrandsCarousel/Carousel.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/BrandsCarousel/Carousel.tsx b/src/components/BrandsCarousel/Carousel.tsx
index 54db738..cbc7ee6 100644
--- a/src/components/BrandsCarousel/Carousel.tsx
+++ b/src/components/BrandsCarousel/Carousel.tsx
@@ -1,5 +1,6 @@
 "use client";
 import Marquee from "react-fast-marquee";
+import { useTheme } from "next-themes";
 
 import { BrandCard } from "./BrandCard";
 
@@ -10,10 +11,18 @@ interface CarouselProps {
 }
 
 export const Carousel = ({ brands }: CarouselProps) => {
+  const { theme } = useTheme();
 
   return (
     <div className="flex items-center justify-between gap-x-1 ms:gap-x-2 px-2 group">
-      <Marquee direction={'left'} pauseOnHover speed={40} gradient gradientWidth={100}>
+      <Marquee
+        direction={"left"}
+        pauseOnHover
+        speed={40}
+        gradient
+        gradientWidth={100}
+        gradientColor={theme === "dark" ? "black" : "white"}
+      >
         {brands.map((brand, i) => (
           <BrandCard brand={brand} key={i} />
         ))}