Merge pull request #308 from ag-ui-protocol/chore/disable-dark-theme-in-dojo

ranst91 · web-flow · commit e7067c396ca7 · 2025-08-19T16:49:59.000+02:00
chore: disable dark theme in dojo
diff --git 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({
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="light"
+          enableSystem={false}
+          themes={['light']}
           disableTransitionOnChange
         >
           <Suspense>
diff --git 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<boolean>(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
@@ -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 <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
