diff --git a/docs/.vitepress/src/assets/category/home/home-banner-dark.png b/docs/.vitepress/src/assets/category/home/home-banner-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5577c7cfa1b23ff9f4105e527397f7dbb37fae1
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/home-banner-dark.png differ
diff --git a/docs/.vitepress/src/assets/category/home/install-guide-bg-dark.png b/docs/.vitepress/src/assets/category/home/install-guide-bg-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ed275d32e81e46123470c4817061362f8946c0a
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/install-guide-bg-dark.png differ
diff --git a/docs/.vitepress/src/assets/category/home/install-mo-bg-dark.png b/docs/.vitepress/src/assets/category/home/install-mo-bg-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..979f2a920d9b0dafd5895250c6c845eebac7e404
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/install-mo-bg-dark.png differ
diff --git a/docs/.vitepress/src/assets/category/home/qa-bg-dark.png b/docs/.vitepress/src/assets/category/home/qa-bg-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3285bf61dcf2e05909b4f4ed313c09257c86f34
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/qa-bg-dark.png differ
diff --git a/docs/.vitepress/src/assets/category/home/qa-mo-bg-dark.png b/docs/.vitepress/src/assets/category/home/qa-mo-bg-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6a64344682fd16a5161f43f55cfa870470afaa7
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/qa-mo-bg-dark.png differ
diff --git a/docs/.vitepress/src/assets/category/home/started-bg-dark.png b/docs/.vitepress/src/assets/category/home/started-bg-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..737cab03621ae3b05d075827ccd107b7dc6f5b94
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/started-bg-dark.png differ
diff --git a/docs/.vitepress/src/assets/category/home/started-mo-bg-dark.png b/docs/.vitepress/src/assets/category/home/started-mo-bg-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..3edeabb509dc11b86898dde7ed99ab07db74328b
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/started-mo-bg-dark.png differ
diff --git a/docs/.vitepress/src/assets/category/home/x2-bg-dark.png b/docs/.vitepress/src/assets/category/home/x2-bg-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..553d0c58ab372b61f0146e9e9635990656ff35d2
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/x2-bg-dark.png differ
diff --git a/docs/.vitepress/src/assets/category/home/x2-mo-bg-dark.png b/docs/.vitepress/src/assets/category/home/x2-mo-bg-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..4389369086d138a57e0f40a20c91aae3bb4d359f
Binary files /dev/null and b/docs/.vitepress/src/assets/category/home/x2-mo-bg-dark.png differ
diff --git a/docs/.vitepress/src/config/home.ts b/docs/.vitepress/src/config/home.ts
index ec622fcaba1039a281d3ebf81c72cea469d091ee..f93f043f4b0aa3e9e6a285db21e60d2d6719df16 100644
--- a/docs/.vitepress/src/config/home.ts
+++ b/docs/.vitepress/src/config/home.ts
@@ -7,6 +7,15 @@ import BgX2Mo from '@/assets/category/home/x2-mo-bg.png';
 import BgQa from '@/assets/category/home/qa-bg.png';
 import BgQaMo from '@/assets/category/home/qa-mo-bg.png';
 
+import BgStartedDark from '@/assets/category/home/started-bg-dark.png';
+import BgStartedMoDark from '@/assets/category/home/started-mo-bg-dark.png';
+import BgInstallGuideDark from '@/assets/category/home/install-guide-bg-dark.png';
+import BgInstallGuideMoDark from '@/assets/category/home/install-mo-bg-dark.png';
+import BgX2Dark from '@/assets/category/home/x2-bg-dark.png';
+import BgX2MoDark from '@/assets/category/home/x2-mo-bg-dark.png';
+import BgQaDark from '@/assets/category/home/qa-bg-dark.png';
+import BgQaMoDark from '@/assets/category/home/qa-mo-bg-dark.png';
+
 import IconServer from '~icons/home/server.svg';
 import BgServer from '@/assets/category/home/server-bg.png';
 import IconVirtualization from '~icons/home/virtualization.svg';
