fixed dark mode in careers page

Author: kalyaniugale

package.json

@@ -57,17 +57,17 @@
     "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.8.1",
+    "@docusaurus/module-type-aliases": "^3.8.1",
     "@docusaurus/tsconfig": "^3.8.1",
-    "@docusaurus/types": "3.8.1",
+    "@docusaurus/types": "^3.8.1",
     "@tailwindcss/postcss": "^4.1.4",
     "@types/canvas-confetti": "^1.9.0",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.1.4",
-    "typescript": "~5.6.2"
+    "typescript": "~5.3"
   },
   "browserslist": {
     "production": [

src/pages/careers/index.tsx

@@ -3,30 +3,40 @@ 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';
+// removed useColorMode import to avoid provider + SSR issues
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
 // Safe hook for color mode that handles SSR
 function useSafeColorMode() {
   const [mounted, setMounted] = useState(false);
+  const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
+  const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
     setMounted(true);
-  }, []);
+    if (!ExecutionEnvironment.canUseDOM) return;
 
-  let colorMode = 'light';
-  let isDark = false;
+    const getThemeFromDOM = () =>
+      (document.documentElement.getAttribute('data-theme') as 'light' | 'dark') || 'light';
 
-  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);
-    }
-  }
+    const applyTheme = () => {
+      const mode = getThemeFromDOM();
+      setColorMode(mode);
+      setIsDark(mode === 'dark');
+    };
+
+    // set immediately on mount
+    applyTheme();
+
+    // watch for changes when navbar toggle is clicked
+    const observer = new MutationObserver(applyTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   return { colorMode, isDark, mounted };
 }
@@ -515,7 +525,7 @@ function CareersContent() {
               variants={fadeIn}
             >
               <div className="testimonial-content text-center">
-                <div className="w-20 h-20 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full mx-auto mb-6 flex items-center justify-center">
+                <div className="w-20 h-20 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full mx-auto mb-6 flex items                                       center justify-center">
                   <span className="text-2xl">👤</span>
                 </div>
                 <blockquote 
@@ -611,4 +621,4 @@ function CareersContent() {
 
 export default function CareersPage() {
   return <CareersContent />;
-}
+}

tsconfig.json

@@ -1,13 +1,22 @@
 {
-  // This file is not used in compilation. It is here just for a nice editor experience.
+  "//": "Editor-only tsconfig for Docusaurus + TypeScript",
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "baseUrl": ".",
     "esModuleInterop": true,
     "moduleResolution": "node",
-    "resolveJsonModule": true
-    
+    "resolveJsonModule": true,
+    "types": ["@docusaurus/module-type-aliases", "node"]
   },
-  "exclude": [".docusaurus", "build"]
+  "include": [
+    "src",
+    "docusaurus.config.ts",
+    "docusaurus.config.js",
+    "sidebars.ts",
+    "sidebars.js",
+    "plugins",
+    "docs"
+  ],
+  "exclude": [".docusaurus", "build", "node_modules"]
 }