fixed bugs for dark theme

src/components/ui/NavbarFirebaseAuthGithub.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect } from "react";
-import ReactDOM from "react-dom/client";
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import FirebaseAuthGithub from "./FirebaseAuthGithub";
 
 const NavbarFirebaseAuthGithub: React.FC = () => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
   useEffect(() => {
-    const container = document.getElementById("firebase-auth-github-navbar");
-    if (container && !container.hasChildNodes()) {
-      const root = ReactDOM.createRoot(container);
-      root.render(<FirebaseAuthGithub />);
-    }
+    const el = document.getElementById("firebase-auth-github-navbar");
+    setContainer(el);
   }, []);
-  return null;
+
+  return container ? createPortal(<FirebaseAuthGithub />, container) : null;
 };
 
 export default NavbarFirebaseAuthGithub;

src/pages/badges/github-badges.tsx

@@ -3,33 +3,6 @@ import Head from '@docusaurus/Head';
 import { motion, HTMLMotionProps } from 'framer-motion';
 import type { ReactElement } from 'react';
 import Layout from '@theme/Layout';
-import { useColorMode } from '@docusaurus/theme-common';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-
-// Safe hook for color mode that handles SSR
-function useSafeColorMode() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  let colorMode = 'light';
-  let isDark = false;
-
-  if (mounted && ExecutionEnvironment.canUseDOM) {
-    try {
-      const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common');
-      const colorModeResult = useColorModeHook();
-      colorMode = colorModeResult.colorMode;
-      isDark = colorMode === 'dark';
-    } catch (error) {
-      console.warn('Failed to get color mode:', error);
-    }
-  }
-
-  return { colorMode, isDark, mounted };
-}
 import styles from './github-badges.module.css';
 
 type MotionDivProps = HTMLMotionProps<"div">;
@@ -38,7 +11,13 @@ type MotionTrProps = HTMLMotionProps<"tr">;
 import Link from '@docusaurus/Link';
 
 const GithubBadgesContent = (): React.ReactElement => {
-  const { colorMode, isDark, mounted } = useSafeColorMode();
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    try {
+      const theme = document.documentElement.getAttribute('data-theme');
+      setIsDark(theme === 'dark');
+    } catch {}
+  }, []);
 
   // Scroll to top button logic
   useEffect(() => {

src/pages/careers/index.tsx

@@ -3,33 +3,6 @@ import Layout from "@theme/Layout";
 import Head from "@docusaurus/Head";
 import { motion } from "framer-motion";
 import Link from "@docusaurus/Link";
-import { useColorMode } from '@docusaurus/theme-common';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-
-// Safe hook for color mode that handles SSR
-function useSafeColorMode() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  let colorMode = 'light';
-  let isDark = false;
-
-  if (mounted && ExecutionEnvironment.canUseDOM) {
-    try {
-      const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common');
-      const colorModeResult = useColorModeHook();
-      colorMode = colorModeResult.colorMode;
-      isDark = colorMode === 'dark';
-    } catch (error) {
-      console.warn('Failed to get color mode:', error);
-    }
-  }
-
-  return { colorMode, isDark, mounted };
-}
 
 // Animation variants for consistent animations
 const fadeIn = {
@@ -151,7 +124,13 @@ const testimonials = [
 ];
 
 function CareersContent() {
-  const { colorMode, isDark, mounted } = useSafeColorMode();
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    try {
+      const theme = document.documentElement.getAttribute('data-theme');
+      setIsDark(theme === 'dark');
+    } catch {}
+  }, []);
   const [activeTestimonial, setActiveTestimonial] = useState(0);
 
   useEffect(() => {

src/pages/get-started/index.tsx

@@ -4,33 +4,6 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { motion, useAnimation, useInView } from "framer-motion";
 import Head from '@docusaurus/Head';
-import { useColorMode } from '@docusaurus/theme-common';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-
-// Safe hook for color mode that handles SSR
-function useSafeColorMode() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  let colorMode = 'light';
-  let isDark = false;
-
-  if (mounted && ExecutionEnvironment.canUseDOM) {
-    try {
-      const { useColorMode: useColorModeHook } = require('@docusaurus/theme-common');
-      const colorModeResult = useColorModeHook();
-      colorMode = colorModeResult.colorMode;
-      isDark = colorMode === 'dark';
-    } catch (error) {
-      console.warn('Failed to get color mode:', error);
-    }
-  }
-
-  return { colorMode, isDark, mounted };
-}
 import styles from "./styles.module.css";
 
 // Type definitions
@@ -635,7 +608,13 @@ const LearningPath = ({
 
 function GetStartedContent() {
   const { siteConfig } = useDocusaurusContext();
-  const { colorMode, isDark, mounted } = useSafeColorMode();
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    try {
+      const theme = document.documentElement.getAttribute('data-theme');
+      setIsDark(theme === 'dark');
+    } catch {}
+  }, []);
   type CompletedPaths = Record<string, boolean>;
 
   const [completedPaths, setCompletedPaths] = useState<CompletedPaths>(() => {

src/theme/Layout.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import Layout from "@theme-original/Layout";
-import NavbarFirebaseAuthGithub from "@site/src/components/ui/NavbarFirebaseAuthGithub";
 import NewsletterPopup from '../components/NewsLetterPopup';
 
 
@@ -10,7 +9,6 @@ export default function CustomLayout({ children, ...props }) {
   return (
   <>
     <Layout {...props}>
-      <NavbarFirebaseAuthGithub />
       {children}
     </Layout>
     <NewsletterPopup />

src/theme/Root.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
-import { Analytics } from '@vercel/analytics/react';
+import OriginalRoot from '@theme-original/Root';
 
-// Default implementation, that you can customize
-export default function Root({children}) {
-  return (
-    <>
-      {children}
-      <Analytics />
-    </>
-  );
+// Delegate entirely to the original Root to preserve all providers during SSG
+export default function Root(props) {
+  return <OriginalRoot {...props} />;
 }