From d783c5489202d26015d567841f8b430ebe7dab3e Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Wed, 30 Jul 2025 15:58:23 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix[doc]:=20=E8=A7=A3=E5=86=B3useI18n?=
 =?UTF-8?q?=E5=9C=A8=E7=BB=84=E4=BB=B6=E5=A4=96=E4=BD=BF=E7=94=A8=E6=8A=A5?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/lang/index.ts   | 2 +-
 packages/docs/src/router/index.ts | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/lang/index.ts b/packages/docs/src/lang/index.ts
index 81fe53fd..3cda6de2 100644
--- a/packages/docs/src/lang/index.ts
+++ b/packages/docs/src/lang/index.ts
@@ -30,8 +30,8 @@ export const locales: Array<LocaleItemT> = [
 ];
 export const LOCALE_COOKIE_KEY = 'locale';
 
-const { locale } = useI18n();
 export const currentLocale = computed(() => {
+  const { locale } = useI18n();
   const rlt = locales.find((item) => item.value === locale.value);
   return rlt || locales[0];
 });
diff --git a/packages/docs/src/router/index.ts b/packages/docs/src/router/index.ts
index 727c5c67..23346341 100644
--- a/packages/docs/src/router/index.ts
+++ b/packages/docs/src/router/index.ts
@@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from 'vue-router';
 import TheHome from '../pages/TheHome.vue';
 import { routes as componentRoutes } from './components';
 import { useI18n } from '@opensig/opendesign';
-const { t } = useI18n();
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -19,7 +18,7 @@ export const router = createRouter({
 export const sidebarRouteConfig = {
   component: {
     routes: componentRoutes,
-    label: () => t('components.component'),
+    label: () => useI18n().t('components.component'),
   },
 };
 
-- 
Gitee


From 7beb69ae29c2c9f7c709b3915a0a9fc89614f7bb Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Wed, 30 Jul 2025 16:19:15 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat[doc]:=20=E6=96=B0=E5=A2=9Eicon?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/icons/icon.config.ts      | 6 ++++++
 packages/docs/icons/svgs/fill/code.svg  | 4 ++++
 packages/docs/icons/svgs/fill/copy.svg  | 4 ++++
 packages/docs/icons/svgs/fill/dark.svg  | 5 +++++
 packages/docs/icons/svgs/fill/light.svg | 5 +++++
 packages/docs/package.json              | 4 +++-
 6 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/icons/icon.config.ts
 create mode 100644 packages/docs/icons/svgs/fill/code.svg
 create mode 100644 packages/docs/icons/svgs/fill/copy.svg
 create mode 100644 packages/docs/icons/svgs/fill/dark.svg
 create mode 100644 packages/docs/icons/svgs/fill/light.svg

diff --git a/packages/docs/icons/icon.config.ts b/packages/docs/icons/icon.config.ts
new file mode 100644
index 00000000..b816a586
--- /dev/null
+++ b/packages/docs/icons/icon.config.ts
@@ -0,0 +1,6 @@
+module.exports = {
+  input: './svgs',
+  output: '../src/icon-components/',
+  componentClass: 'o-svg-icon',
+  prefix: 'doc-',
+};
diff --git a/packages/docs/icons/svgs/fill/code.svg b/packages/docs/icons/svgs/fill/code.svg
new file mode 100644
index 00000000..1862aa9f
--- /dev/null
+++ b/packages/docs/icons/svgs/fill/code.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#000"
+    d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/docs/icons/svgs/fill/copy.svg b/packages/docs/icons/svgs/fill/copy.svg
new file mode 100644
index 00000000..d701b8b8
--- /dev/null
+++ b/packages/docs/icons/svgs/fill/copy.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#000"
+    d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/docs/icons/svgs/fill/dark.svg b/packages/docs/icons/svgs/fill/dark.svg
new file mode 100644
index 00000000..61997a54
--- /dev/null
+++ b/packages/docs/icons/svgs/fill/dark.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path
+    d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
+    fill="#000"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/docs/icons/svgs/fill/light.svg b/packages/docs/icons/svgs/fill/light.svg
new file mode 100644
index 00000000..7f966ca3
--- /dev/null
+++ b/packages/docs/icons/svgs/fill/light.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path
+    d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
+    fill="#000"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 3e831ee2..1009931f 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "gen:icon": "open-scripts gen:icon --config ./icons/icon.config.ts",
     "build": "vite build",
     "type-check": "vue-tsc",
     "preview": "vite preview",
@@ -38,6 +39,7 @@
     "vite-plugin-inspect": "catalog:build",
     "vue-component-meta": "catalog:vue",
     "vue-docgen-api": "catalog:vue",
-    "vue-tsc": "catalog:build"
+    "vue-tsc": "catalog:build",
+    "@opensig/open-scripts": "workspace:^"
   }
 }
