Fix dark mode consistency and set as default theme

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",

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>

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>

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>

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>
   );

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"

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>

src/css/custom.css

@@ -28,6 +28,28 @@
   --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);
+  --ifm-font-color-base: #e3e3e3;
+
+  /* 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 +177,80 @@
   -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);
+}
+
+/* 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;
 }

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>

src/theme/Root.tsx

@@ -5,6 +5,41 @@ 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');
+                  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
+                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');
+                document.body.classList.add('dark');
+              }
+            })();
+          `,
+        }}
+      />
       {children}
       <Analytics />
     </>