Add dark mode support and code block styling

README.md

@@ -7,10 +7,19 @@ This is a full-stack project I made using Next.js. This project is a complete wo
 Specifically, my own library:
 - [FreeGPT.js](https://freegpt.js.org/) : the stable free library for ChatGPT
 
+## Features
+- Free, unlimited messages & Chats
+- Markdown rendering of links and headings
+- A good feel
+- **(NEW)** Code Blocks Styling - just design :P
+- **(NEW)** Dark Mode - because why not!
+
 Here are some screenshots too (not latest :P):
-![Empty Chat](chat.png)
+![Empty Chat](empty.png)
 ![A Message...](msg.png)
-![Chat](chat2.png)
+![Chat with Codeblocks](chat.png)
+![Chat with Codeblocks in Dark Mode](darkchat.png)
+![Dark Mode](dark.png)
 
 Have a try and a star. You can use my ChatGPT UI but make sure to thank me!
 

src/app/components/Chat.jsx

@@ -1,4 +1,4 @@
-"use client";
+  "use client";
 
 // Images
 import user from "/public/img/user.png";
@@ -52,15 +52,15 @@ export const Chat = () => {
     <>
       <NavBar handleClear={handleClear} />
 
-      <main className="p-2 px-4">
+      <main className="p-2 px-4 dark:text-[#ececec] dark:bg-[#212121]">
         {messages.length === 0 ? (
           <div className="no-scrollbar mt-16 pb-12 overflow-hidden ">
             <div className="flex flex-row justify-center">
               <Image
                 src={gpt}
                 alt="ChatGPT"
                 width={50}
-                className="rounded-full p-1 text-white bg-black border shadow-md shadow-white inline-flex invert"
+                className="rounded-full p-1 text-[#0d0d0d] bg-black border shadow-sm shadow-white inline-flex invert"
                 height={50}
               />
             </div>
@@ -97,17 +97,17 @@ export const Chat = () => {
                   height={25}
                 />
               )}
-              <div className="px-2 font-semibold inline-flex text-[#0d0d0d]">
+              <div className="px-2 font-semibold inline-flex text-[#0d0d0d] dark:text-gray-200">
                 {msg.isUser ? "You" : "FreeGPT"}
               </div>
               <div className="flex px-[34px]">
                 {msg.isUser ? (
-                  <p className="max-w-xl md:max-w-full text-[#0d0d0d]">
+                  <p className="max-w-xl md:max-w-full text-[#0d0d0d] dark:text-gray-100">
                     {msg.response}
                 </p>
                 ) : (
                   <div
-                  className="max-w-xl md:max-w-full text-[#0d0d0d] markdown"
+                  className="max-w-xl md:max-w-full text-[#0d0d0d] markdown dark:text-gray-100"
                   dangerouslySetInnerHTML={{ __html: msg.response }}
                 ></div>
                 )}                
@@ -116,11 +116,11 @@ export const Chat = () => {
           ))
         )}
         <div className="mt-28 bottom-0 sticky w-full bg-transparent p-0 m-0">
-          <div className="px-0 py-2 items-center text-center text-[#676767] bg-white text-xs">
+          <div className="px-0 py-2 items-center text-center text-[#676767] bg-white text-xs dark:bg-[#212121] dark:text-[#b4b4b4]">
             <form onSubmit={handleSubmit}>
               <textarea
                 rows="1"
-                className="bg-white border-[#9b9b9b] border text-base w-full focus:outline-none p-4 rounded-lg"
+                className="bg-white border-[#9b9b9b] border text-base w-full focus:outline-none p-4 rounded-lg dark:bg-[#212121] dark:border-[#9b9b9b]"
                 placeholder="Message GPT, enter to send"
                 value={newMessage}
                 onChange={(e) => setNewMessage(e.target.value)}
@@ -134,7 +134,7 @@ export const Chat = () => {
             <p>
               Enter or click to{" "}
               <span
-                className="text-blue-700 cursor-pointer text-sm"
+                className="text-blue-700 cursor-pointer text-sm dark:text-blue-400"
                 onClick={handleSubmit}
               >
                 Send Message

src/app/components/NavBar.jsx

@@ -4,22 +4,28 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
 
 export const NavBar = ({handleClear}) => {
   return (
-    <header className="m-0 p-2 border-b border-b-[#00000026] bg-white flex justify-between">
-      <a href="https://github.com/ashishagarwal2023/chatgpt-clone" target="_blank">
-        <div className="left p-1 hover:bg-gray-100 cursor-pointer">
-          <FontAwesomeIcon icon={faGithub} className="w-5 text-[#0d0d0d]" />
+    <header className="m-0 p-2 border-b border-b-[#00000026] dark:border-b-[#ffffff26] bg-white flex justify-between dark:bg-[#212121]">
+      <a
+        href="https://github.com/ashishagarwal2023/chatgpt-clone"
+        target="_blank"
+      >
+        <div className="left p-1 hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-700 transition duration-100 rounded-full">
+          <FontAwesomeIcon
+            icon={faGithub}
+            className="w-5 text-[#0d0d0d] dark:text-white"
+          />
         </div>
       </a>
       <div className="center p-1">
-        <h3 className="text-md">
-          <span className="font-semibold">FreeGPT</span> 3.5
+        <h3 className="text-md dark:text-gray-100">
+          <span className="font-semibold dark:text-white">FreeGPT</span> 3.5
         </h3>
       </div>
       <div
-        className="right p-1 hover:bg-gray-100 cursor-pointer"
+        className="right p-1 hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-700 transition duration-100 rounded-full"
         onClick={handleClear}
       >
-        <FontAwesomeIcon icon={faPenToSquare} className="w-5 text-[#0d0d0d]" />
+        <FontAwesomeIcon icon={faPenToSquare} className="w-5 text-[#0d0d0d] dark:text-white" />
       </div>
     </header>
   );

src/app/globals.css

@@ -18,4 +18,36 @@ img, svg{
     color: #0070f3;
     text-decoration: none;
     border-bottom:1px solid #0070f3;
+}
+
+.markdown p{
+    margin-top: 7px;
+    margin-bottom: 7px;
+}
+
+.markdown pre{
+    background: #e7e7e7;
+    padding: 15px;
+    border-radius: 5px;
+    margin-top: 15px;
+    margin-bottom: 15px;   
+}
+.markdown code{
+    background: #e7e7e7;
+    padding: 5px;
+    border-radius: 5px;
+}
+@media(prefers-color-scheme: dark){
+    .markdown code {
+        background: #333333;
+        padding: 5px;
+        border-radius: 5px;
+    }
+    .markdown pre {
+        background: #333333;
+        padding: 15px;
+        border-radius: 5px;
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
 }

src/app/layout.js

@@ -10,11 +10,11 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <html lang="en"> {/* className="dark" */}
       <head>
         <script src="https://cdn.jsdelivr.net/gh/ashishagarwal2023/freegptjs/src/freegpt.min.js"></script>
       </head>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className + " dark:bg-[#212121]"}>{children}</body>
     </html>
   );
 }

tailwind.config.js

@@ -1,14 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // darkMode: "class",
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {
-
-    },
+    extend: {},
   },
   plugins: [],
 };