diff --git a/package.json b/package.json index 16603219..b42bb8b0 100644 --- a/package.json +++ b/package.json @@ -57,9 +57,9 @@ "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", @@ -67,7 +67,7 @@ "autoprefixer": "^10.4.21", "postcss": "^8.5.3", "tailwindcss": "^4.1.4", - "typescript": "~5.6.2" + "typescript": "~5.3" }, "browserslist": { "production": [ diff --git a/src/pages/careers/index.tsx b/src/pages/careers/index.tsx index cf0ac52b..65e74ea1 100644 --- a/src/pages/careers/index.tsx +++ b/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} >