-- 
Gitee


From 4c0220a32c5e2563fcc3312538ce01feb38d8396 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Wed, 30 Jul 2025 18:24:35 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix[doc]:=20=E5=B0=86=E7=9A=AE=E8=82=A4?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=8B=86=E5=88=86=E4=B8=BA=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=92=8C=E9=A2=9C=E8=89=B2=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/components/TheHeader.vue | 73 +++++++++++-----------
 packages/docs/src/lang/en-US.ts            |  9 +--
 packages/docs/src/lang/zh-CN.ts            |  1 +
 3 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/packages/docs/src/components/TheHeader.vue b/packages/docs/src/components/TheHeader.vue
index 18753df4..d05a4d15 100644
--- a/packages/docs/src/components/TheHeader.vue
+++ b/packages/docs/src/components/TheHeader.vue
@@ -1,53 +1,51 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed, watch, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { ODropdown, ODropdownItem, useI18n, useTheme } from '@opensig/opendesign';
+import { ODropdown, ODropdownItem, useI18n, useTheme, OSwitch } from '@opensig/opendesign';
 import { currentLocale, changeLocale, locales } from '@/lang';
 import { sidebarRouteConfig, type SidebarNameT } from '@/router';
 import { useSidebarStore } from '@/stores/sidebar';
+import { DocIconDark, DocIconLight } from '@/icon-components';
 
 const sidebarStore = useSidebarStore();
-const themeInfo = [
+const themes = [
   {
-    key: 'light',
-    name: '[light]opendesign',
+    key: '',
+    name: 'Euler',
   },
   {
-    key: 'dark',
-    name: '[dark]opendesign',
+    key: 'a.',
+    name: 'Ascend',
   },
   {
-    key: 'a.light',
-    name: '[light]A',
+    key: 'k.',
+    name: 'Kunpeng',
   },
-  {
-    key: 'a.dark',
-    name: '[dark]A',
-  },
-  {
-    key: 'k.light',
-    name: '[light]K',
-  },
-  {
-    key: 'k.dark',
-    name: '[dark]K',
-  },
-];
-
+] as const;
+type ThemeT = (typeof themes)[number];
+const colorSwitcher = {
+  checked: 'dark',
+  unchecked: 'light',
+};
+const themesValue = ref<ThemeT>(themes[0]);
+const colorSwitcherValue = ref(colorSwitcher.unchecked);
 const { theme } = useTheme();
 const router = useRouter();
 const route = useRoute();
-if (!theme.value) {
-  theme.value = themeInfo[0].key;
-}
+watch(
+  [themesValue, colorSwitcherValue],
+  ([newTheme, newColorSwitcher]) => {
+    theme.value = `${newTheme.key}${newColorSwitcher}`;
+  },
+  { immediate: true },
+);
 
 const themeName = computed(() => {
-  const themeItem = themeInfo.find((item) => item.key === theme.value);
-  return themeItem ? themeItem.name : '--';
+  return `${themesValue.value.name}-${colorSwitcherValue.value}`;
 });
 
