diff --git a/src/components/Icon/src/SvgIcon.vue b/src/components/Icon/src/SvgIcon.vue
index 7d6cee16..bcc17975 100644
--- a/src/components/Icon/src/SvgIcon.vue
+++ b/src/components/Icon/src/SvgIcon.vue
@@ -2,6 +2,7 @@
   <svg
     :class="[prefixCls, $attrs.class, spin && 'svg-icon-spin']"
     :style="getStyle"
+     :fill="color"
     aria-hidden="true"
   >
     <use :xlink:href="symbolId" />
@@ -19,6 +20,10 @@
         type: String,
         default: 'icon',
       },
+      color: {
+        type: String,
+        default: 'black',
+      },
       name: {
         type: String,
         required: true,
@@ -43,6 +48,7 @@
         return {
           width: s,
           height: s,
+          color: props.color,
         }
       })
       return { symbolId, prefixCls, getStyle }
diff --git a/src/components/SimpleMenu/src/SimpleSubMenu.vue b/src/components/SimpleMenu/src/SimpleSubMenu.vue
index 447224c0..c65e341c 100644
--- a/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleSubMenu.vue
@@ -3,7 +3,7 @@
     :collapsed-show-title="collapsedShowTitle">
     <template #title>
       <!-- <Icon v-if="getIcon" :icon="getIcon" :size="12" /> -->
-      <SvgIcon :name="item.icon" :size="20" />
+      <SvgIcon :color="themeValue == 'white' ? 'rgba(39, 94, 204, 1)' : 'white'" :name="item.icon" :size="20" />
       <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
         {{ getI18nName }}
       </div>
@@ -37,7 +37,7 @@
 import type { PropType } from 'vue'
 import type { Menu } from '/@/router/types'
 import { Row, Col } from 'ant-design-vue'
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, ref, watch } from 'vue'
 import { useDesign } from '/@/hooks/web/useDesign'
 import Icon from '/@/components/Icon/index'
 import { SvgIcon } from '/@/components/Icon'
@@ -47,7 +47,7 @@ import { propTypes } from '/@/utils/propTypes'
 import { useI18n } from '/@/hooks/web/useI18n'
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'
-
+import { useRootSetting } from '/@/hooks/setting/useRootSetting'
 export default defineComponent({
   name: 'SimpleSubMenu',
   components: {
@@ -73,7 +73,8 @@ export default defineComponent({
     const { getCollapsed } = useMenuSetting()
     const { t } = useI18n()
     const { prefixCls } = useDesign('simple-menu')
-
+    const { getDarkMode } = useRootSetting()
+    const themeValue = ref(getDarkMode.value)
     const getShowMenu = computed(() => !props.item?.meta?.hideMenu)
     const getIcon = computed(() => props.item?.icon)
     const getI18nName = computed(() => t(props.item?.name))
@@ -87,7 +88,12 @@ export default defineComponent({
         },
       ]
     })
-
+    watch(
+      () => getDarkMode.value,
+      (v) => {
+        themeValue.value = v
+      }
+    )
     function menuHasChildren(menuTreeItem: Menu): boolean {
       return (
         !menuTreeItem.meta?.hideChildrenInMenu &&
@@ -97,6 +103,7 @@ export default defineComponent({
       )
     }
 
+
     return {
       prefixCls,
       menuHasChildren,
@@ -106,7 +113,8 @@ export default defineComponent({
       getShowSubTitle,
       getLevelClass,
       getIsCollapseParent,
-      getCollapsed
+      getCollapsed,
+      themeValue,
     }
   },
 })