From fee8170792f5ccd8b86863e691bd578630ca44ea Mon Sep 17 00:00:00 2001
From: linhuizi <529246402@qq.com>
Date: Mon, 5 Feb 2024 12:47:01 +0800
Subject: [PATCH] fix(Navbar): update svg in dark mode

---
 apps/client/components/Navbar.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/client/components/Navbar.vue b/apps/client/components/Navbar.vue
index 7cbcc2e09..9250e3f42 100644
--- a/apps/client/components/Navbar.vue
+++ b/apps/client/components/Navbar.vue
@@ -32,9 +32,10 @@
         </ul>
       </div>
       <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0" @click="toggleDarkMode">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-          class="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round"
+        <svg v-if="isDarkMode" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 256 256">
+          <path fill="currentColor" d="M233.54 142.23a8 8 0 0 0-8-2a88.08 88.08 0 0 1-109.8-109.8a8 8 0 0 0-10-10a104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.09 103.09 0 0 0 62.52-20.88a104.84 104.84 0 0 0 37-52.91a8 8 0 0 0-1.98-7.98m-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104a106 106 0 0 0 14.92-1.06a89 89 0 0 1-26.02 31.4"/>
+        </svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round"
             d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
         </svg>
       </button>
@@ -48,18 +49,21 @@
 import { useMessage } from "naive-ui";
 import { navigateTo } from "nuxt/app";
 import { useRoute } from "vue-router";
-import { useDarkMode } from "~/composables/darkMode";
+import { Theme, useDarkMode } from "~/composables/darkMode";
 import MessageBox from "./main/MessageBox.vue";
 import { useUserStore } from "~/store/user";
 import { useModalBox } from '~/composables/logout/modal'
 import { cleanToken } from "~/utils/token";
+import { computed } from "vue";
 const route = useRoute();
 
 const userStore = useUserStore();
 
 const { handleCloseModal, handleConfirmModal, handleOpenModal, isShowModal } = useModalBox()
 
-const { setDarkMode, toggleDarkMode } = useDarkMode()
+const { setDarkMode, toggleDarkMode, darkMode } = useDarkMode()
+
+const isDarkMode = computed(() => darkMode.value === Theme.DARK)
 
 const handleViewUserInfo = () => {
   navigateTo('/user/info')