langchain-ai · Pratham271 · May 26, 2025 · May 26, 2025 · May 27, 2025 · May 27, 2025
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -85,6 +85,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.474.0",
     "next": "14.2.25",
+    "next-themes": "^0.4.6",
     "nuqs": "^2.4.1",
     "pdf-parse": "^1.1.1",
     "react": "^18",

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -3,6 +3,7 @@ import "./globals.css";
 import { Inter } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { ThemeProvider } from "@/components/ui/theme-providers";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -19,9 +20,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="h-screen">
+    <html lang="en" className="h-screen" suppressHydrationWarning>
       <body className={cn("min-h-full", inter.className)}>
-        <NuqsAdapter>{children}</NuqsAdapter>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <NuqsAdapter>{children}</NuqsAdapter>
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/apps/web/src/components/artifacts/CodeRenderer.tsx b/apps/web/src/components/artifacts/CodeRenderer.tsx
@@ -19,6 +19,7 @@ import { cn } from "@/lib/utils";
 import { CopyText } from "./components/CopyText";
 import { getArtifactContent } from "@opencanvas/shared/utils/artifacts";
 import { useGraphContext } from "@/contexts/GraphContext";
+import { useTheme } from "next-themes";
 
 export interface CodeRendererProps {
   editorRef: MutableRefObject<EditorView | null>;
@@ -60,6 +61,7 @@ const getLanguageExtension = (language: string) => {
 
 export function CodeRendererComponent(props: Readonly<CodeRendererProps>) {
   const { graphData } = useGraphContext();
+  const { resolvedTheme } = useTheme();
   const {
     artifact,
     isStreaming,
@@ -112,6 +114,7 @@ export function CodeRendererComponent(props: Readonly<CodeRendererProps>) {
       )}
       <CodeMirror
         editable={isEditable}
+        theme={resolvedTheme === "light" ? "light" : "dark"}
         className={cn(
           "w-full min-h-full",
           styles.codeMirrorCustom,

diff --git a/apps/web/src/components/artifacts/TextRenderer.tsx b/apps/web/src/components/artifacts/TextRenderer.tsx
@@ -18,6 +18,7 @@ import { Eye, EyeOff } from "lucide-react";
 import { motion } from "framer-motion";
 import { Textarea } from "../ui/textarea";
 import { cn } from "@/lib/utils";
+import { useTheme } from "next-themes";
 
 const cleanText = (text: string) => {
   return text.replaceAll("\\\n", "\n");
@@ -44,9 +45,9 @@ function ViewRawText({
         onClick={() => setIsRawView((p) => !p)}
       >
         {isRawView ? (
-          <EyeOff className="w-5 h-5 text-gray-600" />
+          <EyeOff className="w-5 h-5 text-gray-600 dark:text-gray-300" />
         ) : (
-          <Eye className="w-5 h-5 text-gray-600" />
+          <Eye className="w-5 h-5 text-gray-600 dark:text-gray-300" />
         )}
       </TooltipIconButton>
     </motion.div>
@@ -73,6 +74,7 @@ export function TextRendererComponent(props: TextRendererProps) {
   } = graphData;
 
   const [rawMarkdown, setRawMarkdown] = useState("");
+  const { resolvedTheme } = useTheme();
   const [isRawView, setIsRawView] = useState(false);
   const [manuallyUpdatingArtifact, setManuallyUpdatingArtifact] =
     useState(false);
@@ -278,7 +280,7 @@ export function TextRendererComponent(props: TextRendererProps) {
             }
           `}</style>
           <BlockNoteView
-            theme="light"
+            theme={resolvedTheme === "light" ? "light" : "dark"}
             formattingToolbar={false}
             slashMenu={false}
             onCompositionStartCapture={() => (isComposition.current = true)}

diff --git a/apps/web/src/components/artifacts/actions_toolbar/code/index.tsx b/apps/web/src/components/artifacts/actions_toolbar/code/index.tsx
@@ -157,7 +157,7 @@ export function CodeToolBar(props: CodeToolbarProps) {
           }
           variant="outline"
           className={cn(
-            "transition-colors w-[48px] h-[48px] p-0 rounded-xl",
+            "transition-colors w-[48px] h-[48px] p-0 rounded-xl dark:text-gray-300",
             props.isTextSelected
               ? "cursor-default opacity-50 text-gray-400 hover:bg-background"
               : "cursor-pointer"
@@ -169,7 +169,7 @@ export function CodeToolBar(props: CodeToolbarProps) {
               "w-[26px] h-[26px]",
               props.isTextSelected
                 ? "text-gray-400"
-                : "hover:text-gray-900 transition-colors"
+                : "hover:text-gray-900 dark:hover:text-gray-400 transition-colors"
             )}
           />
         </TooltipIconButton>

diff --git a/apps/web/src/components/artifacts/actions_toolbar/custom/index.tsx b/apps/web/src/components/artifacts/actions_toolbar/custom/index.tsx
@@ -193,10 +193,10 @@ export function CustomQuickActions(props: CustomQuickActionsProps) {
         >
           <WandSparkles
             className={cn(
-              "w-[26px] h-[26px]",
+              "w-[26px] h-[26px] dark:text-gray-300",
               props.isTextSelected
                 ? "text-gray-400"
-                : "hover:text-gray-900 transition-colors"
+                : "hover:text-gray-900 hover:dark:text-gray-400 transition-colors"
             )}
           />
         </TooltipIconButton>

diff --git a/apps/web/src/components/artifacts/actions_toolbar/text/index.tsx b/apps/web/src/components/artifacts/actions_toolbar/text/index.tsx
@@ -109,7 +109,7 @@ export function ActionsToolbar(props: ActionsToolbarProps) {
     <div
       ref={toolbarRef}
       className={cn(
-        "fixed bottom-4 right-4 transition-all duration-300 ease-in-out text-black flex flex-col items-center justify-center bg-white",
+        "fixed bottom-4 right-4 transition-all duration-300 ease-in-out text-black flex flex-col items-center justify-center bg-white dark:bg-black dark:text-gray-300",
         isExpanded
           ? "w-fit-content min-h-fit rounded-3xl"
           : "w-12 h-12 rounded-full"
@@ -156,10 +156,10 @@ export function ActionsToolbar(props: ActionsToolbarProps) {
         >
           <MagicPencilSVG
             className={cn(
-              "w-[26px] h-[26px]",
+              "w-[26px] h-[26px] dark:text-gray-300",
               props.isTextSelected
                 ? "text-gray-400"
-                : "hover:text-gray-900 transition-colors"
+                : "hover:text-gray-900 hover:dark:text-gray-400 transition-colors"
             )}
           />
         </TooltipIconButton>

diff --git a/apps/web/src/components/artifacts/components/CopyText.tsx b/apps/web/src/components/artifacts/components/CopyText.tsx
@@ -46,7 +46,7 @@ export function CopyText(props: CopyTextProps) {
           }
         }}
       >
-        <Copy className="w-5 h-5 text-gray-600" />
+        <Copy className="w-5 h-5 text-gray-600 dark:text-gray-300" />
       </TooltipIconButton>
     </motion.div>
   );

diff --git a/apps/web/src/components/artifacts/header/artifact-title.tsx b/apps/web/src/components/artifacts/header/artifact-title.tsx
@@ -9,7 +9,7 @@ interface ArtifactTitleProps {
 export function ArtifactTitle(props: ArtifactTitleProps) {
   return (
     <div className="pl-[6px] pt-3 flex flex-col items-start justify-start ml-[6px] gap-1 max-w-1/2">
-      <h1 className="text-xl font-medium text-gray-600 line-clamp-1">
+      <h1 className="text-xl font-medium text-gray-600 line-clamp-1 dark:text-gray-300">
         {props.title}
       </h1>
       <span className="mt-auto">

diff --git a/apps/web/src/components/artifacts/header/index.tsx b/apps/web/src/components/artifacts/header/index.tsx
@@ -31,7 +31,7 @@ export function ArtifactHeader(props: ArtifactHeaderProps) {
             delayDuration={400}
             onClick={() => props.setChatCollapsed(false)}
           >
-            <PanelRightClose className="text-gray-600" />
+            <PanelRightClose className="text-gray-600 dark:text-gray-300" />
           </TooltipIconButton>
         )}
         <ArtifactTitle

diff --git a/apps/web/src/components/artifacts/header/navigate-artifact-history.tsx b/apps/web/src/components/artifacts/header/navigate-artifact-history.tsx
@@ -30,7 +30,7 @@ export function NavigateArtifactHistory(props: NavigateArtifactHistoryProps) {
       >
         <Forward
           aria-disabled={props.isBackwardsDisabled}
-          className="w-6 h-6 text-gray-600 scale-x-[-1]"
+          className="w-6 h-6 text-gray-600 scale-x-[-1] dark:text-gray-300"
         />
       </TooltipIconButton>
       <TooltipIconButton
@@ -48,7 +48,7 @@ export function NavigateArtifactHistory(props: NavigateArtifactHistoryProps) {
       >
         <Forward
           aria-disabled={props.isForwardDisabled}
-          className="w-6 h-6 text-gray-600"
+          className="w-6 h-6 text-gray-600 dark:text-gray-300"
         />
       </TooltipIconButton>
     </div>

diff --git a/apps/web/src/components/assistant-ui/attachment.tsx b/apps/web/src/components/assistant-ui/attachment.tsx
@@ -205,7 +205,7 @@ export const ComposerAddAttachment: FC<{ className?: string }> = ({
         tooltip="Add Attachment"
         variant="ghost"
       >
-        <PaperclipIcon />
+        <PaperclipIcon className="dark:hover:text-gray-600" />
       </TooltipIconButton>
     </ComposerPrimitive.AddAttachment>
   );

diff --git a/apps/web/src/components/canvas/canvas.tsx b/apps/web/src/components/canvas/canvas.tsx
@@ -146,7 +146,7 @@ export function CanvasComponent() {
           defaultSize={25}
           minSize={15}
           maxSize={50}
-          className="transition-all duration-700 h-screen mr-auto bg-gray-50/70 shadow-inner-right"
+          className="transition-all duration-700 h-screen mr-auto bg-gray-50/70 dark:bg-gray-950 shadow-inner-right"
           id="chat-panel-main"
           order={1}
         >

diff --git a/apps/web/src/components/chat-interface/composer-actions-popout.tsx b/apps/web/src/components/chat-interface/composer-actions-popout.tsx
@@ -83,26 +83,26 @@ export function ComposerActionsPopOut(props: ComposerActionsPopOutProps) {
       }}
     >
       <motion.div
-        className="rounded-full flex items-center h-8 justify-start px-2 py-5 bg-blue-50 overflow-hidden"
+        className="rounded-full flex items-center h-8 justify-start px-2 py-5 bg-blue-50 overflow-hidden dark:text-gray-700"
         variants={containerVariants}
         animate={isExpanded ? "expanded" : "collapsed"}
         initial="collapsed"
       >
         <div className="flex items-center gap-2">
           <CirclePlus
             className={cn(
-              "size-6 flex-shrink-0",
-              isExpanded && "opacity-60 transition-all ease-in-out"
+              "size-6 flex-shrink-0 dark:text-gray-700",
+              isExpanded && "opacity-60 transition-all ease-in-out "
             )}
           />
           {searchEnabled && (
             <TooltipIconButton
               tooltip="Web search"
               variant="ghost"
-              className="size-7 flex-shrink-0 bg-blue-100 hover:bg-blue-100"
+              className="size-7 flex-shrink-0 bg-blue-100 hover:bg-blue-100 "
               onClick={() => setSearchEnabled((p) => !p)}
             >
-              <Globe />
+              <Globe className="dark:hover:text-gray-600" />
             </TooltipIconButton>
           )}
           {!isDefaultSelected && (
@@ -136,7 +136,7 @@ export function ComposerActionsPopOut(props: ComposerActionsPopOutProps) {
                   className="size-7 flex-shrink-0 hover:bg-blue-100 transition-colors ease-in-out"
                   onClick={() => setSearchEnabled((p) => !p)}
                 >
-                  <Globe />
+                  <Globe className="dark:hover:text-gray-600" />
                 </TooltipIconButton>
               )}
               {isDefaultSelected && (

diff --git a/apps/web/src/components/chat-interface/composer.tsx b/apps/web/src/components/chat-interface/composer.tsx
@@ -74,7 +74,7 @@ export const Composer: FC<ComposerProps> = (props: ComposerProps) => {
 
   return (
     <DragAndDropWrapper>
-      <ComposerPrimitive.Root className="focus-within:border-aui-ring/20 flex flex-col w-full min-h-[64px] flex-wrap items-center justify-center border px-2.5 shadow-sm transition-colors ease-in bg-white rounded-2xl">
+      <ComposerPrimitive.Root className="focus-within:border-aui-ring/20 flex flex-col w-full min-h-[64px] flex-wrap items-center justify-center border px-2.5 shadow-sm transition-colors ease-in bg-white dark:bg-zinc-900 rounded-2xl">
         <div className="flex flex-wrap gap-2 items-start mr-auto">
           <ComposerAttachments />
         </div>

diff --git a/apps/web/src/components/chat-interface/model-selector/index.tsx b/apps/web/src/components/chat-interface/model-selector/index.tsx
@@ -99,13 +99,13 @@ function CommandModelItem({
         />
       ) : (
         <button
-          className="ml-auto flex-shrink-0 flex size-6 items-center justify-center focus:outline-none focus:ring-0"
+          className="ml-auto flex-shrink-0 flex size-6 items-center justify-center focus:outline-none focus:ring-0 "
           onClick={(e) => {
             e.stopPropagation();
             setOpenConfigModelId(model.name);
           }}
         >
-          <GearIcon className="size-4" />
+          <GearIcon className="size-4 " />
         </button>
       )}
     </CommandItem>
@@ -223,7 +223,7 @@ export default function ModelSelector({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
-        className="min-w-[180px] w-[250px] bg-transparent shadow-none focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600 h-9 px-3 py-2 text-sm focus:ring-1 focus:ring-ring"
+        className="min-w-[180px] w-[250px] bg-transparent shadow-none focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600 dark:text-gray-300 hover:dark:text-gray-600 h-9 px-3 py-2 text-sm focus:ring-1 focus:ring-ring"
         asChild
       >
         <div className="flex items-center pr-2 truncate">
@@ -232,7 +232,7 @@ export default function ModelSelector({
             src={LLMIcon}
             width={14}
             height={14}
-            className="mr-2"
+            className="mr-2 "
           />
           <span className="flex flex-row items-center justify-start gap-2">
             {selectedModelLabel}

diff --git a/apps/web/src/components/chat-interface/thread-history.tsx b/apps/web/src/components/chat-interface/thread-history.tsx
@@ -254,7 +254,7 @@ export function ThreadHistoryComponent(props: ThreadHistoryProps) {
         aria-describedby={undefined}
       >
         <SheetTitle>
-          <TighterText className="px-2 text-lg text-gray-600">
+          <TighterText className="px-2 text-lg text-gray-600 dark:text-gray-300">
             Chat History
           </TighterText>
         </SheetTitle>

diff --git a/apps/web/src/components/chat-interface/thread.tsx b/apps/web/src/components/chat-interface/thread.tsx
@@ -17,6 +17,7 @@ import { ThreadWelcome } from "./welcome";
 import { useUserContext } from "@/contexts/UserContext";
 import { useThreadContext } from "@/contexts/ThreadProvider";
 import { useAssistantContext } from "@/contexts/AssistantContext";
+import { ModeToggle } from "../ui/toggle-theme";
 
 const ThreadScrollToBottom: FC = () => {
   return (
@@ -93,11 +94,13 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
   return (
     <ThreadPrimitive.Root className="flex flex-col h-full w-full">
       <div className="pr-3 pl-6 pt-3 pb-2 flex flex-row gap-4 items-center justify-between">
-        <div className="flex items-center justify-start gap-2 text-gray-600">
+        <div className="flex items-center justify-start gap-2 text-gray-600 dark:text-gray-300">
           <ThreadHistory
             switchSelectedThreadCallback={switchSelectedThreadCallback}
           />
-          <TighterText className="text-xl">Open Canvas</TighterText>
+          <TighterText className="text-xl dark:text-gray-300">
+            Open Canvas
+          </TighterText>
           {!hasChatStarted && (
             <ModelSelector
               modelName={modelName}
@@ -108,32 +111,35 @@ export const Thread: FC<ThreadProps> = (props: ThreadProps) => {
             />
           )}
         </div>
-        {hasChatStarted ? (
-          <div className="flex flex-row flex-1 gap-2 items-center justify-end">
-            <TooltipIconButton
-              tooltip="Collapse Chat"
-              variant="ghost"
-              className="w-8 h-8"
-              delayDuration={400}
-              onClick={() => props.setChatCollapsed(true)}
-            >
-              <PanelRightOpen className="text-gray-600" />
-            </TooltipIconButton>
-            <TooltipIconButton
-              tooltip="New chat"
-              variant="ghost"
-              className="w-8 h-8"
-              delayDuration={400}
-              onClick={handleNewSession}
-            >
-              <SquarePen className="text-gray-600" />
-            </TooltipIconButton>
-          </div>
-        ) : (
-          <div className="flex flex-row gap-2 items-center">
-            <ReflectionsDialog selectedAssistant={selectedAssistant} />
-          </div>
-        )}
+        <div className="flex items-center mx-3">
+          <ModeToggle />
+          {hasChatStarted ? (
+            <div className="flex flex-row flex-1 gap-2 items-center justify-end">
+              <TooltipIconButton
+                tooltip="Collapse Chat"
+                variant="ghost"
+                className="w-8 h-8"
+                delayDuration={400}
+                onClick={() => props.setChatCollapsed(true)}
+              >
+                <PanelRightOpen className="text-gray-600 dark:text-gray-300" />
+              </TooltipIconButton>
+              <TooltipIconButton
+                tooltip="New chat"
+                variant="ghost"
+                className="w-8 h-8"
+                delayDuration={400}
+                onClick={handleNewSession}
+              >
+                <SquarePen className="text-gray-600 dark:text-gray-300" />
+              </TooltipIconButton>
+            </div>
+          ) : (
+            <div className="flex flex-row gap-2 items-center">
+              <ReflectionsDialog selectedAssistant={selectedAssistant} />
+            </div>
+          )}
+        </div>
       </div>
       <ThreadPrimitive.Viewport className="flex-1 overflow-y-auto scroll-smooth bg-inherit px-4 pt-8">
         {!hasChatStarted && (