From 472fc22de7a7e9ad4dc7410c953924522c0fc2f8 Mon Sep 17 00:00:00 2001
From: justuche224 <justuche224@gmail.com>
Date: Sun, 10 Aug 2025 01:20:55 +0100
Subject: [PATCH] feat(theme): add dark mode support for TreeAnimation and page
 text

Update TreeAnimation component to use theme-aware stroke color and modify page text styling to support dark mode. The changes ensure consistent visibility across both light and dark themes.
---
 src/app/page.tsx                    | 4 ++--
 src/components/bg/TreeAnimation.tsx | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b24c945..125b8d3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -143,10 +143,10 @@ export default function Home() {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 1, delay: 0.4 }}
-      className="mt-6 text-lg sm:text-xl md:text-2xl max-w-2xl mx-auto text-muted-foreground drop-shadow-[0_0_12px_rgba(94,234,212,0.25)]"
+      className="mt-6 text-lg sm:text-xl md:text-2xl max-w-2xl mx-auto text-gray-700 dark:text-muted-foreground dark:drop-shadow-[0_0_12px_rgba(94,234,212,0.25)]"
     >
       Welcome to <span className="font-semibold text-primary">AlgoFlow</span> — where tough algorithms become
-      <span className="font-semibold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-sky-400 to-emerald-300 drop-shadow-[0_0_14px_rgba(94,234,212,0.4)]"> interactive visual stories</span> that stick with you forever.
+      <span className="font-semibold text-primary dark:text-transparent dark:bg-clip-text dark:bg-gradient-to-r dark:from-indigo-400 dark:via-sky-400 dark:to-emerald-300 dark:drop-shadow-[0_0_14px_rgba(94,234,212,0.4)]"> interactive visual stories</span> that stick with you forever.
     </motion.p>
 
     <motion.div
diff --git a/src/components/bg/TreeAnimation.tsx b/src/components/bg/TreeAnimation.tsx
index 32bfeee..ad8c2d4 100644
--- a/src/components/bg/TreeAnimation.tsx
+++ b/src/components/bg/TreeAnimation.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { motion } from "framer-motion";
 import React, { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
 
 const nodes = [
   { id: 1, x: 0, y: 80 },
@@ -57,6 +58,7 @@ const getNodeById = (id: number) => nodes.find((n) => n.id === id)!;
 export default function TreeAnimation() {
   const [highlightedNode, setHighlightedNode] = useState<number | null>(null);
   const numberOfSparks = 4;
+  const { theme } = useTheme();
 
   return (
     <div className="absolute top-0 left-0 w-full h-screen -z-10 overflow-hidden">
@@ -86,7 +88,7 @@ export default function TreeAnimation() {
               y1={a.y}
               x2={b.x}
               y2={b.y}
-              stroke="white"
+              stroke={theme === "light" ? "black" : "white"}
               strokeWidth="0.3"
               filter="url(#glow)"
             />