@@ -21,29 +30,53 @@ import BgEmbedded from '@/assets/category/home/embedded-bg.png';
 // 卡片
 export const cardList = [
   {
-    background: BgStarted,
-    backgroundMo: BgStartedMo,
+    background: {
+      light: BgStarted,
+      dark: BgStartedDark,
+    },
+    backgroundMo: {
+      light: BgStartedMo,
+      dark: BgStartedMoDark,
+    },
     title: '新手入门',
     desc: '10分钟玩转社区，快速构建与成长',
     href: '/zh/Server/Quickstart/Quickstart/quick-start.html',
   },
   {
-    background: BgInstallGuide,
-    backgroundMo: BgInstallGuideMo,
+    background: {
+      light: BgInstallGuide,
+      dark: BgInstallGuideDark,
+    },
+    backgroundMo: {
+      light: BgInstallGuideMo,
+      dark: BgInstallGuideMoDark,
+    },
     title: '安装指南',
     desc: '指导用户顺利完成 openEuler 操作系统安装',
     href: '/zh/Server/InstallationUpgrade/Installation/installation.html',
   },
   {
-    background: BgQa,
-    backgroundMo: BgQaMo,
+    background: {
+      light: BgQa,
+      dark: BgQaDark,
+    },
+    backgroundMo: {
+      light: BgQaMo,
+      dark: BgQaMoDark,
+    },
     title: '常见问题',
     desc: '常见问题解决方法',
     href: 'https://www.openeuler.org/zh/faq/',
   },
   {
-    background: BgX2,
-    backgroundMo: BgX2Mo,
+    background: {
+      light: BgX2,
+      dark: BgX2Dark,
+    },
+    backgroundMo: {
+      light: BgX2Mo,
+      dark: BgX2MoDark,
+    },
     title: '贡献指南',
     desc: '参与文档贡献的方式',
     href: '/zh/Contribute/contribution_process.html',
@@ -125,4 +158,4 @@ export const toolList = [
     desc: '提供服务器安全配置常用工具使用指南，包含机密计算统一开发框架secGear、OS内构入侵检测系统secDetector、安全防护系统safeg…',
     href: '/zh/Tools/Security.html',
   },
-];
\ No newline at end of file
+];
diff --git a/docs/.vitepress/src/views/home/TheHome.vue b/docs/.vitepress/src/views/home/TheHome.vue
index 649416a64ab1ac762bc6afaf4d9e0ad7095eb6c5..41f660649f1cfbee96d7c6e23f59f02b9317e8a6 100644
--- a/docs/.vitepress/src/views/home/TheHome.vue
+++ b/docs/.vitepress/src/views/home/TheHome.vue
@@ -7,7 +7,9 @@ import IconSearch from '~icons/app/icon-search.svg';
 
 import { cardList, businessScenarioList, toolList } from '@/config/home';
 import { useScreen } from '@/composables/useScreen';
+import { useAppearance } from '@/stores/common';
 
+const appearanceStore = useAppearance();
 const { lePad, lePadV, isPhone } = useScreen();
 
 const gap = computed(() => {
@@ -39,7 +41,7 @@ const hotSearch = (val: string) => {
 </script>
 
 <template>
-  <div class="home">
+  <div class="home" :class="[{ dark: appearanceStore.theme === 'dark' }]">
     <ContentWrapper :vertical-padding="[lePadV ? '24px' : '32px', lePadV ? '24px' : '72px']">
       <!-- banner -->
       <p class="banner-title">文档中心</p>
@@ -72,7 +74,7 @@ const hotSearch = (val: string) => {
         <ORow :gap="gap" wrap="wrap">
           <OCol :flex="`0 0 ${lePadV ? '50%' : '25%'}`" v-for="(item, i) in cardList" :key="i">
             <OCard hoverable :href="item.href" class="banner-card-item" target="_blank" rel="noopener noreferrer">
-              <OFigure :src="isPhone ? item.backgroundMo : item.background">
+              <OFigure :src="isPhone ? item.backgroundMo[appearanceStore.theme] : item.background[appearanceStore.theme]">
                 <div class="banner-card-title">{{ item.title }}</div>
                 <div class="banner-card-desc">{{ item.desc }}</div>
               </OFigure>
@@ -137,6 +139,10 @@ const hotSearch = (val: string) => {
   background-repeat: no-repeat;
   background-size: 100% auto;
 
+  &.dark {
+    background-image: url('@/assets/category/home/home-banner-dark.png');
+  }
+
   @include respond-to('<=laptop') {
     background-position: top -66px right 50%;
   }
@@ -190,12 +196,12 @@ const hotSearch = (val: string) => {
 .banner-card-title {
   @include h2;
   @include text-truncate(1);
-  color: var(--o-color-info1-inverse);
+  color: rgba(var(--o-white), 1);
   font-weight: 500;
 }
 .banner-card-desc {
   @include tip1;
-  color: var(--o-color-info2-inverse);
+  color: rgba(var(--o-white), 0.8);
   margin-top: 8px;
 }