[Enhancement] UI Toggle Consistency with no merging conflicts

src/app/globals.css

@@ -3,6 +3,8 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --foreground-rgb: 23, 23, 23;
+  --background-rgb: 255, 255, 255;
 }
 
 @theme inline {
@@ -12,15 +14,66 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  --foreground-rgb: 237, 237, 237;
+  --background-rgb: 10, 10, 10;
 }
 
-body {
+/* LIGHT MODE BACKGROUND */
+
+/* Light mode background change */
+html:not(.dark) {
+  --hero-bg: linear-gradient(
+    135deg,
+    #f7f9ff 0%,
+    #eef2ff 45%,
+    #ffffff 100%
+  );
+}
+
+/* Dark mode - Orginal */
+html.dark {
+  --hero-bg:
+    radial-gradient(
+      1200px circle at 20% 20%,
+      rgba(88, 101, 242, 0.35),
+      transparent 60%
+    ),
+    radial-gradient(
+      1000px circle at 80% 30%,
+      rgba(168, 85, 247, 0.35),
+      transparent 60%
+    ),
+    linear-gradient(
+      180deg,
+      #020617 0%,
+      #020617 100%
+    );
+}
+
+html {
   background: var(--background);
   color: var(--foreground);
+}
+
+body {
+  background: transparent;
+  color: inherit;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Override hardcoded text colors */
+.theme-root {
+  color: var(--foreground);
+}
+
+/* Makes the sections to use theme background colors */
+section,
+main,
+article,
+header
+{
+  background-color: transparent;
+}

src/app/layout.tsx

@@ -52,7 +52,7 @@ export const viewport: Viewport = {
     { media: '(prefers-color-scheme: light)', color: '#1f2937' },
     { media: '(prefers-color-scheme: dark)', color: '#111827' },
   ],
-  colorScheme: 'dark',
+  colorScheme: 'light dark',
 };
 
 export default function RootLayout({

src/components/home/HeroSection.tsx

@@ -33,17 +33,22 @@ const HeroSection = () => {
   }, []);
 
   return (
-    <section
-      ref={heroRef}
-      className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900/20 to-purple-900/20 relative overflow-hidden flex items-center pt-20"
-    >
-      {/* Animated gradient background */}
-      <div
-        className="absolute inset-0 opacity-30"
-        style={{
-          background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(59, 130, 246, 0.3) 0%, transparent 50%)`
-        }}
-      />
+  <section
+    ref={heroRef}
+    className="min-h-screen relative overflow-hidden flex items-center pt-20 text-[var(--foreground)]"
+    style={{ background: 'var(--hero-bg)' }}
+  >
+    {/* Animated gradient background */}
+    <div
+      className="absolute inset-0 opacity-20 dark:opacity-30"
+      style={{
+        background: `radial-gradient(
+          circle at ${mousePosition.x}% ${mousePosition.y}%,
+          rgba(59, 130, 246, 0.3) 0%,
+          transparent 50%
+        )`
+      }}
+    />
 
       {/* Grid pattern overlay */}
       <div className="absolute inset-0 opacity-40" style={{
@@ -58,19 +63,35 @@ const HeroSection = () => {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="text-center">
-          {/* Badge */}
-          <div className={`inline-flex items-center space-x-3 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-purple-500/10 border border-green-500/20 rounded-full px-6 py-3 mb-8 backdrop-blur-sm transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
-            }`}>
-            <FiGithub className="text-green-400" size={18} aria-hidden="true" />
-            <span className="text-green-300 text-sm font-semibold">Open Source</span>
-            <div className="w-1 h-1 bg-green-400 rounded-full"></div>
-            <span className="text-blue-300 text-sm font-medium">Browser Extension</span>
-          </div>
+{/* Badge */}
+<div
+    className={`inline-flex items-center space-x-3
+      bg-gradient-to-r from-blue-700/22 via-purple-600/25 to-cyan-500/30
+      rounded-full px-6 py-3 mb-8
+      backdrop-blur-sm hover:backdrop-blur-md
+      border border-black/70
+      hover:drop-shadow-[0_8px_16px_rgba(0,0,0,0.35)]
+      hover:drop-shadow-[0_20px_40px_rgba(0,0,0,0.45)]
+      hover:drop-shadow-[0_0_18px_rgba(0,0,0,0.25)]
+      hover:-translate-y-0.5
+      transition-all duration-300 ease-out
+      ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
+    `}
+  >
+  <FiGithub className="text-green-600" size={18} />
+  <span className="text-green-600 text-sm font-semibold">Open Source</span>
+  <div className="w-1 h-1 bg-green-600 rounded-full"></div>
+  <span className="text-yellow-600 text-sm font-medium">Browser Extension</span>
+</div>
 
           {/* Main Heading */}
           <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold mb-8 leading-tight">
-            <span className={`block bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent transition-all duration-1000 delay-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
-              }`}>
+            <span
+              className={`block text-[var(--foreground)]
+                transition-all duration-1000 delay-300
+                ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
+              `}
+            >
               Socialize
             </span>
             <span className={`block bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
@@ -80,8 +101,8 @@ const HeroSection = () => {
           </h1>
 
           {/* Subtitle */}
-          <p className={`text-xl md:text-2xl text-gray-300 mb-12 max-w-4xl mx-auto leading-relaxed transition-all duration-1000 delay-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
-            }`}>
+          <p className={`text-xl md:text-2xl mb-12 max-w-4xl mx-auto leading-relaxed transition-all duration-1000 delay-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
+            `} style={{ color: 'rgba(var(--foreground-rgb), 0.8)' }}>
             The{' '}
             <span className="text-transparent bg-gradient-to-r from-green-400 to-emerald-400 bg-clip-text font-bold">
               open-source
@@ -94,21 +115,22 @@ const HeroSection = () => {
           </p>
 
           {/* Key Features */}
-          <div className={`flex flex-wrap justify-center items-center gap-8 mb-12 transition-all duration-1000 delay-900 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+          <div className={`flex flex-wrap justify-center items-center gap-8 mb-12 allow-colors transition-all duration-1000 delay-900 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
             }`}>
-            {[
-              { icon: FiGithub, text: 'Open Source', color: 'text-green-400' },
-              { icon: FiUsers, text: 'Social Presence', color: 'text-blue-400' },
-              { icon: FiBarChart, text: 'Analytics', color: 'text-cyan-400' },
-              { icon: FiShield, text: 'Privacy First', color: 'text-purple-400' }
-            ].map((feature, index) => (
-              <div key={index} className="flex items-center space-x-2 group cursor-pointer">
-                <div className="p-2 rounded-lg bg-gray-800/50 group-hover:bg-gray-700/50 transition-colors">
-                  <feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} aria-hidden="true" />
-                </div>
-                <span className="text-gray-300 group-hover:text-white transition-colors">{feature.text}</span>
-              </div>
-            ))}
+{[
+  { icon: FiGithub, text: 'Open Source', color: 'text-green-500' },
+  { icon: FiUsers, text: 'Social Presence', color: 'text-blue-600' },
+  { icon: FiBarChart, text: 'Analytics', color: 'text-cyan-600' },
+  { icon: FiShield, text: 'Privacy First', color: 'text-purple-500' }
+].map((feature, index) => (
+  <div key={index} className="flex items-center space-x-2 group cursor-pointer transition-transform duration-200
+  hover:scale-[1.1]">
+    <div className="p-2 rounded-lg bg-[color:color-mix(in srgb, var(--foreground) 12%, transparent)] group-hover:bg-[color:color-mix(in srgb, var(--foreground) 18%, transparent)] transition-colors">
+      <feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} />
+    </div>
+    <span className="transition-colors" style={{ color: 'rgba(var(--foreground-rgb), 0.8)' }}>{feature.text}</span>
+  </div>
+))}
           </div>
 
           {/* CTA Buttons with browser detection */}
@@ -140,7 +162,7 @@ const HeroSection = () => {
 
             <Link
               href="/download"
-              className="border-2 border-gray-600 text-gray-300 px-8 py-4 rounded-2xl font-semibold text-lg hover:border-blue-500 hover:text-blue-400 hover:scale-105 transition-all duration-300 flex items-center space-x-3 group backdrop-blur-sm bg-gray-900/20"
+              className="border-2 border-gray-900 px-8 py-4 rounded-2xl font-semibold text-lg hover:scale-105 transition-all duration-300 flex items-center space-x-3 group backdrop-blur-sm bg-gray-600/40 hover:bg-gray-700/50" style={{ color: 'rgba(var(--foreground-rgb), 0.8)' }}
             >
               <FiDownload size={20} className="group-hover:rotate-12 transition-transform" aria-hidden="true" />
               <span>All Download Options</span>
@@ -157,30 +179,30 @@ const HeroSection = () => {
               className="inline-block hover:scale-105 transition-transform duration-300 group"
             >
               <Image
-                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
+                src= "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark"
                 alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt"
                 width={250}
                 height={54}
-                className="rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-700/50 hover:border-gray-600/50"
+                className="rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
               />
             </a>
           </div>
 
           {/* Browser Support */}
           <div className={`transition-all duration-1000 delay-1300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
             }`}>
-            <p className="text-gray-400 mb-6 text-lg">Available for all major browsers</p>
+            <p className="text-[var(--foreground)] mb-6 text-lg">Available for all major browsers</p>
             <div className="flex justify-center items-center space-x-12">
               {allBrowsers.map((browser, index) => (
                 <div
                   key={browser.name}
                   className="flex flex-col items-center space-y-2 group cursor-pointer"
                   style={{ animationDelay: `${index * 0.1}s` }}
                 >
-                  <div className="text-4xl group-hover:scale-125 group-hover:animate-pulse transition-all duration-300">
+                  <div className="text-4xl group-hover:scale-135 group-hover:animate-pulse transition-all duration-300">
                     {browser.icon}
                   </div>
-                  <span className="text-sm text-gray-400 group-hover:text-white transition-colors">
+                  <span className="text-sm group-hover:text-[var(--foreground)] transition-colors" style={{ color: 'rgba(var(--foreground-rgb), 0.7)' }}>
                     {browser.name}
                   </span>
                 </div>

src/components/layout/Footer.tsx

@@ -7,29 +7,40 @@ const Footer = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-gray-950 text-white relative overflow-hidden">
+    <footer
+      className="relative overflow-hidden border-t"
+      style={{ background: "var(--background)", color: "var(--foreground)",
+      borderColor: "color-mix(in srgb, var(--foreground) 10%, transparent)"
+      }}  
+    >
+    <div className="w-full h-px"
+      style={{ background: "linear-gradient(to right, transparent, color-mix(in srgb, var(--foreground) 20%, transparent), transparent)"
+      }}
+    />
+
       {/* Background effects */}
-      <div className="absolute inset-0">
-        <div className="absolute top-0 left-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl" />
+      <div className="absolute inset-0 pointer-events-none hidden dark:block">
+        <div className="absolute top-0 left-0 w-96 h-96 bg-blue-500/5 dark:bg-blue-500/20 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500/5 dark:bg-purple-500/20 rounded-full blur-3xl" />
       </div>
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 relative z-10">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
           {/* Brand */}
           <div className="col-span-1 md:col-span-2">
-            <div className="flex items-center space-x-3 mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl">
-                <span className="text-white text-2xl font-bold">BP</span>
+            <div className="flex items-center space-x-3 mb-6 group">
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl transition-all duration-300 ease-out group-hover:-rotate-[12deg] group-hover:scale-110 group-hover:shadow-2xl"
+            >
+                <span className="text-2xl font-bold">BP</span>
               </div>
               <div>
                 <span className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                   BrowsePing
                 </span>
-                <div className="text-sm text-gray-400">Socialize Your Browsing</div>
+                <div className="text-sm opacity-80">Socialize Your Browsing</div>
               </div>
             </div>
-            <p className="text-gray-300 mb-6 max-w-md leading-relaxed text-lg">
+            <p className="opacity-90 mb-6 max-w-md leading-relaxed text-lg">
               Transform your solitary browsing into a vibrant social experience. Connect with friends,
               share your digital presence, and discover what&apos;s capturing everyone&apos;s attention across the web.
             </p>
@@ -43,7 +54,7 @@ const Footer = () => {
                 className="inline-block hover:scale-105 transition-transform duration-300"
               >
                 <Image
-                  src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
+                  src= "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark"
                   alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt"
                   width={250}
                   height={54}
@@ -62,7 +73,8 @@ const Footer = () => {
                 <a
                   key={social.label}
                   href={social.href}
-                  className="w-12 h-12 bg-gray-800/50 rounded-xl flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-700/50 transition-all duration-300 hover:scale-110 group border border-gray-800 hover:border-gray-600"
+                  className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 bg-black/5 dark:bg-gray-600/40 hover:bg-black/10 dark:hover:bg-gray-700/60
+                  border border-black/10 dark:border-gray-700 text-[color:rgba(var(--foreground-rgb),0.9)]"
                   aria-label={social.label}
                 >
                   <social.icon size={20} className="group-hover:animate-pulse" aria-hidden="true" />
@@ -73,7 +85,8 @@ const Footer = () => {
 
           {/* Quick Links */}
           <div>
-            <h3 className="font-bold text-xl mb-6 text-white">Quick Links</h3>
+            <h3 className="font-bold text-xl mb-6 text-[var(--foreground)]">
+            Quick Links</h3>
             <ul className="space-y-4">
               {[
                 { href: '/download', label: 'Download' },
@@ -84,7 +97,7 @@ const Footer = () => {
                 <li key={link.href}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-blue-400 transition-colors duration-200 flex items-center space-x-2 group"
+                    className="opacity-80 hover:opacity-100 hover:text-blue-500 transition-colors duration-200 flex items-center space-x-2 group"
                   >
                     <span className="w-0 h-0.5 bg-blue-400 group-hover:w-4 transition-all duration-300"></span>
                     <span>{link.label}</span>
@@ -96,7 +109,8 @@ const Footer = () => {
 
           {/* Support */}
           <div>
-            <h3 className="font-bold text-xl mb-6 text-white">Support</h3>
+            <h3 className="font-bold text-xl mb-6 text-[var(--foreground)]">
+            Support</h3>
             <ul className="space-y-4">
               {[
                 { href: '/help', label: 'Help Center' },
@@ -106,9 +120,9 @@ const Footer = () => {
                 <li key={link.href}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-blue-400 transition-colors duration-200 flex items-center space-x-2 group"
+                    className="opacity-80 hover:opacity-100 hover:text-blue-500 transition-colors duration-200 flex items-center space-x-2 group"
                   >
-                    <span className="w-0 h-0.5 bg-blue-400 group-hover:w-4 transition-all duration-300"></span>
+                    <span className="w-0 h-0.5 bg-blue-500 group-hover:w-4 transition-all duration-300"></span>
                     <span>{link.label}</span>
                   </Link>
                 </li>
@@ -117,11 +131,12 @@ const Footer = () => {
           </div>
         </div>
 
-        <div className="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
-          <div className="text-gray-400 text-sm">
+        <div className="border-t border-[color:rgba(0,0,0,0.1)] dark:border-gray-800
+        mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
+          <div className="opacity-80 text-sm">
             © {currentYear} BrowsePing. All rights reserved.
           </div>
-          <div className="flex items-center space-x-2 text-gray-400 text-sm mt-4 md:mt-0">
+          <div className="flex items-center space-x-2 opacity-80 text-sm mt-4 md:mt-0">
             <span>Made with</span>
             <FiHeart size={16} className="text-red-500 animate-pulse" aria-hidden="true" />
             <span>for better browsing</span>

src/components/layout/Layout.tsx

@@ -10,7 +10,7 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-900 relative">
+    <div className="min-h-screen flex flex-col bg-[var(--background)] relative theme-root">
       <MouseFollower />
       <AnimatedBackground />
       <Navbar />