diff --git a/typescript-sdk/apps/dojo/src/app/layout.tsx b/typescript-sdk/apps/dojo/src/app/layout.tsx index e50d64878..33145d123 100644 --- a/typescript-sdk/apps/dojo/src/app/layout.tsx +++ b/typescript-sdk/apps/dojo/src/app/layout.tsx @@ -32,8 +32,9 @@ export default function RootLayout({ diff --git a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx index bd069df3b..92a5a4477 100644 --- a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx +++ b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx @@ -21,6 +21,7 @@ import { Feature } from "@/types/integration"; import { useURLParams } from "@/contexts/url-params-context"; import { View } from "@/types/interface"; import { getTitleForCurrentDomain } from "@/utils/domain-config"; +import { useTheme } from "next-themes"; interface SidebarProps { isMobile?: boolean; @@ -30,8 +31,10 @@ interface SidebarProps { export function Sidebar({ isMobile, onMobileClose }: SidebarProps) { const router = useRouter(); const pathname = usePathname(); + const { theme, setTheme } = useTheme(); + const isDarkTheme = theme === "dark" + console.log(isDarkTheme) const { view, frameworkPickerHidden, viewPickerHidden, featurePickerHidden, setView} = useURLParams(); - const [isDarkTheme, setIsDarkTheme] = useState(false); // Extract the current integration ID from the pathname const pathParts = pathname.split("/"); @@ -67,38 +70,6 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) { router.push(`/${integrationId}`); }; - // Check for dark mode using media query - useEffect(() => { - // Check if we're in the browser - if (typeof window !== "undefined") { - // Initial check - setIsDarkTheme(window.matchMedia("(prefers-color-scheme: dark)").matches); - - // Listen for changes - const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); - const handleChange = (e: MediaQueryListEvent) => { - setIsDarkTheme(e.matches); - }; - - mediaQuery.addEventListener("change", handleChange); - - // Also check for .dark class which is added by next-themes - const observer = new MutationObserver(() => { - setIsDarkTheme(document.documentElement.classList.contains("dark")); - }); - - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ["class"], - }); - - return () => { - mediaQuery.removeEventListener("change", handleChange); - observer.disconnect(); - }; - } - }, []); - const tabClass = `cursor-pointer flex-1 h-8 px-2 text-sm text-primary shadow-none bg-none border-none font-medium gap-1 rounded-lg data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-none` return ( diff --git a/typescript-sdk/apps/dojo/src/components/theme-provider.tsx b/typescript-sdk/apps/dojo/src/components/theme-provider.tsx index ae7a50260..9c7db5d49 100644 --- a/typescript-sdk/apps/dojo/src/components/theme-provider.tsx +++ b/typescript-sdk/apps/dojo/src/components/theme-provider.tsx @@ -1,17 +1,8 @@ "use client"; import * as React from "react"; -import { ThemeProvider as NextThemesProvider } from "next-themes"; +import { ThemeProvider as NextThemesProvider, ThemeProviderProps as NextThemeProviderProps } from "next-themes"; -type ThemeProviderProps = { - children: React.ReactNode; - attribute?: string; - defaultTheme?: string; - enableSystem?: boolean; - disableTransitionOnChange?: boolean; -}; - -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { - // @ts-expect-error -- ignore +export function ThemeProvider({ children, ...props }: NextThemeProviderProps) { return {children}; }