light/dark code highlight

components/Chat/Chat.tsx

@@ -9,11 +9,12 @@ interface Props {
   model: OpenAIModel;
   messages: Message[];
   loading: boolean;
+  lightMode: "light" | "dark";
   onSend: (message: Message) => void;
   onSelect: (model: OpenAIModel) => void;
 }
 
-export const Chat: FC<Props> = ({ model, messages, loading, onSend, onSelect }) => {
+export const Chat: FC<Props> = ({ model, messages, loading, lightMode, onSend, onSelect }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
@@ -44,7 +45,10 @@ export const Chat: FC<Props> = ({ model, messages, loading, onSend, onSelect })
 
             {messages.map((message, index) => (
               <div key={index}>
-                <ChatMessage message={message} />
+                <ChatMessage
+                  message={message}
+                  lightMode={lightMode}
+                />
               </div>
             ))}
             {loading && <ChatLoader />}

components/Chat/ChatMessage.tsx

@@ -5,9 +5,10 @@ import { CodeBlock } from "../Markdown/CodeBlock";
 
 interface Props {
   message: Message;
+  lightMode: "light" | "dark";
 }
 
-export const ChatMessage: FC<Props> = ({ message }) => {
+export const ChatMessage: FC<Props> = ({ message, lightMode }) => {
   return (
     <div
       className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
@@ -26,6 +27,7 @@ export const ChatMessage: FC<Props> = ({ message }) => {
                     key={Math.random()}
                     language={match[1]}
                     value={String(children).replace(/\n$/, "")}
+                    lightMode={lightMode}
                     {...props}
                   />
                 ) : (

components/Markdown/CodeBlock.tsx

@@ -1,13 +1,14 @@
 import { FC, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 interface Props {
   language: string;
   value: string;
+  lightMode: "light" | "dark";
 }
 
-export const CodeBlock: FC<Props> = ({ language, value }) => {
+export const CodeBlock: FC<Props> = ({ language, value, lightMode }) => {
   const [buttonText, setButtonText] = useState("Copy");
 
   const copyToClipboard = () => {
@@ -21,16 +22,16 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
   };
 
   return (
-    <div className="relative">
+    <div className="relative text-[16px]">
       <SyntaxHighlighter
         language={language}
-        style={tomorrow}
+        style={lightMode === "light" ? oneLight : oneDark}
       >
         {value}
       </SyntaxHighlighter>
 
       <button
-        className="absolute top-2 right-2 text-white bg-blue-600 py-1 px-2 rounded focus:outline-none hover:bg-blue-700"
+        className="absolute top-2 right-2 text-white bg-blue-600 py-1 px-2 rounded focus:outline-none hover:bg-blue-700 text-sm"
         onClick={copyToClipboard}
       >
         {buttonText}

pages/index.tsx

@@ -231,6 +231,7 @@ export default function Home() {
               model={model}
               messages={selectedConversation.messages}
               loading={loading}
+              lightMode={lightMode}
               onSend={handleSend}
               onSelect={setModel}
             />