From e9e9aefb79536aa4c149b7f1a31b0c2e7fc19443 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Thu, 2 Oct 2025 15:20:22 +0200
Subject: [PATCH] feat(ui): add theme-aware gradient colors to magic card

- Integrate next-themes for dynamic color switching
- Add light/dark theme specific gradient colors
- Implement state management for theme-based color updates
- Use pink gradient for dark theme and blue gradient for light theme
- Improve visual consistency across different theme modes
---
 web/src/components/magicui/magic-card.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/src/components/magicui/magic-card.tsx b/web/src/components/magicui/magic-card.tsx
index 990af3e7..6a755f02 100644
--- a/web/src/components/magicui/magic-card.tsx
+++ b/web/src/components/magicui/magic-card.tsx
@@ -2,9 +2,10 @@
 
 import { motion, useMotionTemplate, useMotionValue } from "motion/react"
 import type React from "react"
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 import { cn } from "@/lib/utils"
+import { useTheme } from "next-themes"
 
 interface MagicCardProps {
 	children?: React.ReactNode
@@ -28,6 +29,7 @@ export function MagicCard({
 	const cardRef = useRef<HTMLDivElement>(null)
 	const mouseX = useMotionValue(-gradientSize)
 	const mouseY = useMotionValue(-gradientSize)
+	
 
 	const handleMouseMove = useCallback(
 		(e: MouseEvent) => {
@@ -76,6 +78,21 @@ export function MagicCard({
 		mouseY.set(-gradientSize)
 	}, [gradientSize, mouseX, mouseY])
 
+	const { theme } = useTheme() // "light" | "dark"
+
+	const [fromColor, setFromColor] = useState(gradientFrom)
+	const [toColor, setToColor] = useState(gradientTo)
+
+	useEffect(() => {
+		if (theme === "dark") {
+			setFromColor("#ffb3c1")  // fallback for dark
+			setToColor("#ff75a0")
+		} else {
+			setFromColor("#1e9df1")  // fallback for light
+			setToColor("#8ed0f9")
+		}
+	}, [theme])
+
 	return (
 		<div ref={cardRef} className={cn("group relative rounded-[inherit]", className)}>
 			<motion.div
@@ -83,8 +100,8 @@ export function MagicCard({
 				style={{
 					background: useMotionTemplate`
           radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
-          ${gradientFrom}, 
-          ${gradientTo}, 
+          ${fromColor}, 
+          ${toColor}, 
           var(--border) 100%
           )
           `,