diff --git a/src/layout/components/sidebar/leftCollapse.vue b/src/layout/components/sidebar/leftCollapse.vue
index ad474fc1b..f72be40b2 100644
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
 
@@ -22,14 +23,14 @@ const iconClass = computed(() => {
     "h-[16px]",
     "inline-block",
     "align-middle",
-    "text-primary",
     "cursor-pointer",
-    "duration-[100ms]",
-    "hover:text-primary",
-    "dark:hover:!text-white"
+    "duration-[100ms]"
   ];
 });
 
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+const themeColor = computed(() => $storage.layout?.themeColor);
+
 const emit = defineEmits<{
   (e: "toggleClick"): void;
 }>();
@@ -40,7 +41,7 @@ const toggleClick = () => {
 </script>
 
 <template>
-  <div class="container">
+  <div class="collapse-container">
     <el-tooltip
       placement="right"
       :visible="visible"
@@ -49,7 +50,7 @@ const toggleClick = () => {
     >
       <IconifyIconOffline
         :icon="MenuFold"
-        :class="iconClass"
+        :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
         :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
         @click="toggleClick"
         @mouseenter="visible = true"
@@ -60,7 +61,7 @@ const toggleClick = () => {
 </template>
 
 <style lang="scss" scoped>
-.container {
+.collapse-container {
   position: absolute;
   bottom: 0;
   width: 100%;