From 5757f451eef5743a22f377784a71810f03359ad7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 6 Jul 2025 06:07:35 +0000
Subject: [PATCH 1/3] Initial plan


From 5cd508d6849d7d2673c9a67c6474966fef78c312 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 6 Jul 2025 06:27:52 +0000
Subject: [PATCH 2/3] Fix dark mode consistency and set as default theme

Co-authored-by: sanjay-kv <30715153+sanjay-kv@users.noreply.github.com>
---
 docusaurus.config.ts |  6 ++++++
 src/css/custom.css   | 49 ++++++++++++++++++++++++++++++++++++++++++++
 src/theme/Root.tsx   | 32 +++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index ea8a059..c5a726e 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -72,6 +72,12 @@ const config: Config = {
   ],
 
   themeConfig: {
+    // Set dark mode as default and ensure preferences persist
+    colorMode: {
+      defaultMode: 'dark',
+      disableSwitch: false,
+      respectPrefersColorScheme: false,
+    },
     image: "img/docusaurus-social-card.jpg",
     navbar: {
       title: "Recode Hive",
diff --git a/src/css/custom.css b/src/css/custom.css
index dc3ef31..0ca2720 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -28,6 +28,27 @@
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  
+  /* Ensure consistent dark background and text colors */
+  --ifm-background-color: #1b1b1d;
+  --ifm-background-surface-color: #242526;
+  --ifm-color-content: #e3e3e3;
+  --ifm-color-content-secondary: rgba(255, 255, 255, 0.8);
+  
+  /* Navigation and UI elements */
+  --ifm-navbar-background-color: #242526;
+  --ifm-footer-background-color: #242526;
+  --ifm-menu-color-background-active: rgba(255, 255, 255, 0.05);
+  --ifm-menu-color-background-hover: rgba(255, 255, 255, 0.03);
+  
+  /* Code blocks */
+  --ifm-code-background: #2d2d30;
+  --ifm-pre-background: #2d2d30;
+  --ifm-blockquote-background-color: rgba(255, 255, 255, 0.05);
+  
+  /* Links and interactive elements */
+  --ifm-link-color: #4fb3e1;
+  --ifm-link-hover-color: #25c2a0;
 }
 
 
@@ -155,4 +176,32 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
+}
+
+/* Ensure Tailwind dark class is synced with Docusaurus theme */
+[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+[data-theme='light'] {
+  color-scheme: light;
+}
+
+/* Additional dark mode consistency fixes */
+[data-theme='dark'] .navbar__logo img {
+  filter: brightness(1.2);
+}
+
+[data-theme='dark'] .footer {
+  --ifm-footer-background-color: var(--ifm-background-surface-color);
+}
+
+/* Ensure dropdown menus work well in dark mode */
+[data-theme='dark'] .dropdown__menu {
+  background-color: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+}
+
+[data-theme='dark'] .dropdown__link:hover {
+  background-color: var(--ifm-menu-color-background-hover);
 }
\ No newline at end of file
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
index 9ab5a6f..f55c9de 100644
--- a/src/theme/Root.tsx
+++ b/src/theme/Root.tsx
@@ -5,6 +5,38 @@ import { Analytics } from '@vercel/analytics/react';
 export default function Root({children}) {
   return (
     <>
+      {/* Script to prevent flash of light theme on initial load */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            (function() {
+              try {
+                // Check for stored theme preference, default to dark
+                const storedTheme = localStorage.getItem('theme');
+                const theme = storedTheme || 'dark';
+                
+                // Apply theme immediately to prevent flash
+                if (theme === 'dark') {
+                  document.documentElement.setAttribute('data-theme', 'dark');
+                  document.documentElement.classList.add('dark');
+                } else {
+                  document.documentElement.setAttribute('data-theme', 'light');
+                  document.documentElement.classList.remove('dark');
+                }
+                
+                // Store theme if not already stored
+                if (!storedTheme) {
+                  localStorage.setItem('theme', 'dark');
+                }
+              } catch (e) {
+                // If localStorage fails, default to dark theme
+                document.documentElement.setAttribute('data-theme', 'dark');
+                document.documentElement.classList.add('dark');
+              }
+            })();
+          `,
+        }}
+      />
       {children}
       <Analytics />
     </>

From a012707e6327eab084e55ff3d484ed8ec62f8f6d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 6 Jul 2025 07:06:37 +0000
Subject: [PATCH 3/3] Fix dark mode text readability and white layout
 inconsistencies

Co-authored-by: sanjay-kv <30715153+sanjay-kv@users.noreply.github.com>
---
 src/components/Roadmap/RoadmapCard.tsx        |  2 +-
 src/components/blogCarousel/blogCard.tsx      |  8 +--
 src/components/ourProjects.tsx                |  4 +-
 .../testimonials/TestimonialCard.tsx          | 12 ++---
 src/components/topmate/TopMateCard.tsx        | 14 +++---
 src/components/topmate/TopMateSection.tsx     |  4 +-
 src/css/custom.css                            | 49 +++++++++++++++++++
 src/pages/index.tsx                           |  2 +-
 src/theme/Root.tsx                            |  3 ++
 9 files changed, 75 insertions(+), 23 deletions(-)

diff --git a/src/components/Roadmap/RoadmapCard.tsx b/src/components/Roadmap/RoadmapCard.tsx
index 8b002f6..9d875b8 100644
--- a/src/components/Roadmap/RoadmapCard.tsx
+++ b/src/components/Roadmap/RoadmapCard.tsx
@@ -25,7 +25,7 @@ const RoadmapCard: React.FC<RoadmapCardProps> = ({
           <li key={item.text} className="flex items-center mb-2">
             <span
               className={
-                item.status === "done" ? "line-through text-gray-500" : ""
+                item.status === "done" ? "line-through text-gray-500 dark:text-gray-400" : ""
               }
             >
               <Link to={item.link}>{item.text}</Link>
diff --git a/src/components/blogCarousel/blogCard.tsx b/src/components/blogCarousel/blogCard.tsx
index e1d95ed..546337a 100644
--- a/src/components/blogCarousel/blogCard.tsx
+++ b/src/components/blogCarousel/blogCard.tsx
@@ -63,7 +63,7 @@ const BlogCard = ({
           className="absolute top-0 h-full bg-gradient-to-r from-white/30 via-transparent to-white/30 pointer-events-none"
         />
 
-        <Card className="max-w-md w-full p-4  h-full border-none rounded-2xl bg-white ">
+        <Card className="max-w-md w-full p-4 h-full border-none rounded-2xl bg-white dark:bg-gray-800">
           <img
             src={imageUrl}
             alt=""
@@ -72,13 +72,13 @@ const BlogCard = ({
             className="w-full h-48 object-contain rounded-lg"
           />
           <CardContent className="p-4 space-y-2">
-            <div className="text-sm text-gray-500 ">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
               {date}
             </div>
-            <h2 className="text-lg font-semibold text-gray-900 ">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
               {title}
             </h2>
-            <div className="text-sm text-gray-700  line-clamp-3">
+            <div className="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">
               {content}
             </div>
           </CardContent>
diff --git a/src/components/ourProjects.tsx b/src/components/ourProjects.tsx
index 4bf6850..04e280c 100644
--- a/src/components/ourProjects.tsx
+++ b/src/components/ourProjects.tsx
@@ -34,7 +34,7 @@ export interface SelectComponentProps {
 
 const OurProjects: React.FC<OurProjectsProps> = ({ OurProjectsData }) => {
   return (
-    <div className="flex flex-col items-center justify-center gap-10 sm:gap-20 py-10 sm:py-20 px-4  min-h-screen bg-gradient-to-b from-gray-50 to-white">
+    <div className="flex flex-col items-center justify-center gap-10 sm:gap-20 py-10 sm:py-20 px-4 min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
       <HeadingComponent
         tag={OurProjectsData.tag}
         title={OurProjectsData.title}
@@ -78,7 +78,7 @@ const HeadingComponent: React.FC<HeadingComponentProps> = ({
         initial={{ opacity: 0, x: 20 }}
         whileInView={{ opacity: 1, x: 0 }}
         transition={{ duration: 0.5, delay: 0.2 }}
-        className="text-gray-600 text-base sm:text-lg text-justify h-full flex items-center md:pr-10 justify-center leading-relaxed"
+        className="text-gray-600 dark:text-gray-300 text-base sm:text-lg text-justify h-full flex items-center md:pr-10 justify-center leading-relaxed"
       >
         {description}
       </motion.div>
diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index bc9f8f1..eb5deb2 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -22,7 +22,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 h-[250px] flex flex-col justify-between"
+      className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 h-[250px] flex flex-col justify-between"
     >
       {/* Header with Avatar and Name */}
       <div className="flex items-center gap-4">
@@ -31,16 +31,16 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <div>
-          <h3 className="font-semibold text-gray-900 text-lg">{name}</h3>
-          <p className="text-sm text-gray-500">@{username}</p>
+          <h3 className="font-semibold text-gray-900 dark:text-white text-lg">{name}</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">@{username}</p>
         </div>
       </div>
 
       {/* Content */}
-      <p className="text-gray-700 line-clamp-3 my-4 flex-grow">{content}</p>
+      <p className="text-gray-700 dark:text-gray-300 line-clamp-3 my-4 flex-grow">{content}</p>
 
       {/* Footer with Hashtags and Date */}
-      <div className="flex items-center justify-between text-sm pt-2 border-t border-gray-100">
+      <div className="flex items-center justify-between text-sm pt-2 border-t border-gray-100 dark:border-gray-700">
         <div className="flex gap-2 flex-wrap">
           {content.match(/#\w+/g)?.map((hashtag, index) => (
             <span
@@ -51,7 +51,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
             </span>
           ))}
         </div>
-        <span className="text-gray-400 shrink-0">{date}</span>
+        <span className="text-gray-400 dark:text-gray-500 shrink-0">{date}</span>
       </div>
     </motion.div>
   );
diff --git a/src/components/topmate/TopMateCard.tsx b/src/components/topmate/TopMateCard.tsx
index b5828bc..60c97c1 100644
--- a/src/components/topmate/TopMateCard.tsx
+++ b/src/components/topmate/TopMateCard.tsx
@@ -22,7 +22,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
-      className="relative w-full max-w-md mx-auto bg-white rounded-3xl shadow-2xl overflow-hidden hover:shadow-3xl transition-all duration-300 transform hover:-translate-y-1"
+      className="relative w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-2xl overflow-hidden hover:shadow-3xl transition-all duration-300 transform hover:-translate-y-1"
     >
       {/* Decorative Arrows */}
       <div className="absolute -top-4 -left-4 flex gap-2">
@@ -44,23 +44,23 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
         {/* Header */}
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
-            <span className="text-sm font-medium text-gray-600">1:1 CALL</span>
-            <div className="flex items-center gap-1 text-gray-500">
+            <span className="text-sm font-medium text-gray-600 dark:text-gray-300">1:1 CALL</span>
+            <div className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
               <Clock size={16} />
               <span className="text-sm">{duration}</span>
             </div>
           </div>
-          <button className="text-gray-400 hover:text-gray-600 transition-colors">
+          <button className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors">
             <span className="sr-only">Close</span>
             ×
           </button>
         </div>
 
         {/* Title */}
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">{title}</h2>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">{title}</h2>
 
         {/* Description */}
-        <p className="text-gray-600 mb-6">{description}</p>
+        <p className="text-gray-600 dark:text-gray-300 mb-6">{description}</p>
 
         {/* Profile Section */}
         <div className="flex items-center justify-between">
@@ -71,7 +71,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
               className="w-12 h-12 rounded-full object-cover border-2 border-purple-200"
             />
             <div className="flex flex-col">
-              <span className="text-sm text-gray-600">Book a slot at</span>
+              <span className="text-sm text-gray-600 dark:text-gray-300">Book a slot at</span>
               <a
                 href={`https://topmate.io/${username}`}
                 target="_blank"
diff --git a/src/components/topmate/TopMateSection.tsx b/src/components/topmate/TopMateSection.tsx
index 9d256cc..0d46921 100644
--- a/src/components/topmate/TopMateSection.tsx
+++ b/src/components/topmate/TopMateSection.tsx
@@ -14,10 +14,10 @@ const TopMateSection = () => {
     <div className="px-4">
       <div className=" mx-auto">
         <div className=" mx-auto text-center mb-16">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
             Book a Session
           </h1>
-          <p className="text-lg text-gray-600">
+          <p className="text-lg text-gray-600 dark:text-gray-300">
             Get personalized guidance and feedback through one-on-one sessions
           </p>
         </div>
diff --git a/src/css/custom.css b/src/css/custom.css
index 0ca2720..7322dc8 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -34,6 +34,7 @@
   --ifm-background-surface-color: #242526;
   --ifm-color-content: #e3e3e3;
   --ifm-color-content-secondary: rgba(255, 255, 255, 0.8);
+  --ifm-font-color-base: #e3e3e3;
   
   /* Navigation and UI elements */
   --ifm-navbar-background-color: #242526;
@@ -204,4 +205,52 @@
 
 [data-theme='dark'] .dropdown__link:hover {
   background-color: var(--ifm-menu-color-background-hover);
+}
+
+/* Ensure all text elements have proper dark mode colors */
+[data-theme='dark'] {
+  color: var(--ifm-font-color-base);
+}
+
+[data-theme='dark'] p,
+[data-theme='dark'] h1,
+[data-theme='dark'] h2, 
+[data-theme='dark'] h3,
+[data-theme='dark'] h4,
+[data-theme='dark'] h5,
+[data-theme='dark'] h6,
+[data-theme='dark'] span,
+[data-theme='dark'] div {
+  color: var(--ifm-font-color-base);
+}
+
+/* Ensure header content has proper colors in dark mode */
+[data-theme='dark'] .chh__header-content p {
+  color: var(--ifm-color-content-secondary);
+}
+
+/* Ensure proper contrast for main content areas */
+[data-theme='dark'] main {
+  background-color: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+}
+
+/* Synchronize Tailwind dark mode with Docusaurus theme */
+[data-theme='dark'] .dark\:from-gray-900 {
+  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+[data-theme='dark'] .dark\:to-gray-800 {
+  --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
+}
+
+/* Apply dark mode to html when data-theme is dark */
+html[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+html[data-theme='light'] {
+  color-scheme: light;
 }
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b93e1cd..77363b5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -51,7 +51,7 @@ export default function Home(): ReactNode {
           src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
         />
       </Head>
-      <main className="bg-gradient-to-b from-white to-white/50">
+      <main className="bg-gradient-to-b from-white to-white/50 dark:from-gray-900 dark:to-gray-800">
         <div className="m-4">
           <Header />
         </div>
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
index f55c9de..0dff4d1 100644
--- a/src/theme/Root.tsx
+++ b/src/theme/Root.tsx
@@ -19,9 +19,11 @@ export default function Root({children}) {
                 if (theme === 'dark') {
                   document.documentElement.setAttribute('data-theme', 'dark');
                   document.documentElement.classList.add('dark');
+                  document.body.classList.add('dark');
                 } else {
                   document.documentElement.setAttribute('data-theme', 'light');
                   document.documentElement.classList.remove('dark');
+                  document.body.classList.remove('dark');
                 }
                 
                 // Store theme if not already stored
@@ -32,6 +34,7 @@ export default function Root({children}) {
                 // If localStorage fails, default to dark theme
                 document.documentElement.setAttribute('data-theme', 'dark');
                 document.documentElement.classList.add('dark');
+                document.body.classList.add('dark');
               }
             })();
           `,