-const changeTheme = (key: string) => {
-  theme.value = key;
+const changeTheme = (item: (typeof themes)[number]) => {
+  themesValue.value = item;
 };
 
 const { t, locale } = useI18n();
@@ -90,17 +88,18 @@ watch(locale, (newLocale, oldLocale) => {
       <div class="tools">
         <div class="tool-item">
           <ODropdown>
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="theme-icon">
-              <path
-                fill="currentColor"
-                d="M7.012 8.591l-2.005 1.999c-0.091 0.097-0.218 0.151-0.351 0.151s-0.26-0.055-0.351-0.151l-2.155-2.099c-0.097-0.091-0.152-0.217-0.152-0.35s0.055-0.259 0.152-0.35l3.719-3.719c0.25-0.25 0.561-0.429 0.902-0.52l2.055-0.55c0.121-0.029 0.244 0.035 0.291 0.15 0.616 1.045 1.697 1.732 2.907 1.849 1.208-0.115 2.288-0.798 2.907-1.839 0.043-0.119 0.167-0.187 0.291-0.16l2.005 0.54c0.341 0.091 0.653 0.27 0.902 0.52l3.719 3.719c0.097 0.091 0.152 0.217 0.152 0.35s-0.055 0.259-0.152 0.35l-2.125 2.119c-0.091 0.097-0.218 0.151-0.351 0.151s-0.26-0.055-0.351-0.151l-2.005-1.999v11.396c0 0.552-0.449 1-1.002 1h-7.999c-0.554 0-1.002-0.448-1.002-1v-11.406z"
-              />
-            </svg>
+            {{ t('header.theme') }}
             <template #dropdown>
-              <ODropdownItem v-for="item in themeInfo" :key="item.name" :label="item.name" :value="item.name" @click="changeTheme(item.key)" />
+              <ODropdownItem v-for="item in themes" :key="item.name" :label="item.name" :value="item.name" @click="changeTheme(item)" />
             </template>
           </ODropdown>
         </div>
+        <div class="tool-item">
+          <OSwitch v-model="colorSwitcherValue" :checked-value="colorSwitcher.checked" :unchecked-value="colorSwitcher.unchecked">
+            <template #off><DocIconLight /></template>
+            <template #on><DocIconDark /></template>
+          </OSwitch>
+        </div>
         <div class="tool-item">
           <ODropdown>
             {{ currentLocale?.label }}
diff --git a/packages/docs/src/lang/en-US.ts b/packages/docs/src/lang/en-US.ts
index d08992d9..9df6479b 100644
--- a/packages/docs/src/lang/en-US.ts
+++ b/packages/docs/src/lang/en-US.ts
@@ -1,12 +1,13 @@
 export default {
   components: {
-    component: 'component',
+    component: 'Component',
   },
   header: {
-    globalSettings: 'global settings',
-    home: 'home',
+    globalSettings: 'Global settings',
+    home: 'Home',
+    theme: 'Theme',
   },
   dev: {
-    devEnv: 'dev env'
+    devEnv: 'Dev env'
   }
 };
diff --git a/packages/docs/src/lang/zh-CN.ts b/packages/docs/src/lang/zh-CN.ts
index b553fc9d..461840e4 100644
--- a/packages/docs/src/lang/zh-CN.ts
+++ b/packages/docs/src/lang/zh-CN.ts
@@ -5,6 +5,7 @@ export default {
   header: {
     globalSettings: '全局设置',
     home: '首页',
+    theme: '主题',
   },
   dev: {
     devEnv: '开发环境',
-- 
Gitee


From 6d4696568c29558d32b969c0a9adc213a740e13d Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Wed, 30 Jul 2025 18:44:49 +0800
Subject: [PATCH 4/5] =?UTF-8?q?fix[doc]:=20=E6=9B=BF=E6=8D=A2icon=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/components/CodeContainer.vue | 11 ++---------
 packages/docs/src/components/DemoContainer.vue |  8 ++------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/docs/src/components/CodeContainer.vue b/packages/docs/src/components/CodeContainer.vue
index 0b6ae1ec..84174c54 100644
--- a/packages/docs/src/components/CodeContainer.vue
+++ b/packages/docs/src/components/CodeContainer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { OButton, useMessage, OScroller } from '@opensig/opendesign';
 import { computed } from 'vue';
+import { DocIconCopy } from '@/icon-components';
 
 const props = defineProps<{
   /** 代码块的源码（未经高亮的源码）*/
@@ -28,15 +29,7 @@ const copyCode = async () => {
     </OScroller>
     <div v-if="props.lang" class="lang-mark">{{ props.lang }}</div>
     <OButton class="copy-block" variant="outline" size="small" @click="copyCode">
-      <template #icon>
-        <svg viewBox="0 0 28 28" class="o-svg-icon">
-          <path
-            fill-rule="nonzero"
-            fill="currentColor"
-            d="M25.096 0C26.7 0 28 1.3 28 2.902v15.756c0 1.604-1.3 2.904-2.904 2.904h-3.534V25.5a2.5 2.5 0 0 1-2.5 2.5H2.5A2.5 2.5 0 0 1 0 25.5V8.936a2.5 2.5 0 0 1 2.5-2.5h3.968V2.902C6.468 1.298 7.768 0 9.372 0zm-6.034 26.124c.346 0 .626-.28.626-.624V8.936a.624.624 0 0 0-.626-.626H2.5a.626.626 0 0 0-.626.626v16.56c0 .346.28.626.626.626h16.562zm7.094-7.466V2.902c0-.568-.46-1.028-1.028-1.028H9.372c-.568 0-1.028.46-1.028 1.028v3.536h10.75a2.5 2.5 0 0 1 2.5 2.5v10.75h3.534c.568 0 1.028-.46 1.028-1.03m-11.206-5.19a.938.938 0 0 1-.02 1.876H6.64a.938.938 0 0 1 .02-1.876h8.292zm0 5.626a.938.938 0 1 1-.02 1.874H6.64a.938.938 0 1 1 .02-1.874h8.292z"
-          ></path>
-        </svg>
-      </template>
+      <template #icon><DocIconCopy /></template>
     </OButton>
   </div>
 </template>
diff --git a/packages/docs/src/components/DemoContainer.vue b/packages/docs/src/components/DemoContainer.vue
index c4e858bb..f3d8fe22 100644
--- a/packages/docs/src/components/DemoContainer.vue
+++ b/packages/docs/src/components/DemoContainer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, h, type Component, type PropType } from 'vue';
 import { OScroller, OButton, useI18n, OIconChevronUp } from '@opensig/opendesign';
+import { DocIconCode } from '@/icon-components';
 
 type DocT = Record<string, string | Component>;
 export type DemoComponent = Component & {
@@ -40,12 +41,7 @@ const Docs = ({ docs, locale: _locale }: { docs?: DocT; locale: string }) => {
       <!-- 隐藏或显示代码块的按钮 -->
       <OButton variant="solid" size="small" @click="switchShowCode">
         <template #icon>
-          <svg viewBox="0 0 24 24" v-if="!isShowCode" class="o-svg-icon">
-            <path
-              fill="currentColor"
-              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
-            />
-          </svg>
+          <DocIconCode v-if="!isShowCode" />
           <OIconChevronUp v-else />
         </template>
       </OButton>
-- 
Gitee


From 87fb19020fe1e2b4fb09d4b0b986514a022d940e Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Thu, 31 Jul 2025 09:09:15 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat[doc]:=20docs=E6=A1=86=E6=9E=B6?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=B9=E6=8D=AE=E4=B8=BB=E9=A2=98=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E4=B8=8D=E5=90=8C=E7=BB=84=E4=BB=B6=E7=9A=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/plugins/injectDemoAndApi.ts     | 63 +++++++++++++++----
 .../docs/plugins/markdown/vueMdTranslate.ts   |  2 +-
 .../docs/src/components/DemoContainer.vue     | 19 +++++-
 packages/docs/src/components/DemoUsage.vue    |  3 +-
 packages/docs/src/components/TheHeader.vue    |  4 +-
 packages/docs/src/utils/theme.ts              |  9 +++
 6 files changed, 82 insertions(+), 18 deletions(-)
 create mode 100644 packages/docs/src/utils/theme.ts

diff --git a/packages/docs/plugins/injectDemoAndApi.ts b/packages/docs/plugins/injectDemoAndApi.ts
index 5b3a2840..426f1732 100644
--- a/packages/docs/plugins/injectDemoAndApi.ts
+++ b/packages/docs/plugins/injectDemoAndApi.ts
@@ -25,7 +25,33 @@ const genImportedExpression = (imported: Array<{ path: string; default?: string;
     })
     .join('\n')}`;
 };
-const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unknown', viteDevServer?: ViteDevServer) => {
+const resolveActiveTheme = (theme: string) => {
+  let _theme = theme.toLowerCase();
+  if (_theme.startsWith(':')) {
+    _theme = _theme.slice(1);
+  }
+  if (['e', 'euler'].includes(_theme)) {
+    return 'e';
+  }
+  if (['k', 'kunpeng'].includes(_theme)) {
+    return 'k';
+  }
+  if (['a', 'ascend'].includes(_theme)) {
+    return 'a';
+  }
+  return '';
+};
+
+/**
+ * 转化 usage 指令导入的组件
+ * @param code 组件源代码
+ * @param id 入口文件id
+ * @param mode 插件运行环境
+ * @param activeTheme 激活组件的主题，分为 e, a, k，分别代表在仅在 Euler、Kunpeng、Ascend 主题下可见
+ * @param viteDevServer vite开发服务器实例
+ * @returns 转化后的代码
+ */
+const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unknown', activeTheme?: string, viteDevServer?: ViteDevServer) => {
   const imported: {
     default?: string;
     all?: string;
@@ -36,13 +62,14 @@ const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unk
   // 因为要修改 customBlocks 和 scriptSetup，所以复制一份
   const customBlocks = [..._customBlocks];
   const scriptSetup = _scriptSetup ? { ..._scriptSetup } : null;
-  // 处理 docs 模块
+  // 处理 docs 自定义块
   const docsBlockIdx = customBlocks.findIndex((block) => {
     if (block.type === 'docs' && block.lang === 'md') {
       return true;
     }
   });
   if (docsBlockIdx >= 0) {
+    // 将 docs 自定义块按 zh-CN，en-US 分隔为多个虚拟模块然后导入。这些虚拟模块后经由 vueMdTranslate 插件编译为 vue 组件
     parseDocsCode(customBlocks[docsBlockIdx].content).forEach(({ lang: docsLang, code: docCode }, index) => {
       const virtualId = join(dirname(id), `virtual-${docsLang}.md`).replace(/\\/g, '/');
       imported.push({ path: virtualId, default: `AutoInjectDocs${index}`, lang: docsLang });
@@ -63,7 +90,9 @@ const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unk
     });
     scriptSetup.content = `${scriptSetup.content}\n;const _style = ${JSON.stringify(styleCode)};\n`;
   }
-  const template = `<template><DemoUsage :schema="_schema" :ctx="_ctx" :template="_template" :docs="{${imported.map((item) => `'${item.lang}': ${item.default}`).join(',')}}" :style="_style" /></template>`;
+  const docsJson = `{${imported.map((item) => `'${item.lang}': ${item.default}`).join(',')}}`;
+  // 补充 usage 的 vue 文件的 template 块
+  const template = `<template><DemoUsage :schema="_schema" :ctx="_ctx" :template="_template" :docs="${docsJson}" :style="_style" ${activeTheme ? `active-theme="${activeTheme}"` : ''} /></template>`;
   return `${[...customBlocks, scriptSetup, ...styles]
     .filter(Boolean)
     .map((block) => {
@@ -71,7 +100,7 @@ const transformVueDemo = (code: string, id: string, mode: 'dev' | 'build' | 'unk
     })
     .join('\n')}\n${template}`;
 };
-const transformMdEntry = async (code: string, id: string, usageFiles: Set<string>) => {
+const transformMdEntry = async (code: string, id: string, usageFiles: Map<string, string>, mode: 'dev' | 'build' | 'unknown', viteDevServer?: ViteDevServer) => {
   const imported: {
     default?: string;
     all?: string;
@@ -80,12 +109,13 @@ const transformMdEntry = async (code: string, id: string, usageFiles: Set<string
   }[] = [];
   const lang = getLangByFileName(id);
   // 将 <!-- @case CaseComponent --> 注释替换成 <DemoContainer :demo="AutoInjectCaseComponent" />
-  // 将 <!-- @usage usageConfig --> 注释替换成 <DemoUsage :docs="docs" :template="template" :schema="schema" />
-  let newCode = await asyncReplace(code, /<!-{2,}\s*@(case|usage|api)\s+(.*?)\s*-{2,}>/g, async (match) => {
-    const [, directive, filePath] = match;
+  // 将 <!-- @usage usageConfig --> 注释替换成 <AutoInject${fileName} />
+  let newCode = await asyncReplace(code, /<!-{2,}\s*@(case|usage|api)(:\w+)?\s+(.*?)\s*-{2,}>/gi, async (match) => {
+    const [, directive, _activeTheme, filePath] = match;
     const paths = filePath.split('/');
     const dirs = paths.slice(0, -1);
     const fileName = paths[paths.length - 1];
+    const activeTheme = resolveActiveTheme(_activeTheme || '');
     if (directive === 'api') {
       // 拼接 api 文件
       const apiFile = join(dirname(id), ...dirs, `${fileName}-api.${lang.lang}.md`);
@@ -100,13 +130,18 @@ const transformMdEntry = async (code: string, id: string, usageFiles: Set<string
           default: `AutoInject${fileName}`,
           path: demoFile,
         });
-        return `<DemoContainer :demo="AutoInject${fileName}" />`;
+        return `<DemoContainer :demo="AutoInject${fileName}" ${activeTheme ? `active-theme="${activeTheme}"` : ''} />`;
       } else {
+        // 此处只导入 usage 指令指定的 vue 模块。该 vue 模块的还需在 transformVueDemo 函数中转换
         imported.push({
           path: demoFile,
           default: `AutoInject${fileName}`,
         });
-        usageFiles.add(demoFile.replace(/\\/g, '/'));
+        const usageFileId = demoFile.replace(/\\/g, '/');
+        if (mode === 'dev' && viteDevServer) {
+          viteDevServer.watcher.emit('change', usageFileId);
+        }
+        usageFiles.set(usageFileId, activeTheme);
         return `<AutoInject${fileName} />`;
       }
     }
@@ -123,7 +158,11 @@ const transformMdEntry = async (code: string, id: string, usageFiles: Set<string
  * @returns Plugin
  */
 export function injectDemoAndApi(): Plugin {
-  const usageFiles = new Set<string>();
+  /**
+   * 缓存需要导入的usage模块
+   * Map<usageId, activeTheme>
+   */
+  const usageFiles = new Map<string, string>();
   let viteDevServer: ViteDevServer | null = null;
   return {
     name: 'portal:inject-demo-and-api',
@@ -142,12 +181,12 @@ export function injectDemoAndApi(): Plugin {
     transform(code, id) {
       // 处理 vue 文件
       if (usageFiles.has(id)) {
-        return transformVueDemo(code, id, this.environment.mode, viteDevServer);
+        return transformVueDemo(code, id, this.environment.mode, usageFiles.get(id), viteDevServer);
       }
 
       // 处理 md 入口文件
       if (entryFileRegex.test(id) && !id.startsWith('virtual:')) {
-        return transformMdEntry(code, id, usageFiles);
+        return transformMdEntry(code, id, usageFiles, this.environment.mode, viteDevServer);
       }
     },
     // 处理 api.*.md 文件的热更新
diff --git a/packages/docs/plugins/markdown/vueMdTranslate.ts b/packages/docs/plugins/markdown/vueMdTranslate.ts
index 49184d44..cbbcec9b 100644
--- a/packages/docs/plugins/markdown/vueMdTranslate.ts
+++ b/packages/docs/plugins/markdown/vueMdTranslate.ts
@@ -3,7 +3,7 @@ import { MarkdownItAsync } from 'markdown-it-async';
 import {  markdownItOptions, markdownItPlugins } from './common'
 
 export const markdownItSetup = function (md: MarkdownItAsync) {
-  markdownItPlugins.forEach((plugin) => md.use(plugin));
+  markdownItPlugins.forEach((item) => md.use(item));
 };
 /**
  * vite 插件，markdown中可导入并使用vue组件；同时将 markdown 转换为 vue 组件
diff --git a/packages/docs/src/components/DemoContainer.vue b/packages/docs/src/components/DemoContainer.vue
index f3d8fe22..9739d75d 100644
--- a/packages/docs/src/components/DemoContainer.vue
+++ b/packages/docs/src/components/DemoContainer.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, h, type Component, type PropType } from 'vue';
+import { ref, h, type Component, type PropType, computed } from 'vue';
 import { OScroller, OButton, useI18n, OIconChevronUp } from '@opensig/opendesign';
 import { DocIconCode } from '@/icon-components';
+import { theme } from '@/utils/theme';
 
 type DocT = Record<string, string | Component>;
 export type DemoComponent = Component & {
@@ -15,6 +16,9 @@ const props = defineProps({
     type: [Object, Function] as PropType<DemoComponent>,
     required: true,
   },
+  activeTheme: {
+    type: String,
+  },
 });
 const isShowCode = ref(false);
 const switchShowCode = () => {
@@ -33,10 +37,21 @@ const Docs = ({ docs, locale: _locale }: { docs?: DocT; locale: string }) => {
   }
   return h('div', { class: 'docs' }, h(docs[_locale]));
 };
+// 根据主题决定是否渲染
+const isRender = computed(() => {
+  if (!props.activeTheme) {
+    return true;
+  }
+  const themeColor = theme.value.split('.');
+  if (themeColor.length > 1) {
+    return props.activeTheme === themeColor[0];
+  }
+  return props.activeTheme === 'e';
+});
 </script>
 
 <template>
-  <div class="demo-container">
+  <div v-if="isRender" class="demo-container">
     <div class="operator">
       <!-- 隐藏或显示代码块的按钮 -->
       <OButton variant="solid" size="small" @click="switchShowCode">
diff --git a/packages/docs/src/components/DemoUsage.vue b/packages/docs/src/components/DemoUsage.vue
index 3aaa8936..a4409c06 100644
--- a/packages/docs/src/components/DemoUsage.vue
+++ b/packages/docs/src/components/DemoUsage.vue
@@ -24,6 +24,7 @@ const props = defineProps<{
   style?: string;
   /** 传给 template 的上下文，在模板中使用 */
   ctx?: any;
+  activeTheme?: string;
 }>();
 /**
  * 通过表单控制数据，生成表单控件响应式变量的默认值
@@ -134,7 +135,7 @@ watchEffect(() => {
 });
 </script>
 <template>
-  <DemoContainer :demo="Demo" class="props-playground" />
+  <DemoContainer :demo="Demo" :active-theme="props.activeTheme" class="props-playground" />
 </template>
 <style lang="scss" scoped>
 .props-playground {
diff --git a/packages/docs/src/components/TheHeader.vue b/packages/docs/src/components/TheHeader.vue
index d05a4d15..167ce136 100644
--- a/packages/docs/src/components/TheHeader.vue
+++ b/packages/docs/src/components/TheHeader.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed, watch, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { ODropdown, ODropdownItem, useI18n, useTheme, OSwitch } from '@opensig/opendesign';
+import { ODropdown, ODropdownItem, useI18n, OSwitch } from '@opensig/opendesign';
 import { currentLocale, changeLocale, locales } from '@/lang';
 import { sidebarRouteConfig, type SidebarNameT } from '@/router';
 import { useSidebarStore } from '@/stores/sidebar';
 import { DocIconDark, DocIconLight } from '@/icon-components';
+import { theme } from '@/utils/theme';
 
 const sidebarStore = useSidebarStore();
 const themes = [
@@ -29,7 +30,6 @@ const colorSwitcher = {
 };
 const themesValue = ref<ThemeT>(themes[0]);
 const colorSwitcherValue = ref(colorSwitcher.unchecked);
-const { theme } = useTheme();
 const router = useRouter();
 const route = useRoute();
 watch(
diff --git a/packages/docs/src/utils/theme.ts b/packages/docs/src/utils/theme.ts
new file mode 100644
index 00000000..994f7727
--- /dev/null
+++ b/packages/docs/src/utils/theme.ts
@@ -0,0 +1,9 @@
+import { ref, watchEffect } from 'vue';
+const THEME_KEY = '__theme__';
+
+// 全局状态
+export const theme = ref<string>(localStorage.getItem(THEME_KEY) || 'light');
+watchEffect(() => {
+  document.documentElement.dataset.oTheme = theme.value;
+  localStorage.setItem(THEME_KEY, theme.value);
+});
-- 
Gitee