From 7f2568fd0802e609be72ad67ffd305673b53d2db Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Thu, 13 Apr 2023 11:22:40 +0800
Subject: [PATCH] feat: add dark mode switch in sidebar

---
 src/components/ConnectionSidebar.tsx       |  2 ++
 src/components/ConversationView/Header.tsx |  4 ++-
 src/components/DarkModeSwitch.tsx          | 29 ++++++++++++++++++++++
 src/components/EmptyView.tsx               |  4 ++-
 src/hooks/useDarkmode.ts                   | 17 +++++++++++++
 5 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/components/DarkModeSwitch.tsx
 create mode 100644 src/hooks/useDarkmode.ts

diff --git a/src/components/ConnectionSidebar.tsx b/src/components/ConnectionSidebar.tsx
index 8352a6a..8524088 100644
--- a/src/components/ConnectionSidebar.tsx
+++ b/src/components/ConnectionSidebar.tsx
@@ -9,6 +9,7 @@ import Tooltip from "./kit/Tooltip";
 import Icon from "./Icon";
 import EngineIcon from "./EngineIcon";
 import LocaleSwitch from "./LocaleSwitch";
+import DarkModeSwitch from "./DarkModeSwitch";
 import CreateConnectionModal from "./CreateConnectionModal";
 import SettingModal from "./SettingModal";
 import EditConversationTitleModal from "./EditConversationTitleModal";
@@ -202,6 +203,7 @@ const ConnectionSidebar = () => {
               </Tooltip>
             </div>
             <div className="w-full flex flex-col justify-end items-center">
+              <DarkModeSwitch />
               <LocaleSwitch />
               <Tooltip title={t("common.setting")} side="right">
                 <button
diff --git a/src/components/ConversationView/Header.tsx b/src/components/ConversationView/Header.tsx
index ebcf4d0..43ecd1f 100644
--- a/src/components/ConversationView/Header.tsx
+++ b/src/components/ConversationView/Header.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { useConversationStore, useLayoutStore } from "@/store";
+import useDarkMode from "@/hooks/useDarkmode";
 import Icon from "../Icon";
 import GitHubStarBadge from "../GitHubStarBadge";
 
@@ -11,6 +12,7 @@ const Header = (props: Props) => {
   const { className } = props;
   const layoutStore = useLayoutStore();
   const conversationStore = useConversationStore();
+  const isDarkMode = useDarkMode();
   const currentConversation = conversationStore.currentConversation;
   const title = currentConversation?.title || "SQL Chat";
 
@@ -41,7 +43,7 @@ const Header = (props: Props) => {
           className="flex flex-row justify-center items-center h-10 px-3 py-1 rounded-md whitespace-nowrap hover:bg-gray-100 dark:hover:bg-zinc-700"
           target="_blank"
         >
-          <img className="h-5 sm:h-6 w-auto" src="/craft-by-bytebase.webp" alt="" />
+          <img className="h-5 sm:h-6 w-auto" src={isDarkMode ? "/craft-by-bytebase-dark-mode.webp" : "/craft-by-bytebase.webp"} alt="" />
         </a>
       </div>
     </div>
diff --git a/src/components/DarkModeSwitch.tsx b/src/components/DarkModeSwitch.tsx
new file mode 100644
index 0000000..9064c28
--- /dev/null
+++ b/src/components/DarkModeSwitch.tsx
@@ -0,0 +1,29 @@
+import { useSettingStore } from "@/store";
+import useDarkMode from "@/hooks/useDarkmode";
+import Icon from "./Icon";
+
+const DarkModeSwitch = () => {
+  const settingStore = useSettingStore();
+  const isDarkMode = useDarkMode();
+
+  const switchDarkMode = () => {
+    if (isDarkMode) {
+      settingStore.setTheme("light");
+    } else {
+      settingStore.setTheme("dark");
+    }
+  };
+
+  const ModeIcon = isDarkMode ? Icon.IoMdMoon : Icon.IoMdSunny;
+
+  return (
+    <button
+      className="w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100 dark:hover:bg-zinc-700"
+      onClick={switchDarkMode}
+    >
+      <ModeIcon className="text-gray-600 dark:text-gray-300 w-6 h-auto" />
+    </button>
+  );
+};
+
+export default DarkModeSwitch;
diff --git a/src/components/EmptyView.tsx b/src/components/EmptyView.tsx
index 13aa65e..9078698 100644
--- a/src/components/EmptyView.tsx
+++ b/src/components/EmptyView.tsx
@@ -1,6 +1,7 @@
 import { useConversationStore, useConnectionStore, useMessageStore, useUserStore } from "@/store";
 import { CreatorRole } from "@/types";
 import { generateUUID } from "@/utils";
+import useDarkMode from "@/hooks/useDarkmode";
 import Icon from "./Icon";
 
 // examples are used to show some examples to the user.
@@ -17,6 +18,7 @@ const EmptyView = (props: Props) => {
   const conversationStore = useConversationStore();
   const userStore = useUserStore();
   const messageStore = useMessageStore();
+  const isDarkMode = useDarkMode();
 
   const handleExampleClick = async (content: string) => {
     let conversation = conversationStore.currentConversation;
@@ -44,7 +46,7 @@ const EmptyView = (props: Props) => {
   return (
     <div className={`${className || ""} w-full h-full flex flex-col justify-start items-center`}>
       <div className="w-96 max-w-full font-medium leading-loose mb-8">
-        <img src="/chat-logo-and-text.webp" alt="sql-chat-logo" />
+        <img src={isDarkMode ? "/chat-logo-and-text-dark-mode.webp" : "/chat-logo-and-text.webp"} alt="sql-chat-logo" />
       </div>
       <div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
         <div className="w-full flex flex-col justify-start items-center">
diff --git a/src/hooks/useDarkmode.ts b/src/hooks/useDarkmode.ts
new file mode 100644
index 0000000..d9f615a
--- /dev/null
+++ b/src/hooks/useDarkmode.ts
@@ -0,0 +1,17 @@
+import { useSettingStore } from "@/store";
+import { useEffect, useState } from "react";
+
+const useDarkMode = () => {
+  const settingStore = useSettingStore();
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+  }, [settingStore.setting.theme]);
+
+  return isDarkMode;
+};
+
+export default useDarkMode;