From fbfc143f0964565e9225f441eca8fb99fa39b59f Mon Sep 17 00:00:00 2001
From: itsabhinavm <abhinav051017@gmail.com>
Date: Tue, 5 Aug 2025 21:37:46 +0530
Subject: [PATCH] feat: add Toggle white and dark mode

---
 src/components/Experience.jsx     | 18 ++++++------
 src/components/Expertise.jsx      |  8 +++---
 src/components/Footer.jsx         | 22 +++++++-------
 src/components/Hero.jsx           |  8 +++---
 src/components/Inspiration.jsx    |  8 +++---
 src/components/Navbar.jsx         | 46 ++++++++++++++++++++++-------
 src/components/Services.jsx       | 14 ++++-----
 src/components/SuccessStories.jsx |  8 +++---
 src/components/Training.jsx       |  8 +++---
 src/hooks/theme.jsx               | 25 ++++++++++++++++
 src/index.css                     |  2 +-
 src/pages/Contact.jsx             | 48 +++++++++++++++----------------
 src/pages/Services.jsx            | 30 ++++++++++---------
 tailwind.config.js                |  1 +
 14 files changed, 147 insertions(+), 99 deletions(-)
 create mode 100644 src/hooks/theme.jsx

diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx
index da02b3d..c7ed40c 100644
--- a/src/components/Experience.jsx
+++ b/src/components/Experience.jsx
@@ -4,7 +4,7 @@ import Button from "./ui/Button"
 
 const Experience = () => {
   return (
-    <section className="py-20 bg-black">
+    <section className="py-20 bg-background">
       <div className="container mx-auto px-6">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -13,7 +13,7 @@ const Experience = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-5xl lg:text-6xl font-bold text-white mb-6">
+          <h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6">
             Experience <br />
             Fitness Like <span className="text-lime-400">Never Before</span>
           </h2>
@@ -30,20 +30,20 @@ const Experience = () => {
           >
             <div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
               <h3 className="text-2xl font-bold text-white mb-4">Nutritional Excellence</h3>
-              <p className="text-gray-300 mb-6">
+              <p className="text-muted-foreground mb-6">
                 Personalized nutrition plans designed by certified nutritionists to fuel your fitness journey and
                 optimize your results.
               </p>
-              <Button className="bg-lime-400 hover:bg-lime-500 text-black font-semibold">Explore Plans</Button>
+              <Button className="bg-lime-400 hover:bg-lime-500 text-foreground font-semibold">Explore Plans</Button>
             </div>
 
             <div className="bg-gray-900 p-8 rounded-xl border border-gray-800">
               <h3 className="text-2xl font-bold text-white mb-4">Smart Range</h3>
-              <p className="text-gray-300 mb-6">
+              <p className="text-muted-foreground mb-6">
                 Advanced fitness tracking technology that monitors your progress and adapts your workouts for maximum
                 efficiency.
               </p>
-              <Button className="bg-lime-400 hover:bg-lime-500 text-black font-semibold">Learn More</Button>
+              <Button className="bg-lime-400 hover:bg-lime-500 text-foreground font-semibold">Learn More</Button>
             </div>
           </motion.div>
 
@@ -62,14 +62,14 @@ const Experience = () => {
                 className="w-full h-64 object-cover rounded-xl"
               />
               <div className="bg-lime-400 p-6 rounded-xl">
-                <h4 className="text-black font-bold text-lg mb-2">Premium Equipment</h4>
-                <p className="text-black/80 text-sm">State-of-the-art fitness technology</p>
+                <h4 className="text-foreground font-bold text-lg mb-2">Premium Equipment</h4>
+                <p className="text-foreground/80 text-sm">State-of-the-art fitness technology</p>
               </div>
             </div>
             <div className="space-y-6 mt-8">
               <div className="bg-gray-900 p-6 rounded-xl border border-gray-800">
                 <h4 className="text-white font-bold text-lg mb-2">Smart Tracking</h4>
-                <p className="text-gray-400 text-sm">Advanced progress monitoring</p>
+                <p className="text-muted-foreground text-sm">Advanced progress monitoring</p>
               </div>
               <img
                 src="https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=300&h=400&fit=crop"
diff --git a/src/components/Expertise.jsx b/src/components/Expertise.jsx
index ed0c041..0528ba7 100644
--- a/src/components/Expertise.jsx
+++ b/src/components/Expertise.jsx
@@ -24,7 +24,7 @@ const trainers = [
 
 const Expertise = () => {
   return (
-    <section className="py-20 bg-black">
+    <section className="py-20 bg-background">
       <div className="container mx-auto px-6">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -33,11 +33,11 @@ const Expertise = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-5xl lg:text-6xl font-bold text-white mb-6">
+          <h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6">
             Your Fitness <span className="text-lime-400">Goals</span>, <br />
             Their <span className="text-lime-400">Expertise</span>
           </h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
             Meet our team of certified professionals dedicated to your success
           </p>
         </motion.div>
@@ -65,7 +65,7 @@ const Expertise = () => {
                   </div>
                 </div>
               </div>
-              <h3 className="text-2xl font-bold text-white mb-2">{trainer.name}</h3>
+              <h3 className="text-2xl font-bold text-foreground mb-2">{trainer.name}</h3>
               <p className="text-lime-400 font-semibold">{trainer.specialty}</p>
             </motion.div>
           ))}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index d05b712..92a9165 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -31,17 +31,17 @@ const socialLinks = [
 
 const Footer = () => {
   return (
-    <footer className="bg-black border-t border-gray-800">
+    <footer className="bg-background border-t border-gray-800">
       <div className="container mx-auto px-6 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
           {/* Brand */}
           <div className="lg:col-span-2">
             <Link to="/" className="flex items-center space-x-2 mb-6">
-              <div className="text-2xl font-bold text-white">
+              <div className="text-2xl font-bold text-foreground">
                 <span className="text-lime-400">Fit</span>olution
               </div>
             </Link>
-            <p className="text-gray-400 mb-6 max-w-md leading-relaxed">
+            <p className="text-muted-foreground mb-6 max-w-md leading-relaxed">
               Transform your body and mind with our revolutionary fitness programs designed for the modern athlete.
             </p>
 
@@ -54,7 +54,7 @@ const Footer = () => {
                   className="w-10 h-10 bg-gray-900 rounded-full flex items-center justify-center hover:bg-lime-400 transition-colors duration-300 group"
                   aria-label={social.label}
                 >
-                  <social.icon className="w-5 h-5 text-gray-400 group-hover:text-black" />
+                  <social.icon className="w-5 h-5 text-muted-foreground group-hover:text-black" />
                 </a>
               ))}
             </div>
@@ -62,11 +62,11 @@ const Footer = () => {
 
           {/* Company Links */}
           <div>
-            <h3 className="text-white font-semibold mb-4">Company</h3>
+            <h3 className="text-foreground font-semibold mb-4">Company</h3>
             <ul className="space-y-2">
               {footerLinks.company.map((link) => (
                 <li key={link.name}>
-                  <a href={link.href} className="text-gray-400 hover:text-lime-400 transition-colors duration-300">
+                  <a href={link.href} className="text-muted-foreground hover:text-lime-400 transition-colors duration-300">
                     {link.name}
                   </a>
                 </li>
@@ -76,11 +76,11 @@ const Footer = () => {
 
           {/* Support Links */}
           <div>
-            <h3 className="text-white font-semibold mb-4">Support</h3>
+            <h3 className="text-foreground font-semibold mb-4">Support</h3>
             <ul className="space-y-2">
               {footerLinks.support.map((link) => (
                 <li key={link.name}>
-                  <a href={link.href} className="text-gray-400 hover:text-lime-400 transition-colors duration-300">
+                  <a href={link.href} className="text-muted-foreground hover:text-lime-400 transition-colors duration-300">
                     {link.name}
                   </a>
                 </li>
@@ -90,11 +90,11 @@ const Footer = () => {
 
           {/* Connect Links */}
           <div>
-            <h3 className="text-white font-semibold mb-4">Connect</h3>
+            <h3 className="text-foreground font-semibold mb-4">Connect</h3>
             <ul className="space-y-2">
               {footerLinks.connect.map((link) => (
                 <li key={link.name}>
-                  <a href={link.href} className="text-gray-400 hover:text-lime-400 transition-colors duration-300">
+                  <a href={link.href} className="text-muted-foreground hover:text-lime-400 transition-colors duration-300">
                     {link.name}
                   </a>
                 </li>
@@ -105,7 +105,7 @@ const Footer = () => {
 
         {/* Bottom Section */}
         <div className="border-t border-gray-800 mt-12 pt-8 text-center">
-          <p className="text-gray-400 text-sm">© {new Date().getFullYear()} Fitolution. All rights reserved.</p>
+          <p className="text-muted-foreground text-sm">© {new Date().getFullYear()} Fitolution. All rights reserved.</p>
         </div>
       </div>
     </footer>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index ca098fa..084b2e7 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -4,7 +4,7 @@ import Button from "./ui/Button"
 
 const Hero = () => {
   return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black pt-20">
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-background pt-20">
       {/* Background Elements */}
       <div className="absolute inset-0">
         {/* Floating Green Circles */}
@@ -59,7 +59,7 @@ const Hero = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.2 }}
-              className="text-6xl lg:text-8xl font-bold text-white mb-8 leading-tight"
+              className="text-6xl lg:text-8xl font-bold text-foreground mb-8 leading-tight"
             >
               Sculpt <span className="text-lime-400">Your</span> Body,
               <br />
@@ -70,7 +70,7 @@ const Hero = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.4 }}
-              className="text-xl text-gray-300 mb-8 max-w-lg leading-relaxed"
+              className="text-xl text-muted-foreground mb-8 max-w-lg leading-relaxed"
             >
               Transform your body and mind with our revolutionary fitness programs designed for the modern athlete.
             </motion.p>
@@ -87,7 +87,7 @@ const Hero = () => {
               <Button
                 size="lg"
                 variant="outline"
-                className="border-white text-white hover:bg-white hover:text-black px-8 py-4 text-lg bg-transparent"
+                className="border-white text-foreground hover:bg-white hover:text-black px-8 py-4 text-lg bg-transparent"
               >
                 Learn More
               </Button>
diff --git a/src/components/Inspiration.jsx b/src/components/Inspiration.jsx
index 697b74c..2220ff7 100644
--- a/src/components/Inspiration.jsx
+++ b/src/components/Inspiration.jsx
@@ -13,7 +13,7 @@ const features = [
 
 const Inspiration = () => {
   return (
-    <section className="py-20 bg-black">
+    <section className="py-20 bg-background">
       <div className="container mx-auto px-6">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
           {/* Left Content */}
@@ -23,11 +23,11 @@ const Inspiration = () => {
             transition={{ duration: 0.8 }}
             viewport={{ once: true }}
           >
-            <h2 className="text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+            <h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6 leading-tight">
               Inspired to <br />
               Inspire Your <span className="text-lime-400">Best Self</span>
             </h2>
-            <p className="text-xl text-gray-300 mb-8 leading-relaxed">
+            <p className="text-xl text-muted-foreground mb-8 leading-relaxed">
               Join thousands who have transformed their lives through our comprehensive fitness programs and expert
               guidance.
             </p>
@@ -45,7 +45,7 @@ const Inspiration = () => {
                   <div className="w-6 h-6 bg-lime-400 rounded-full flex items-center justify-center">
                     <Check className="w-4 h-4 text-black" />
                   </div>
-                  <span className="text-gray-300">{feature}</span>
+                  <span className="text-muted-foreground">{feature}</span>
                 </motion.div>
               ))}
             </div>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 1f0f26f..6d6c0d1 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -5,6 +5,8 @@ import { motion } from "framer-motion"
 import { Link, useLocation } from "react-router-dom"
 import { Menu, X } from "lucide-react"
 import Button from "./ui/Button"
+import useTheme from "../hooks/theme"
+import { Moon, Sun } from "lucide-react"
 
 const navItems = [
   { name: "Home", href: "/" },
@@ -18,7 +20,7 @@ const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false)
   const [scrolled, setScrolled] = useState(false)
   const location = useLocation()
-
+  const {theme,toggleTheme}= useTheme()
   useEffect(() => {
     const handleScroll = () => {
       setScrolled(window.scrollY > 50)
@@ -33,14 +35,14 @@ const Navbar = () => {
       animate={{ y: 0 }}
       transition={{ duration: 0.5 }}
       className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
-        scrolled ? "bg-black/95 backdrop-blur-sm" : "bg-transparent"
+        scrolled ? "bg-white/95 dark:bg-black/95 backdrop-blur-sm" : "bg-transparent"
       }`}
     >
       <div className="container mx-auto px-6">
         <div className="flex items-center justify-between h-20">
           {/* Logo */}
           <Link to="/" className="flex items-center space-x-2">
-            <div className="text-2xl font-bold text-white">
+            <div className="text-2xl font-bold text-foreground">
               <span className="text-lime-400">Fit</span>olution
             </div>
           </Link>
@@ -51,7 +53,7 @@ const Navbar = () => {
               <Link
                 key={item.name}
                 to={item.href}
-                className={`text-white hover:text-lime-400 transition-colors duration-300 relative ${
+                className={`text-foreground hover:text-lime-400 transition-colors duration-300 relative ${
                   location.pathname === item.href ? "text-lime-400" : ""
                 }`}
               >
@@ -61,14 +63,24 @@ const Navbar = () => {
           </div>
 
           <div className="hidden lg:flex items-center space-x-4">
-            <Button variant="ghost" className="text-white hover:text-lime-400">
+            <Button variant="ghost" className="text-foreground hover:text-lime-400">
               Sign In
             </Button>
             <Button className="bg-lime-400 hover:bg-lime-500 text-black font-semibold px-6">Get Started</Button>
+            <Button
+              onClick={toggleTheme}
+              className="p-2 rounded-full hover:bg-accent transition-colors"
+              aria-label="Toggle Theme">
+              {theme === "dark" ? (
+                <Sun className="w-6 h-6 text-lime-400" />
+              ) : (
+                <Moon className="w-6 h-6 text-gray-800" />
+              )}
+            </Button>
           </div>
 
           {/* Mobile Menu Button */}
-          <button onClick={() => setIsOpen(!isOpen)} className="lg:hidden text-white">
+          <button onClick={() => setIsOpen(!isOpen)} className="lg:hidden text-foreground">
             {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
           </button>
         </div>
@@ -79,7 +91,7 @@ const Navbar = () => {
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
-            className="lg:hidden bg-black border-t border-gray-800"
+            className="lg:hidden bg-background border-t border-border"
           >
             <div className="py-4 space-y-4">
               {navItems.map((item) => (
@@ -87,7 +99,7 @@ const Navbar = () => {
                   key={item.name}
                   to={item.href}
                   onClick={() => setIsOpen(false)}
-                  className={`block px-4 py-2 text-white hover:text-lime-400 transition-colors duration-300 ${
+                  className={`block px-4 py-2 text-foreground hover:text-lime-400 transition-colors duration-300 ${
                     location.pathname === item.href ? "text-lime-400" : ""
                   }`}
                 >
@@ -95,9 +107,21 @@ const Navbar = () => {
                 </Link>
               ))}
               <div className="px-4 space-y-2">
-                <Button variant="ghost" className="w-full text-white hover:text-lime-400">
-                  Sign In
-                </Button>
+                <div className="flex items-center gap-3">
+                  <Button variant="ghost" className="w-full text-foreground hover:text-lime-400">
+                    Sign In
+                  </Button>
+                  <Button
+                    onClick={toggleTheme}
+                    className="p-2 rounded-full hover:bg-accent transition-colors"
+                    aria-label="Toggle Theme">
+                    {theme === "dark" ? (
+                      <Sun className="w-6 h-6 text-lime-400" />
+                    ) : (
+                      <Moon className="w-6 h-6 text-gray-800" />
+                    )}
+                  </Button>
+                </div>
                 <Button className="w-full bg-lime-400 hover:bg-lime-500 text-black font-semibold">Get Started</Button>
               </div>
             </div>
diff --git a/src/components/Services.jsx b/src/components/Services.jsx
index 49bd53d..5d16007 100644
--- a/src/components/Services.jsx
+++ b/src/components/Services.jsx
@@ -61,7 +61,7 @@ const services = [
 const Services = () => {
   const [modal,setModal] = useState();
   return (
-    <section className="py-20 bg-black">
+    <section className="py-20 bg-background">
       <div className="container mx-auto px-6">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -70,11 +70,11 @@ const Services = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-5xl lg:text-6xl font-bold text-white mb-6">
+          <h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6">
             Discover <br />
             What Sets Us <span className="text-lime-400">Apart</span>
           </h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
             Experience the difference with our comprehensive approach to fitness and wellness
           </p>
         </motion.div>
@@ -90,15 +90,11 @@ const Services = () => {
               className="bg-gray-900 p-8 rounded-xl border border-gray-800 hover:border-lime-400 transition-all duration-300 group"
             >
               <div className="w-16 h-16 bg-lime-400 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
-                <service.icon className="w-8 h-8 text-black" />
+                <service.icon className="w-8 h-8 text-foreground" />
               </div>
               <h3 className="text-xl font-bold text-white mb-4">{service.title}</h3>
               <p className="text-gray-400 mb-6 leading-relaxed">{service.description}</p>
-              {/* <Button className="bg-lime-400 hover:bg-lime-500 text-black font-semibold w-full">Learn More</Button> */}
-              <div onClick={()=>setModal(service)}  className="border border-gray-900  hover:border-lime-400 w-fit p-2 ">
-
-              <button className="text-white">Learn More</button>
-              </div>
+              <Button className="bg-lime-400 hover:bg-lime-500 text-foreground font-semibold w-full">Learn More</Button>
             </motion.div>
           ))}
         </div>
diff --git a/src/components/SuccessStories.jsx b/src/components/SuccessStories.jsx
index 9f9cb57..f40a0d1 100644
--- a/src/components/SuccessStories.jsx
+++ b/src/components/SuccessStories.jsx
@@ -28,7 +28,7 @@ const stories = [
 
 const SuccessStories = () => {
   return (
-    <section className="py-20 bg-black">
+    <section className="py-20 bg-background">
       <div className="container mx-auto px-6">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -37,11 +37,11 @@ const SuccessStories = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-5xl lg:text-6xl font-bold text-white mb-6">
+          <h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6">
             Your <span className="text-lime-400">Success</span> Stories, <br />
             Our <span className="text-lime-400">Inspiration</span>
           </h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
             Real transformations from real people who trusted us with their fitness journey
           </p>
         </motion.div>
@@ -63,7 +63,7 @@ const SuccessStories = () => {
                     <Star key={i} className="w-5 h-5 text-lime-400 fill-current" />
                   ))}
                 </div>
-                <p className="text-gray-300 mb-4 italic">"{story.quote}"</p>
+                <p className="text-muted-foreground mb-4 italic">"{story.quote}"</p>
                 <h3 className="text-xl font-bold text-white mb-1">{story.name}</h3>
                 <p className="text-lime-400 font-semibold">{story.transformation}</p>
               </div>
diff --git a/src/components/Training.jsx b/src/components/Training.jsx
index 69cfe59..9457956 100644
--- a/src/components/Training.jsx
+++ b/src/components/Training.jsx
@@ -30,7 +30,7 @@ const trainingImages = [
 
 const Training = () => {
   return (
-    <section className="py-20 bg-black">
+    <section className="py-20 bg-background">
       <div className="container mx-auto px-6">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
@@ -39,11 +39,11 @@ const Training = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-5xl lg:text-6xl font-bold text-white mb-6">
+          <h2 className="text-5xl lg:text-6xl font-bold text-foreground mb-6">
             Train <span className="text-lime-400">Smarter</span> <br />
             Unleash Your <span className="text-lime-400">Potential</span>
           </h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
             Discover our comprehensive training programs designed to maximize your results
           </p>
         </motion.div>
@@ -66,7 +66,7 @@ const Training = () => {
               />
               <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
               <div className="absolute bottom-6 left-6">
-                <h3 className="text-xl font-bold text-white">{item.title}</h3>
+                <h3 className="text-xl font-bold text-muted-foreground">{item.title}</h3>
               </div>
               <div className="absolute inset-0 bg-lime-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
             </motion.div>
diff --git a/src/hooks/theme.jsx b/src/hooks/theme.jsx
new file mode 100644
index 0000000..e2d1efc
--- /dev/null
+++ b/src/hooks/theme.jsx
@@ -0,0 +1,25 @@
+import { useEffect,useState } from "react";
+
+const useTheme = () => {
+    const [theme,setTheme] = useState(()=>
+        typeof window !== "undefined" && localStorage.theme === "dark" ? "dark" : "light"
+    )
+
+    useEffect(()=> {
+        const root= window.document.documentElement
+        if (theme === "dark") {
+            root.classList.add("dark")
+            localStorage.setItem("theme","dark")
+        } else {
+            root.classList.remove("dark")
+            localStorage.setItem("theme","light")
+        }
+    }, [theme])
+
+    const toggleTheme = () => {
+        setTheme((prev)=> (prev === "dark"?"light":"dark"))
+    }
+    return {theme,toggleTheme}
+}
+
+export default useTheme
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 9327e8e..2f16878 100644
--- a/src/index.css
+++ b/src/index.css
@@ -101,7 +101,7 @@ button:focus-visible {
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 0 0% 0%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index 9752c43..ca8b051 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -82,10 +82,10 @@ const membershipPlans = [
 
 const Contact = () => {
   return (
-    <div className="min-h-screen bg-black pt-20 overflow-x-hidden">
+    <div className="min-h-screen bg-background pt-20">
       {/* Hero Section */}
       <section className="relative py-20 overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-r from-lime-400/20 to-green-400/20" />
+        <div className="absolute inset-0 bg-gradient-to-r from-green-500/40 to-lime-500/40 dark:from-lime-400/20 dark:to-green-400/20" />
         <div className="container mx-auto px-4 relative z-10">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
@@ -93,10 +93,10 @@ const Contact = () => {
             transition={{ duration: 0.8 }}
             className="text-center max-w-4xl mx-auto"
           >
-            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
+            <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6">
               Get in <span className="text-lime-400">Touch</span>
             </h1>
-            <p className="text-xl text-gray-300 mb-8">
+            <p className="text-xl text-muted-foreground mb-8">
               Ready to transform your life? Contact us today or choose your membership plan
             </p>
           </motion.div>
@@ -118,11 +118,11 @@ const Contact = () => {
                 <Card className="bg-gray-900 border-gray-700 text-center hover:border-lime-400 transition-colors duration-300">
                   <div className="p-6">
                     <div className="mx-auto w-12 h-12 bg-lime-400 rounded-full flex items-center justify-center mb-4">
-                      <info.icon className="w-6 h-6 text-black" />
+                      <info.icon className="w-6 h-6 text-foreground" />
                     </div>
-                    <h3 className="text-white font-bold mb-4">{info.title}</h3>
+                    <h3 className="text-foreground font-bold mb-4">{info.title}</h3>
                     {info.details.map((detail, idx) => (
-                      <p key={idx} className="text-gray-400 mb-1">
+                      <p key={idx} className="text-muted-foreground mb-1">
                         {detail}
                       </p>
                     ))}
@@ -143,32 +143,32 @@ const Contact = () => {
             >
               <Card className="bg-gray-900 border-gray-700">
                 <div className="p-6">
-                  <h2 className="text-white text-2xl font-bold mb-6">Send us a Message</h2>
+                  <h2 className="text-muted-foreground text-2xl font-bold mb-6">Send us a Message</h2>
                   <div className="space-y-6">
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <Input
                         placeholder="First Name"
-                        className="bg-gray-800 border-gray-600 text-white placeholder:text-gray-400"
+                        className="bg-gray-800 border-gray-600 text-foreground placeholder:text-muted-foreground"
                       />
                       <Input
                         placeholder="Last Name"
-                        className="bg-gray-800 border-gray-600 text-white placeholder:text-gray-400"
+                        className="bg-gray-800 border-gray-600 text-foreground placeholder:text-muted-foreground"
                       />
                     </div>
                     <Input
                       type="email"
                       placeholder="Email Address"
-                      className="bg-gray-800 border-gray-600 text-white placeholder:text-gray-400"
+                      className="bg-gray-800 border-gray-600 text-foreground placeholder:text-muted-foreground"
                     />
                     <Input
                       type="tel"
                       placeholder="Phone Number"
-                      className="bg-gray-800 border-gray-600 text-white placeholder:text-gray-400"
+                      className="bg-gray-800 border-gray-600 text-foreground placeholder:text-muted-foreground"
                     />
                     <Textarea
                       placeholder="Your Message"
                       rows={5}
-                      className="bg-gray-800 border-gray-600 text-white placeholder:text-gray-400"
+                      className="bg-gray-800 border-gray-600 text-foreground placeholder:text-muted-foreground"
                     />
                     <Button className="w-full bg-lime-400 hover:bg-lime-500 text-black">
                       Send Message
@@ -199,7 +199,7 @@ const Contact = () => {
       </section>
 
       {/* Membership Plans */}
-      <section className="py-20 bg-gray-900">
+      <section className="py-20 bg-background dark:bg-gray-900">
         <div className="container mx-auto px-4">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
@@ -208,10 +208,10 @@ const Contact = () => {
             viewport={{ once: true }}
             className="text-center mb-16"
           >
-            <h2 className="text-4xl font-bold text-white mb-4">
+            <h2 className="text-4xl font-bold text-foreground mb-4">
               Choose Your <span className="text-lime-400">Membership</span>
             </h2>
-            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
               Select the perfect plan that fits your fitness goals and lifestyle
             </p>
           </motion.div>
@@ -238,14 +238,14 @@ const Contact = () => {
                     </div>
                   )}
                   <div className="p-6 text-center">
-                    <h3 className="text-white text-2xl font-bold mb-2">{plan.name}</h3>
+                    <h3 className="text-foreground text-2xl font-bold mb-2">{plan.name}</h3>
                     <div className="text-4xl font-bold text-lime-400 mb-6">
                       {plan.price}
-                      <span className="text-lg text-gray-400">{plan.period}</span>
+                      <span className="text-lg text-muted-foreground">{plan.period}</span>
                     </div>
                     <ul className="space-y-3 mb-8">
                       {plan.features.map((feature, idx) => (
-                        <li key={idx} className="text-gray-300 flex items-center">
+                        <li key={idx} className="text-muted-foreground flex items-center">
                           <div className="w-2 h-2 bg-lime-400 rounded-full mr-3" />
                           {feature}
                         </li>
@@ -254,8 +254,8 @@ const Contact = () => {
                     <Button
                       className={`w-full ${
                         plan.popular
-                          ? "bg-lime-400 hover:bg-lime-500 text-black"
-                          : "bg-gray-700 hover:bg-gray-600 text-white"
+                          ? "bg-lime-400 hover:bg-lime-500 text-foreground"
+                          : "bg-gray-700 hover:bg-gray-600 text-foreground"
                       }`}
                     >
                       Choose Plan
@@ -269,9 +269,9 @@ const Contact = () => {
       </section>
 
       {/* Social Media */}
-      <section className="py-12 bg-black">
+      <section className="py-12 bg-background">
         <div className="container mx-auto px-4 text-center">
-          <h3 className="text-2xl font-bold text-white mb-6">Follow Us</h3>
+          <h3 className="text-2xl font-bold text-foreground mb-6">Follow Us</h3>
           <div className="flex justify-center space-x-6">
             {[Instagram, Facebook, Twitter].map((Icon, index) => (
               <motion.a
@@ -281,7 +281,7 @@ const Contact = () => {
                 whileTap={{ scale: 0.95 }}
                 className="w-12 h-12 bg-lime-400 rounded-full flex items-center justify-center hover:bg-lime-500 transition-colors duration-300"
               >
-                <Icon className="w-6 h-6 text-black" />
+                <Icon className="w-6 h-6 text-foreground" />
               </motion.a>
             ))}
           </div>
diff --git a/src/pages/Services.jsx b/src/pages/Services.jsx
index 926e614..ab6ede3 100644
--- a/src/pages/Services.jsx
+++ b/src/pages/Services.jsx
@@ -72,21 +72,21 @@ const itemVariants = {
 
 const Services = () => {
   return (
-    <div className="min-h-screen bg-black overflow-x-hidden pt-20">
+    <div className="min-h-screen bg-background pt-20">
       {/* Hero Section */}
-      <section className="relative py-20 overflow-x-hidden">
-        <div className="absolute inset-0 bg-gradient-to-r from-lime-400/20 to-green-400/20" />
-        <div className="max-w-screen-xl w-full mx-auto px-4 relative z-10">
+      <section className="relative py-20 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-r from-green-500/40 to-lime-500/40 dark:from-lime-400/20 dark:to-green-400/20" />
+        <div className="container mx-auto px-4 relative z-10">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8 }}
             className="text-center max-w-4xl mx-auto"
           >
-            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 break-words">
-              Our <span className="text-lime-400">Services</span>
+            <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6">
+              Our <span className="text-lime-500 dark:text-lime-400">Services</span>
             </h1>
-            <p className="text-xl text-gray-300 mb-8">
+            <p className="text-xl text-muted-foreground mb-8">
               Discover our comprehensive range of fitness services designed to help you achieve your goals
             </p>
           </motion.div>
@@ -104,30 +104,32 @@ const Services = () => {
           >
             {services.map((service, index) => (
               <motion.div key={index} variants={itemVariants}>
-                <Card className="bg-gray-900 border-gray-700 hover:border-lime-400 transition-all duration-300 group overflow-hidden">
+                <Card className="bg-card border-border hover:border-lime-400 transition-all duration-300 group overflow-hidden">
                   <div className="relative h-48 overflow-hidden">
                     <img
                       src={service.image || "/placeholder.svg"}
                       alt={service.title}
                       className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent" />
                     <div className="absolute bottom-4 left-4">
                       <service.icon className="w-8 h-8 text-lime-400" />
                     </div>
                   </div>
                   <div className="p-6">
-                    <h3 className="text-white text-xl font-bold mb-2">{service.title}</h3>
-                    <p className="text-gray-400 mb-4">{service.description}</p>
+                    <h3 className="text-foreground text-xl font-bold mb-2">{service.title}</h3>
+                    <p className="text-muted-foreground mb-4">{service.description}</p>
                     <ul className="space-y-2 mb-6">
                       {service.features.map((feature, idx) => (
-                        <li key={idx} className="text-gray-300 flex items-center">
+                        <li key={idx} className="text-muted-foreground flex items-center">
                           <div className="w-2 h-2 bg-lime-400 rounded-full mr-3" />
                           {feature}
                         </li>
                       ))}
                     </ul>
-                    <Button className="w-full bg-lime-400 hover:bg-lime-500 text-black">Learn More</Button>
+                    <Button className="w-full bg-lime-400 hover:bg-lime-500 text-black">
+                      Learn More
+                    </Button>
                   </div>
                 </Card>
               </motion.div>
@@ -150,7 +152,7 @@ const Services = () => {
               Join thousands of members who have transformed their lives with our expert guidance and world-class
               facilities.
             </p>
-            <Button size="lg" className="bg-black text-lime-400 hover:bg-gray-800 px-8 py-3 text-lg">
+            <Button size="lg" className="bg-foreground text-background hover:bg-muted px-8 py-3 text-lg">
               Get Started Today
             </Button>
           </motion.div>
diff --git a/tailwind.config.js b/tailwind.config.js
index a18f36a..07ec1e3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
   content: ["./src/**/*.{js,jsx,ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     container: {