diff --git a/packages/hooks/src/web/useLayout.ts b/packages/hooks/src/web/useLayout.ts
index ec86a741..f363090f 100644
--- a/packages/hooks/src/web/useLayout.ts
+++ b/packages/hooks/src/web/useLayout.ts
@@ -29,7 +29,7 @@ const FOOTER_HEIGHT = '--footer-height'
 const LIGHT_TEXT_COLOR = 'rgba(0,0,0,.85)'
 const DARK_TEXT_COLOR = '#fff'
 
-export function createThemeColorListen(el?: MaybeElementRef | null) {
+export function createThemeColorListen() {
   const { sidebar, header, grayMode, colorWeak, theme, setAppConfig } =
     useAppConfig()
 
diff --git a/packages/layouts/src/index.vue b/packages/layouts/src/index.vue
index c4c9a111..520ac6ac 100644
--- a/packages/layouts/src/index.vue
+++ b/packages/layouts/src/index.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
+import { computed, defineComponent, nextTick, unref } from 'vue'
 import { NavBarModeEnum } from '@vben/constants'
-import { computed, defineComponent, unref } from 'vue'
+import { createThemeColorListen } from '@vben/hooks'
+
 import LeftMenuLayout from './left-menu.vue'
 import TopMenuLayout from './top-menu.vue'
 import TopMenuMixLayout from './top-menu-mixed.vue'
@@ -30,6 +32,10 @@ const layout = computed<ReturnType<typeof defineComponent>>(() => {
       return undefined
   }
 })
+
+nextTick(() => {
+  createThemeColorListen()
+})
 </script>
 <template>
   <component :is="layout" v-bind="lockEvents">