diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 4b624c96..dc79d96d 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,20 +1,38 @@
 <template>
   <div class="hamburger-wrapper" @click="toggleClick">
-    <div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }]" />
+    <div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }, hamburgerClass]" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useSettingsStore } from "@/store";
+import { ThemeEnum, SidebarColorEnum } from "@/enums/ThemeEnum";
+import { LayoutEnum } from "@/enums/LayoutEnum";
+
 defineProps({
-  isActive: {
-    required: true,
-    type: Boolean,
-    default: false,
-  },
+  isActive: { type: Boolean, required: true },
 });
 
 const emit = defineEmits(["toggleClick"]);
 
+const settingsStore = useSettingsStore();
+const layout = computed(() => settingsStore.layout);
+
+const hamburgerClass = computed(() => {
+  // 如果暗黑主题
+  if (settingsStore.theme === ThemeEnum.DARK) {
+    return "hamburger--white";
+  }
+
+  // 如果是混合布局 && 侧边栏配色方案是经典蓝
+  if (
+    layout.value === LayoutEnum.MIX &&
+    settingsStore.sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
+  ) {
+    return "hamburger--white";
+  }
+});
+
 function toggleClick() {
   emit("toggleClick");
 }
@@ -26,20 +44,20 @@ function toggleClick() {
   align-items: center;
   justify-content: center;
   padding: 0 15px;
+  cursor: pointer;
 
   .hamburger {
     vertical-align: middle;
-    cursor: pointer;
     transform: scaleX(-1);
-  }
+    transition: transform 0.3s ease;
 
-  .hamburger.is-active {
-    transform: scaleX(1);
-  }
-}
-.layout-mix {
-  .hamburger-wrapper {
-    color: #fff;
+    &--white {
+      color: #fff;
+    }
+
+    &.is-active {
+      transform: scaleX(1);
+    }
   }
 }
 </style>