✨ implement dark mode (#120)

automatically check for system mode manual control via animated thingy Co-authored-by: Vineeth Voruganti <[email protected]>
plastic-labs · Nov 29, 2023 · 0035fed · 0035fed
1 parent 5ebe31c
commit 0035fed
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 28 deletions.
diff --git a/www/app/page.tsx b/www/app/page.tsx
@@ -2,6 +2,7 @@
 import Image from "next/image";
 
 import banner from "@/public/bloom2x1.svg";
+import darkBanner from "@/public/bloom2x1dark.svg";
 import MessageBox from "@/components/messagebox";
 import Thoughts from "@/components/thoughts";
 import Sidebar from "@/components/sidebar";
@@ -16,6 +17,7 @@ import {
 
 import Link from "next/link";
 import MarkdownWrapper from "@/components/markdownWrapper";
+import { DarkModeSwitch } from "react-toggle-dark-mode";
 import { Message, Conversation, API } from "@/utils/api";
 
 const URL = process.env.NEXT_PUBLIC_API_URL;
@@ -82,6 +84,13 @@ export default function Home() {
     };
   }, []);
 
+  const [isDarkMode, setIsDarkMode] = useState(
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+  const toggleDarkMode = (checked: boolean) => {
+    setIsDarkMode(checked);
+  };
+
   async function chat() {
     const textbox = input.current!;
     // process message to have double newline for markdown
@@ -148,7 +157,10 @@ export default function Home() {
   }
 
   return (
-    <main className="flex h-[100dvh] w-screen flex-col pb-[env(keyboard-inset-height)] text-sm lg:text-base overflow-hidden relative">
+    <main
+      className={`flex h-[100dvh] w-screen flex-col pb-[env(keyboard-inset-height)] text-sm lg:text-base overflow-hidden relative ${isDarkMode ? "dark" : ""
+        }`}
+    >
       <Sidebar
         conversations={conversations}
         currentConversation={currentConversation}
@@ -158,20 +170,28 @@ export default function Home() {
         isSidebarOpen={isSidebarOpen}
         setIsSidebarOpen={setIsSidebarOpen}
       />
-      <div className="flex flex-col w-full h-[100dvh] lg:pl-60 xl:pl-72">
-        <nav className="flex justify-between items-center p-4 border-b border-gray-300">
+      <div className="flex flex-col w-full h-[100dvh] lg:pl-60 xl:pl-72 dark:bg-gray-900">
+        <nav className="flex justify-between items-center p-4 border-b border-gray-300 dark:border-gray-700">
           <FaBars
-            className="inline lg:hidden"
+            className="inline lg:hidden dark:text-white"
             onClick={() => setIsSidebarOpen(!isSidebarOpen)}
           />
-          <Image src={banner} alt="banner" className="h-10  w-auto" />
-          <button
-            className="bg-neon-green rounded-lg px-4 py-2 flex justify-center items-center gap-2"
-            onClick={() => setIsThoughtsOpen(true)}
-          >
-            See Thoughts
-            <FaLightbulb className="inline" />
-          </button>
+
+          <Image
+            src={isDarkMode ? darkBanner : banner}
+            alt="banner"
+            className="h-10  w-auto"
+          />
+          <div className="flex justify-between items-center gap-4">
+            <DarkModeSwitch checked={isDarkMode} onChange={toggleDarkMode} />
+            <button
+              className="bg-neon-green rounded-lg px-4 py-2 flex justify-center items-center gap-2"
+              onClick={() => setIsThoughtsOpen(true)}
+            >
+              See Thoughts
+              <FaLightbulb className="inline" />
+            </button>
+          </div>
         </nav>
         {!api?.session && (
           <section className="bg-neon-green text-black text-center py-4">
@@ -187,7 +207,7 @@ export default function Home() {
           </section>
         )}
         <section
-          className="flex flex-col flex-1 overflow-y-auto lg:px-5"
+          className="flex flex-col flex-1 overflow-y-auto lg:px-5 dark:text-white"
           ref={messageContainerRef}
         >
           {messages.map((message, i) => (
@@ -210,8 +230,7 @@ export default function Home() {
           <textarea
             ref={input}
             placeholder="Type a message..."
-            className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 text-gray-400 rounded-2xl border-2 resize-none ${canSend ? " border-green-200" : "border-red-200 opacity-50"
-              }`}
+            className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 dark:bg-gray-800 text-gray-400 rounded-2xl border-2 resize-none ${canSend ? " border-green-200" : "border-red-200 opacity-50"}`}
             disabled={!canSend}
             rows={1}
             onKeyDown={(e) => {

diff --git a/www/components/messagebox.tsx b/www/components/messagebox.tsx
@@ -13,7 +13,7 @@ export default function MessageBox({
     <article
       className={
         "flex p-5 lg:p-8 gap-2 lg:gap-5 lg:rounded-2xl " +
-        (isUser ? "bg-gray-100" : "")
+        (isUser ? "bg-gray-100 dark:bg-gray-800" : "")
       }
     >
       <Image

diff --git a/www/components/sidebar.tsx b/www/components/sidebar.tsx
@@ -111,35 +111,37 @@ export default function Sidebar({
 
   return (
     <div
-      className={`fixed lg:absolute z-20 inset-0 flex-none h-full w-full lg:h-auto lg:overflow-visible lg:pt-0 lg:w-60 xl:w-72 lg:block lg:shadow-lg border-r border-gray-300 ${isSidebarOpen ? "" : "hidden"
+      className={`fixed lg:static z-20 inset-0 flex-none h-full w-full lg:absolute lg:h-auto lg:overflow-visible lg:pt-0 lg:w-60 xl:w-72 lg:block lg:shadow-lg border-r border-gray-300 dark:border-gray-700 ${isSidebarOpen ? "" : "hidden"
         }`}
     >
       <div
-        className={`h-full scrollbar-trigger overflow-hidden bg-white sm:w-3/5 w-4/5 lg:w-full flex flex-col ${isSidebarOpen ? "fixed lg:static" : "sticky"
+        className={`h-full scrollbar-trigger overflow-hidden bg-white dark:bg-gray-950 dark:text-white sm:w-3/5 w-4/5 lg:w-full flex flex-col ${isSidebarOpen ? "fixed lg:static" : "sticky"
           } top-0 left-0`}
       >
         {/* Section 1: Top buttons */}
-        <div className="flex justify-between items-center p-4 gap-2 border-b border-gray-300">
+        <div className="flex justify-between items-center p-4 gap-2 border-b border-gray-300 dark:border-gray-700">
           <button
-            className="bg-neon-green rounded-lg px-4 py-2 w-full lg:w-full h-10"
+            className="bg-neon-green text-black rounded-lg px-4 py-2 w-full lg:w-full h-10"
             onClick={addChat}
           >
             New Chat
           </button>
           <button
-            className="lg:hidden bg-neon-green rounded-lg px-4 py-2 h-10"
+            className="lg:hidden bg-neon-green text-black rounded-lg px-4 py-2 h-10"
             onClick={() => setIsSidebarOpen(false)}
           >
             <GrClose />
           </button>
         </div>
 
         {/* Section 2: Scrollable items */}
-        <div className="flex flex-col flex-1 overflow-y-auto divide-y divide-gray-300">
+        <div className="flex flex-col flex-1 overflow-y-auto divide-y divide-gray-300 dark:divide-gray-700">
           {conversations.map((cur, i) => (
             <div
               key={i}
-              className={`flex justify-between items-center p-4 cursor-pointer hover:bg-gray-200 ${currentConversation === cur ? "bg-gray-200" : ""
+              className={`flex justify-between items-center p-4 cursor-pointer hover:bg-gray-200 hover:dark:bg-gray-800  ${currentConversation === cur
+                ? "bg-gray-200 dark:bg-gray-800"
+                : ""
                 }`}
               onClick={() => setCurrentConversation(cur)}
             >
@@ -167,11 +169,11 @@ export default function Sidebar({
         </div>
 
         {/* Section 3: Authentication information */}
-        <div className="border-t border-gray-300 p-4 w-full">
+        <div className="border-t border-gray-300 dark:border-gray-700 p-4 w-full">
           {/* Replace this with your authentication information */}
           {api?.session ? (
             <button
-              className="bg-neon-green rounded-lg px-4 py-2 w-full"
+              className="bg-neon-green text-black rounded-lg px-4 py-2 w-full"
               onClick={async () => {
                 await signOut();
                 location.reload();
@@ -180,17 +182,18 @@ export default function Sidebar({
               Sign Out
             </button>
           ) : (
+
             <Link
               href={"/auth"}
             >
               <button
-                className="bg-neon-green rounded-lg px-4 py-2 w-full">
+                className="bg-neon-green text-black rounded-lg px-4 py-2 w-full">
                 Sign In
               </button>
             </Link>
           )}
         </div>
-      </div>
-    </div>
+      </div >
+    </div >
   );
 }
diff --git a/www/package.json b/www/package.json
@@ -26,6 +26,7 @@
     "react-icons": "^4.10.1",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
+    "react-toggle-dark-mode": "^1.1.1",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",
     "sharp": "^0.32.5",

diff --git a/www/public/bloom2x1dark.svg b/www/public/bloom2x1dark.svg
diff --git a/www/tailwind.config.ts b/www/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
+  darkMode: "class",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",

diff --git a/www/yarn.lock b/www/yarn.lock
@@ -180,6 +180,85 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@react-spring/animated@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.3.tgz#4211b1a6d48da0ff474a125e93c0f460ff816e0f"
+  integrity sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==
+  dependencies:
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/core@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095"
+  integrity sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/konva@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.7.3.tgz#16bd29dd4860a99e960a72987c8bcfc828b22119"
+  integrity sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/native@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.7.3.tgz#ee38d7c23482cfb4916c9b3c021de2995a4f553a"
+  integrity sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/shared@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53"
+  integrity sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==
+  dependencies:
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/three@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.7.3.tgz#4358a0c4640efe2972c4f7d0f7cd4efe927471c1"
+  integrity sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/types@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b"
+  integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==
+
+"@react-spring/web@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.3.tgz#d9f4e17fec259f1d65495a19502ada4f5b57fa3d"
+  integrity sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
+"@react-spring/zdog@~9.7.3":
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.7.3.tgz#8ccc7316f6d3460ed244d9e3f60de9b4c4a848ac"
+  integrity sha512-L+yK/1PvNi9n8cldiJ309k4LdxcPkeWE0W18l1zrP1IBIyd5NB5EPA8DMsGr9gtNnnIujtEzZk+4JIOjT8u/tw==
+  dependencies:
+    "@react-spring/animated" "~9.7.3"
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/shared" "~9.7.3"
+    "@react-spring/types" "~9.7.3"
+
 "@rollup/[email protected]":
   version "24.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz#fb7cf4a6029f07ec42b25daa535c75b05a43f75c"
@@ -3523,6 +3602,18 @@ react-markdown@^8.0.7:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+react-spring@^9.0.0-rc.3:
+  version "9.7.3"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.7.3.tgz#3211dea4c4d7c5b541260af5100261b87becb5d5"
+  integrity sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==
+  dependencies:
+    "@react-spring/core" "~9.7.3"
+    "@react-spring/konva" "~9.7.3"
+    "@react-spring/native" "~9.7.3"
+    "@react-spring/three" "~9.7.3"
+    "@react-spring/web" "~9.7.3"
+    "@react-spring/zdog" "~9.7.3"
+
 react-syntax-highlighter@^15.5.0:
   version "15.5.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
@@ -3534,6 +3625,13 @@ react-syntax-highlighter@^15.5.0:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
+react-toggle-dark-mode@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-toggle-dark-mode/-/react-toggle-dark-mode-1.1.1.tgz#ca738d4c7cd613f5091fe08e5c174d091ef5d2f3"
+  integrity sha512-25dH8tvQucpW9c024WQ6gXLxJ6Irc5iTFgAIKuwCUUfbbahyVd1OKEq5TqExzoPHoORIXlQKYXV/+fuyclr6FQ==
+  dependencies:
+    react-spring "^9.0.0-rc.3"
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"