bitcoinsearch · Shashank8521 · Feb 15, 2026
diff --git a/src/components/chat/ChatScreen.tsx b/src/components/chat/ChatScreen.tsx
@@ -13,6 +13,8 @@ import {
   IconButton,
   Text,
   Textarea,
+  useColorMode,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -212,6 +214,11 @@ const ChatScreen = ({
     setUrlParamsQuery();
   }, [router]);
 
+  const chatBg = useColorModeValue("gray.100", "gray.600")
+  const inputBg = useColorModeValue("white", "gray.700")
+  const borderColor = useColorModeValue("gray.300", "gray.600");
+  const textColor = useColorModeValue("gray.800", "white");
+
   return (
     <>
       <Box position="relative" overflow="hidden" w="full" h="full">
@@ -241,7 +248,7 @@ const ChatScreen = ({
                   w="full"
                   rounded="full"
                   overflow="hidden"
-                  bgColor="blackAlpha.400"
+                  bgColor={chatBg}
                 >
                   <Image
                     src={author.imgURL}
@@ -272,7 +279,7 @@ const ChatScreen = ({
               <Box
                 ref={messageListRef}
                 w="full"
-                bgColor="gray.900"
+                bgColor={chatBg}
                 borderRadius="md"
                 flex="1 1 0%"
                 overflow="auto"
@@ -336,7 +343,9 @@ const ChatScreen = ({
                       disabled={loading || streamLoading}
                       value={userInput}
                       onChange={handleInputChange}
-                      bg="gray.700"
+                      bg={inputBg}
+                      borderColor={borderColor}
+                      color={textColor}
                       flexGrow={1}
                       flexShrink={1}
                       onKeyDown={handleEnter}

diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -16,6 +16,7 @@ import styles from "./home.module.css";
 import InputTextArea from "./InputTextArea";
 import PromptBubble from "./PromptBubble";
 import { InView } from "react-intersection-observer";
+import { useColorModeValue } from "@chakra-ui/react";
 
 type HomePageProps = {
   onPrompt: PromptAction;
@@ -35,6 +36,15 @@ const HomePage = ({ onPrompt }: HomePageProps) => {
       setCurrentSegment(id);
     }
   };
+const pageBg = useColorModeValue("gray.50", "gray.900");
+
+const chatGradient = useColorModeValue(
+  "linear(to-b, gray.100, gray.50)",
+  "linear(to-b, gray.900, gray.800)"
+);
+const sideNavColor = useColorModeValue("gray.600", "gray.300");
+// const sideNavDivider = useColorModeValue("gray.400", "whiteAlpha.600");
+
 
   return (
     <>
@@ -52,7 +62,7 @@ const HomePage = ({ onPrompt }: HomePageProps) => {
             alignItems="center"
             fontSize="12px"
             fontWeight={500}
-            color="gray.300"
+            color={sideNavColor}
             backdropFilter="auto"
             backdropBlur="base"
             p={2}
@@ -62,17 +72,17 @@ const HomePage = ({ onPrompt }: HomePageProps) => {
             zIndex={1}
           >
             <InLink name="chat" currentSegment={currentSegment} />
-            <Box w="1px" rounded="sm" bgColor="whiteAlpha.600" h={4} />
+            <Box w="1px" rounded="sm" bgColor={sideNavColor} h={4} />
             <InLink name="authors" currentSegment={currentSegment} />
-            <Box w="1px" rounded="sm" bgColor="whiteAlpha.600" h={4} />
+            <Box w="1px" rounded="sm" bgColor={sideNavColor} h={4} />
             <InLink name="about" currentSegment={currentSegment} />
           </Flex>
         </Container>
       </Box>
       <Box
         className={styles.full_screen_section}
         ref={fullScreenContainer}
-        bgColor="brand.bg_base_purple"
+        bgColor={pageBg}
       >
         <InView
           threshold={0.5}
@@ -82,7 +92,7 @@ const HomePage = ({ onPrompt }: HomePageProps) => {
             <Box
               id="chat"
               pt={{ base: 4, md: 10 }}
-              bgGradient="linear(to-b, gray.900, brand.bg_base_purple)"
+              bgGradient={chatGradient}
               ref={ref}
             >
               <Container maxW="container.lg">
@@ -346,7 +356,7 @@ const InLink = ({
   return (
     <NextLink href={`#${name}`}>
       <Text
-        color={isActive ? "orange.200" : "gray.200"}
+        color={isActive ? "orange.200" : "gray.400"}
         transitionDuration="0.5s"
       >
         {name}

diff --git a/src/components/home/InputTextArea.tsx b/src/components/home/InputTextArea.tsx
@@ -1,6 +1,6 @@
 import { SendIcon } from '@/chakra/custom-chakra-icons';
 import { PromptAction } from '@/types';
-import { Flex, IconButton, Textarea } from '@chakra-ui/react';
+import { Flex, IconButton, Textarea, useColorMode, useColorModeValue } from '@chakra-ui/react';
 import { FormEvent, useRef, useState } from 'react';
 import { handleTextAreaChange } from '@/utils/text';
 import { isMobile } from 'react-device-detect';
@@ -25,6 +25,7 @@ const InputTextArea = ({ submitInput }: { submitInput: PromptAction }) => {
       }
     }
   };
+  const bg = useColorModeValue("gray.100", "gray.700");
 
   return (
     <form onSubmit={handleSubmit}>
@@ -38,7 +39,7 @@ const InputTextArea = ({ submitInput }: { submitInput: PromptAction }) => {
           resize='none'
           value={input}
           onChange={(e) => setInput(e.target.value)}
-          bg='gray.700'
+          bg={bg}
           flexGrow={1}
           flexShrink={1}
           onKeyDown={handleEnter}

diff --git a/src/components/home/PromptBubble.tsx b/src/components/home/PromptBubble.tsx
@@ -1,5 +1,5 @@
 import { PromptAction } from "@/types";
-import { Box, Text } from "@chakra-ui/react";
+import { Box, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
 import React from "react";
 
 type PromptBubbleProps = { text: string; author: string; onPrompt: PromptAction };
@@ -8,18 +8,23 @@ const PromptBubble = ({ text, author, onPrompt }: PromptBubbleProps) => {
   const handlePromptClick = (e: React.MouseEvent<HTMLDivElement>) => {
     onPrompt(text, author)
   }
+  const bg = useColorModeValue("gray.200", "gray.500")
+  const textColor = useColorModeValue("gray.800", "white")
+  const hoverBg = useColorModeValue("orange.200", "orange.300");
+  const activeBg = useColorModeValue("orange.300", "orange.400");
   return (
     <Box
       role="button"
       w="full"
-      bgColor={"gray.500"}
+      bgColor={bg}
+      color={textColor}
       placeItems="center"
       p={{base: "6px", md: "8px"}}
       rounded={{base: "md", md: "xl"}}
       onClick={handlePromptClick}
       cursor={"pointer"}
-      _hover={{ bgColor: "orange.200", color: "gray.700" }}
-      _active={{ bgColor: "orange.300", color: "gray.700" }}
+      _hover={{ bgColor: hoverBg}}
+      _active={{ bgColor: activeBg}}
     >
       <Text
         fontSize={{ base: "10px", md: "14px" }}

diff --git a/src/components/message/message.tsx b/src/components/message/message.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Button, Flex, Heading, Link, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Heading, Link, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
 import { BeatLoader } from "react-spinners";
 import styles from "./message.module.css";
 import { LinkShareIcon } from "@/chakra/custom-chakra-icons";
@@ -30,33 +30,34 @@ type MessageConfig = {
   };
 };
 
-const messageConfig: MessageConfig = {
+const getMessageConfig = (colorMode: string): MessageConfig => ({
   apiMessage: {
     color: null,
-    bg: "gray.600",
+    bg: colorMode === "dark" ? "gray.600" : "gray.300",
     headingColor: "orange.400",
   },
   authorMessage: {
     color: null,
-    bg: "gray.600",
+    bg: colorMode === "dark" ? "gray.600" : "gray.300",
     headingColor: "orange.400",
   },
   userMessage: {
     color: null,
-    bg: "gray.800",
+    bg: colorMode === "dark" ? "gray.800" : "white",
     headingColor: "purple.400",
   },
   errorMessage: {
     color: "red.200",
-    bg: "gray.600",
+    bg: colorMode === "dark" ? "gray.600" : "gray.300",
     headingColor: "red.500",
   },
   apiStream: {
     color: null,
-    bg: "gray.600",
+    bg: colorMode === "dark" ? "gray.600" : "gray.300",
     headingColor: "orange.400",
   },
-};
+});
+
 
 const MessageBox = ({
   content,
@@ -72,6 +73,9 @@ const MessageBox = ({
   handleFollowUpQuestion: (question: string) => void;
 }) => {
   const { message, type } = content;
+  const { colorMode } = useColorMode();
+  const messageConfig = getMessageConfig(colorMode);
+
 
   return (
     <Flex
@@ -168,16 +172,18 @@ const MessageContent = ({
   type,
   handleFollowUpQuestion,
 }: Message & { handleFollowUpQuestion: (question: string) => void }) => {
+  const adaptiveTextColor = useColorModeValue("gray.800", "white");
   if (!message?.trim()) return null;
   const { messageBody, messageLinks, messageQuestions, isErrorMessage } =
-    separateLinksFromApiMessage(message);
+  separateLinksFromApiMessage(message);
   const showCopyIcon = type === "apiMessage" && message.length;
 
   if (!messageBody?.trim()) return null;
 
+
   return (
     <>
-      <Text whiteSpace="pre-wrap" color={messageConfig[type].color || ""}>
+      <Text whiteSpace="pre-wrap" color={adaptiveTextColor}>
         <MarkdownWrapper text={messageBody.trim()} />
       </Text>
 

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -1,25 +1,29 @@
-import { Box, Divider, Flex, Text } from "@chakra-ui/react";
+import { Box, Divider, Flex, Text, Button, useColorMode, useColorModeValue } from "@chakra-ui/react";
 import Link from "next/link";
 import React from "react";
 
 const Navbar = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const bg = useColorModeValue("white", "gray.900");
+  const textColor = useColorModeValue("gray.800", "white");
   return (
     <Box
       as="nav"
       position={"fixed"}
       h={12}
       w="full"
       boxShadow="md"
-      bgColor="gray.900"
+      bgColor={bg}
       fontSize="14px"
       isolation="isolate"
       zIndex={1}
     >
       <Flex
         alignItems="center"
+        justifyContent={"space-between"}
         h="full"
         px={4}
-        bgColor="gray.900"
+        bgColor={bg}
         zIndex={1}
       >
         <Link href="/">
@@ -33,9 +37,12 @@ const Navbar = () => {
         <Box h="full" mx={4} py={2}>
           <Divider orientation="vertical" />
         </Box>
+        <Button onClick={toggleColorMode} size="sm" variant="outline">
+          {colorMode === "light" ? "Dark" : "Light"}
+        </Button>
       </Flex>
     </Box>
   );
 };
 
-export default Navbar;
+export default Navbar;