From 500dc2559db997cfd96cafc3f20bee8e7ed41e6f Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Wed, 12 Aug 2026 18:43:06 +0800
Subject: [PATCH 01/13] refactor(genui-sdk-vue): move theme change logic to
 materials

---
 packages/core/src/material/index.ts           |   2 +
 packages/core/src/material/materials-theme.ts |  21 +++
 packages/core/src/material/materials.ts       |   3 +
 packages/core/src/material/merge-materials.ts |  55 ++++++
 .../frameworks/vue/src/chat/GenuiChat.vue     |   6 +-
 .../src/config-provider/ConfigProvider.vue    | 158 +++++++++++-------
 .../src/config-provider/injection-tokens.ts   |  12 +-
 .../src/materials/materials.ts                |   2 +
 .../src/materials/theme/index.ts              |  47 ++++++
 .../materials/vue-opentiny-vue/package.json   |   2 +
 .../src/materials/materials.ts                |   7 +-
 .../src/materials/theme/ThemeRoot.ts          |  24 +++
 .../src/materials/theme/index.ts              |  53 ++++++
 pnpm-lock.yaml                                |   6 +
 .../web/src/components/AssistantFooter.vue    |   4 +-
 .../web/src/components/UserFooter.vue         |   4 +-
 .../genui-template/GenuiTemplateChat.vue      |  12 +-
 .../use-monaco-playground-theme.ts            |   8 +-
 18 files changed, 346 insertions(+), 80 deletions(-)
 create mode 100644 packages/core/src/material/materials-theme.ts
 create mode 100644 packages/core/src/material/merge-materials.ts
 create mode 100644 packages/materials/vue-element-plus/src/materials/theme/index.ts
 create mode 100644 packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
 create mode 100644 packages/materials/vue-opentiny-vue/src/materials/theme/index.ts

diff --git a/packages/core/src/material/index.ts b/packages/core/src/material/index.ts
index 39289cc9..d3c37962 100644
--- a/packages/core/src/material/index.ts
+++ b/packages/core/src/material/index.ts
@@ -2,3 +2,5 @@ export * from './default-props-map';
 export * from './materials';
 export * from './materials-meta';
 export * from './materials-protocol';
+export * from './materials-theme';
+export * from './merge-materials';
diff --git a/packages/core/src/material/materials-theme.ts b/packages/core/src/material/materials-theme.ts
new file mode 100644
index 00000000..01d30f82
--- /dev/null
+++ b/packages/core/src/material/materials-theme.ts
@@ -0,0 +1,21 @@
+export type ThemeColorScheme = 'light' | 'dark';
+
+export interface ThemeDescriptor {
+  id: string;
+  label?: string;
+  colorScheme?: ThemeColorScheme;
+}
+
+export interface ThemeApplyContext {
+  scopeId: string;
+  rootEl?: HTMLElement | null;
+  systemColorScheme: ThemeColorScheme;
+}
+
+export type ThemeDisposer = () => void;
+
+export interface IMaterialsTheme {
+  themes?: ThemeDescriptor[];
+  apply(theme: string, ctx: ThemeApplyContext): void | ThemeDisposer;
+  Root?: unknown;
+}
diff --git a/packages/core/src/material/materials.ts b/packages/core/src/material/materials.ts
index dded8bf7..4a5cdb4f 100644
--- a/packages/core/src/material/materials.ts
+++ b/packages/core/src/material/materials.ts
@@ -1,3 +1,5 @@
+import type { IMaterialsTheme } from './materials-theme';
+
 export type IMaterialComponent = unknown;
 
 export type IMaterialsMap = Record<string, IMaterialComponent>;
@@ -6,5 +8,6 @@ export interface IMaterials {
   components?: IMaterialsMap;
   requiredCompleteFieldSelectors?: string[];
   defaultPropsMap?: Record<string, any>;
+  theme?: IMaterialsTheme | IMaterialsTheme[];
   [key: string]: any;
 }
diff --git a/packages/core/src/material/merge-materials.ts b/packages/core/src/material/merge-materials.ts
new file mode 100644
index 00000000..52d45a20
--- /dev/null
+++ b/packages/core/src/material/merge-materials.ts
@@ -0,0 +1,55 @@
+import type { IMaterials } from './materials';
+import type { IMaterialsTheme } from './materials-theme';
+
+const KNOWN_KEYS = ['components', 'requiredCompleteFieldSelectors', 'defaultPropsMap', 'theme'];
+
+export function mergeMaterials(...sources: (IMaterials | undefined)[]): IMaterials {
+  const components: Record<string, unknown> = {};
+  const requiredCompleteFieldSelectors: string[] = [];
+  const defaultPropsMap: Record<string, any> = {};
+  const themes: IMaterialsTheme[] = [];
+  const seenThemes = new Set<IMaterialsTheme>();
+  const extra: Record<string, unknown> = {};
+
+  for (const src of sources) {
+    if (!src) {
+      continue;
+    }
+    Object.assign(components, src.components ?? {});
+    for (const selector of src.requiredCompleteFieldSelectors ?? []) {
+      if (!requiredCompleteFieldSelectors.includes(selector)) {
+        requiredCompleteFieldSelectors.push(selector);
+      }
+    }
+    Object.assign(defaultPropsMap, src.defaultPropsMap ?? {});
+    if (src.theme) {
+      const arr = Array.isArray(src.theme) ? src.theme : [src.theme];
+      for (const theme of arr) {
+        if (theme && !seenThemes.has(theme)) {
+          seenThemes.add(theme);
+          themes.push(theme);
+        }
+      }
+    }
+    for (const key of Object.keys(src)) {
+      if (!KNOWN_KEYS.includes(key)) {
+        extra[key] = (src as Record<string, unknown>)[key];
+      }
+    }
+  }
+
+  const merged: IMaterials = {
+    components,
+    requiredCompleteFieldSelectors,
+    defaultPropsMap,
+    ...extra,
+  };
+
+  if (themes.length === 1) {
+    merged.theme = themes[0];
+  } else if (themes.length > 1) {
+    merged.theme = themes;
+  }
+
+  return merged;
+}
diff --git a/packages/frameworks/vue/src/chat/GenuiChat.vue b/packages/frameworks/vue/src/chat/GenuiChat.vue
index c0f2872c..da396be3 100644
--- a/packages/frameworks/vue/src/chat/GenuiChat.vue
+++ b/packages/frameworks/vue/src/chat/GenuiChat.vue
@@ -15,7 +15,7 @@ import type {
   UserItem,
   UserTextItem,
 } from '@opentiny/tiny-robot';
-import { ref, watch, computed, h, inject, provide } from 'vue';
+import { ref, watch, computed, h, inject } from 'vue';
 import type { Ref, Component } from 'vue';
 import { CustomModelProvider } from './CustomModelProvider';
 import { scrollEnd, throttle, toSlotFunction } from './chat-utils';
@@ -42,7 +42,7 @@ import { IResponseHandler, defaultResponseHandlers } from './response-handler';
 
 const props = defineProps<IChatProps>();
 
-const genuiConfig: any = inject(GENUI_CONFIG, null);
+const genuiConfig = inject(GENUI_CONFIG, null);
 const { t } = useI18n();
 
 const isAllowFiles = computed(() => {
@@ -482,7 +482,7 @@ defineExpose({
 <template>
   <div
     class="tg-chat-container"
-    :class="{ 'dark': genuiConfig?.theme === 'dark' }"
+    :class="{ 'dark': genuiConfig?.colorScheme === 'dark' }"
     :style="!props.chatConfig?.showThinkingResult ? { '--thinking-display': 'none' } : {}"
   >
     <div
diff --git a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
index e3e9f433..b86a1683 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -1,26 +1,35 @@
 <script setup lang="ts">
-import { TinyConfigProvider } from '@opentiny/vue';
 import { ThemeProvider } from '@opentiny/tiny-robot';
-import ThemeTool, { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
-import { watch, provide, computed, onMounted, ref } from 'vue';
-import type { IMaterials } from '@opentiny/genui-sdk-core';
+import {
+  type IMaterials,
+  type IMaterialsTheme,
+  type ThemeColorScheme,
+  type ThemeDisposer,
+} from '@opentiny/genui-sdk-core';
+import {
+  watch,
+  provide,
+  computed,
+  ref,
+  onBeforeUnmount,
+  defineComponent,
+  h,
+  type Component,
+  type PropType,
+  type VNode,
+} from 'vue';
 import { I18nMessages, useI18n } from '../chat/i18n';
 import { GENUI_I18N, GENUI_CONFIG, GENUI_MATERIALS } from './injection-tokens';
 import { useMediaTheme } from './use-media-theme';
 
 export interface ConfigProviderProps {
-  theme?: 'light' | 'dark' | 'lite' | 'auto';
+  theme?: string;
   id?: string;
   locale?: string;
   i18n?: I18nMessages;
   materials?: IMaterials;
 }
 
-interface IRobotProviderProps {
-  colorMode: 'dark' | 'light';
-  targetElement?: string;
-}
-
 const props = withDefaults(defineProps<ConfigProviderProps>(), {
   id: 'tiny-genui-config-provider',
   locale: 'zh_CN',
@@ -29,35 +38,29 @@ const props = withDefaults(defineProps<ConfigProviderProps>(), {
 const i18n = useI18n();
 provide(GENUI_I18N, i18n);
 
-const transformTheme = (themeConfig: any) => {
-  const newThemeConfig = structuredClone(themeConfig);
-  newThemeConfig.css = newThemeConfig.css.replaceAll(':host', `#${props.id}`).replaceAll(':root', `#${props.id}`);
-  return newThemeConfig;
-};
-
-const themeMap: Record<string, any> = {
-  dark: transformTheme(tinyDarkTheme),
-  lite: transformTheme(tinyOldTheme),
-  light: { css: ' ' },
-};
+const { theme: mediaTheme } = useMediaTheme();
 
-const themeTool = new ThemeTool();
+const materialThemes = computed<IMaterialsTheme[]>(() => {
+  const theme = props.materials?.theme;
+  if (!theme) {
+    return [];
+  }
+  return Array.isArray(theme) ? theme : [theme];
+});
 
-const { theme: mediaTheme } = useMediaTheme();
+const theme = computed(() => props.theme || 'light');
 
-const actualTheme = computed(() => {
-  if (props.theme === 'auto') {
+const colorScheme = computed<ThemeColorScheme>(() => {
+  if (theme.value === 'auto') {
     return mediaTheme.value;
   }
-  return props.theme;
+  return theme.value === 'dark' ? 'dark' : 'light';
 });
 
-const genuiConfig = computed(() => {
-  return {
-    theme: actualTheme.value,
-    id: props.id,
-  };
-});
+const genuiConfig = computed(() => ({
+  colorScheme: colorScheme.value,
+  id: props.id,
+}));
 
 provide(GENUI_CONFIG, genuiConfig);
 
@@ -66,10 +69,7 @@ watch(() => props.materials, (newVal) => {
   Object.assign(internalMaterials, newVal);
 }, { immediate: true });
 
-provide(
-  GENUI_MATERIALS,
-  internalMaterials,
-);
+provide(GENUI_MATERIALS, internalMaterials);
 
 watch(
   () => [props.locale, props.i18n] as const,
@@ -82,39 +82,81 @@ watch(
   { immediate: true },
 );
 
+const rootRef = ref();
+
+function resolveRootEl(value: unknown): HTMLElement | null {
+  if (!value) {
+    return null;
+  }
+  if (value instanceof HTMLElement) {
+    return value;
+  }
+  const el = (value as { $el?: unknown }).$el;
+  return el instanceof HTMLElement ? el : null;
+}
+
+let disposers: ThemeDisposer[] = [];
+
+function clearTheme() {
+  const pending = disposers;
+  disposers = [];
+  pending.forEach((dispose) => dispose());
+}
+
 watch(
-  () => actualTheme.value,
-  (newVal) => {
-    const themeConfig = themeMap[newVal] || themeMap.light;
-    themeTool.changeTheme(themeConfig);
-  },
-  {
-    immediate: true,
+  () => [materialThemes.value, theme.value, mediaTheme.value, props.id, rootRef.value] as const,
+  ([apis, themeValue, systemColorScheme, scopeId, root]) => {
+    clearTheme();
+    const rootEl = resolveRootEl(root);
+    for (const api of apis) {
+      const dispose = api.apply(themeValue, { scopeId, rootEl, systemColorScheme });
+      if (dispose) {
+        disposers.push(dispose);
+      }
+    }
   },
+  { immediate: true },
 );
 
-const providerRef = ref();
-onMounted(() => {
-  providerRef.value?.$el.classList.remove('tiny-config-provider');
-});
+onBeforeUnmount(clearTheme);
 
-const robotProviderProps = computed(() => {
-  const providerProps: IRobotProviderProps = {
-    colorMode: actualTheme.value === 'dark' ? 'dark' : 'light',
-  };
-  if (genuiConfig?.value?.id) {
-    providerProps.targetElement = '#' + genuiConfig.value.id;
-  }
-  return providerProps;
+const ThemeRoots = defineComponent({
+  name: 'ThemeRoots',
+  props: {
+    roots: { type: Array as PropType<Component[]>, required: true },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const children = slots.default?.() ?? [];
+      if (!props.roots.length) {
+        return children;
+      }
+      return props.roots.reduceRight<VNode | VNode[]>(
+        (acc, root) => h(root, {}, () => acc),
+        children,
+      );
+    };
+  },
 });
+
+const themeRoots = computed(() =>
+  materialThemes.value.map((api) => api.Root).filter((root): root is Component => Boolean(root)),
+);
+
+const robotProviderProps = computed(() => ({
+  colorMode: colorScheme.value,
+  targetElement: `#${props.id}`,
+}));
 </script>
 
 <template>
-  <TinyConfigProvider ref="providerRef" class="tg-config-provider" :id="props.id">
+  <div :id="props.id" class="tg-config-provider" ref="rootRef">
     <ThemeProvider v-bind="robotProviderProps">
-      <slot />
+      <ThemeRoots :roots="themeRoots">
+        <slot />
+      </ThemeRoots>
     </ThemeProvider>
-  </TinyConfigProvider>
+  </div>
 </template>
 
 <style scoped>
diff --git a/packages/frameworks/vue/src/config-provider/injection-tokens.ts b/packages/frameworks/vue/src/config-provider/injection-tokens.ts
index df4d7cb6..d6e4fd5e 100644
--- a/packages/frameworks/vue/src/config-provider/injection-tokens.ts
+++ b/packages/frameworks/vue/src/config-provider/injection-tokens.ts
@@ -1,7 +1,11 @@
-import type { InjectionKey } from 'vue';
-import type { IMaterials } from '@opentiny/genui-sdk-core';
+import type { InjectionKey, ComputedRef } from 'vue';
+import type { IMaterials, ThemeColorScheme } from '@opentiny/genui-sdk-core';
 
-export const GENUI_I18N = Symbol('GENUI_I18N');
-export const GENUI_CONFIG = Symbol('GENUI_CONFIG');
+export interface GenuiConfigState {
+  colorScheme: ThemeColorScheme;
+  id: string;
+}
 
+export const GENUI_I18N = Symbol('GENUI_I18N');
+export const GENUI_CONFIG: InjectionKey<ComputedRef<GenuiConfigState>> = Symbol('GENUI_CONFIG');
 export const GENUI_MATERIALS: InjectionKey<IMaterials> = Symbol('GENUI_MATERIALS');
diff --git a/packages/materials/vue-element-plus/src/materials/materials.ts b/packages/materials/vue-element-plus/src/materials/materials.ts
index 9a2cfc47..97766d2c 100644
--- a/packages/materials/vue-element-plus/src/materials/materials.ts
+++ b/packages/materials/vue-element-plus/src/materials/materials.ts
@@ -1,6 +1,7 @@
 import { buildMaterialDefaultValueMap, type IMaterials } from '@opentiny/genui-sdk-core';
 import { materialsMeta } from '../meta';
 import { components } from './components';
+import { createElementPlusMaterialsTheme } from './theme';
 
 const standardRequiredCompleteFieldSelectors = ['[componentName=ElCard] > props > shadow'];
 
@@ -8,4 +9,5 @@ export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
+  theme: createElementPlusMaterialsTheme(),
 };
diff --git a/packages/materials/vue-element-plus/src/materials/theme/index.ts b/packages/materials/vue-element-plus/src/materials/theme/index.ts
new file mode 100644
index 00000000..adb61430
--- /dev/null
+++ b/packages/materials/vue-element-plus/src/materials/theme/index.ts
@@ -0,0 +1,47 @@
+import {
+  type IMaterialsTheme,
+  type ThemeApplyContext,
+  type ThemeColorScheme,
+  type ThemeDescriptor,
+  type ThemeDisposer,
+} from '@opentiny/genui-sdk-core';
+
+const themes: ThemeDescriptor[] = [
+  { id: 'light', label: '浅色', colorScheme: 'light' },
+  { id: 'dark', label: '深色', colorScheme: 'dark' },
+];
+
+const DARK_CLASS = 'dark';
+
+function getScopeElement(ctx: ThemeApplyContext) {
+  return ctx.rootEl ?? (typeof document !== 'undefined' ? document.getElementById(ctx.scopeId) : null);
+}
+
+function resolveColorScheme(theme: string, systemColorScheme: ThemeColorScheme): ThemeColorScheme {
+  if (theme === 'auto') {
+    return systemColorScheme;
+  }
+  return theme === 'dark' ? 'dark' : 'light';
+}
+
+export function createElementPlusMaterialsTheme(): IMaterialsTheme {
+  return {
+    themes,
+    apply(theme: string, ctx: ThemeApplyContext): ThemeDisposer {
+      const el = getScopeElement(ctx);
+      if (!el) {
+        return () => {};
+      }
+
+      if (resolveColorScheme(theme, ctx.systemColorScheme) === 'dark') {
+        el.classList.add(DARK_CLASS);
+      } else {
+        el.classList.remove(DARK_CLASS);
+      }
+
+      return () => {
+        el.classList.remove(DARK_CLASS);
+      };
+    },
+  };
+}
diff --git a/packages/materials/vue-opentiny-vue/package.json b/packages/materials/vue-opentiny-vue/package.json
index 9e87eb83..fdd62703 100644
--- a/packages/materials/vue-opentiny-vue/package.json
+++ b/packages/materials/vue-opentiny-vue/package.json
@@ -35,6 +35,8 @@
   },
   "dependencies": {
     "@opentiny/genui-sdk-core": "workspace:*",
+    "@opentiny/vue-theme": "~3.28.0",
+    "@opentiny/vue-config-provider": "~3.28.0",
     "@opentiny/vue-button": "~3.28.0",
     "@opentiny/vue-card": "~3.28.0",
     "@opentiny/vue-carousel": "~3.28.0",
diff --git a/packages/materials/vue-opentiny-vue/src/materials/materials.ts b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
index ccc4c10d..513dfd2c 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/materials.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
@@ -1,6 +1,7 @@
 import { buildMaterialDefaultValueMap, type IMaterials } from '@opentiny/genui-sdk-core';
 import { materialsMeta, miniMaterialsMeta } from '../meta';
 import { components } from './components';
+import { createOpenTinyMaterialsTheme } from './theme';
 
 const baseRequiredCompleteFieldSelectors = [
   '[componentName=TinyNumeric] > props > controlsPosition',
@@ -16,14 +17,18 @@ const standardRequiredCompleteFieldSelectors = [
   '[componentName^=TinyHuicharts] > props > options > theme',
 ];
 
+const theme = createOpenTinyMaterialsTheme();
+
 export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
+  theme,
 };
 
-export const miniMaterials = {
+export const miniMaterials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: baseRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(miniMaterialsMeta),
+  theme,
 };
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
new file mode 100644
index 00000000..f9717dff
--- /dev/null
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
@@ -0,0 +1,24 @@
+import TinyConfigProvider from '@opentiny/vue-config-provider';
+import { defineComponent, h, onMounted, ref } from 'vue';
+
+export const OpenTinyThemeRoot = defineComponent({
+  name: 'OpenTinyThemeRoot',
+  inheritAttrs: false,
+  setup(_, { slots }) {
+    const providerRef = ref<{ $el?: HTMLElement } | null>(null);
+
+    onMounted(() => {
+      providerRef.value?.$el?.classList.remove('tiny-config-provider');
+    });
+
+    return () =>
+      h(
+        TinyConfigProvider,
+        {
+          ref: providerRef,
+          style: { height: '100%' },
+        },
+        slots,
+      );
+  },
+});
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
new file mode 100644
index 00000000..0d6b4f19
--- /dev/null
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
@@ -0,0 +1,53 @@
+import {
+  type IMaterialsTheme,
+  type ThemeApplyContext,
+  type ThemeColorScheme,
+  type ThemeDescriptor,
+  type ThemeDisposer,
+} from '@opentiny/genui-sdk-core';
+import ThemeTool, { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
+import { OpenTinyThemeRoot } from './ThemeRoot';
+
+const themes: ThemeDescriptor[] = [
+  { id: 'light', label: '浅色', colorScheme: 'light' },
+  { id: 'dark', label: '深色', colorScheme: 'dark' },
+  { id: 'lite', label: '清新', colorScheme: 'light' },
+];
+
+function transformTheme(themeConfig: { css?: string }, scopeId: string) {
+  const next = structuredClone(themeConfig) as { css: string };
+  next.css = (next.css || '').split(':host').join(`#${scopeId}`).split(':root').join(`#${scopeId}`);
+  return next;
+}
+
+function buildThemeConfig(themeId: string, scopeId: string) {
+  if (themeId === 'dark') {
+    return transformTheme(tinyDarkTheme, scopeId);
+  }
+  if (themeId === 'lite') {
+    return transformTheme(tinyOldTheme, scopeId);
+  }
+  return { css: ' ' };
+}
+
+function resolveThemeId(theme: string, systemColorScheme: ThemeColorScheme) {
+  if (themes.some((item) => item.id === theme)) {
+    return theme;
+  }
+  return systemColorScheme === 'dark' ? 'dark' : 'light';
+}
+
+export function createOpenTinyMaterialsTheme(): IMaterialsTheme {
+  return {
+    themes,
+    Root: OpenTinyThemeRoot,
+    apply(theme: string, ctx: ThemeApplyContext): ThemeDisposer {
+      const themeId = resolveThemeId(theme, ctx.systemColorScheme);
+      const themeTool = new ThemeTool();
+      themeTool.changeTheme(buildThemeConfig(themeId, ctx.scopeId));
+      return () => {
+        themeTool.changeTheme({ css: ' ' });
+      };
+    },
+  };
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e2f96a8d..e875421f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -477,6 +477,9 @@ importers:
       '@opentiny/vue-col':
         specifier: ~3.28.0
         version: 3.28.0
+      '@opentiny/vue-config-provider':
+        specifier: ~3.28.0
+        version: 3.28.0
       '@opentiny/vue-date-picker':
         specifier: ~3.28.0
         version: 3.28.0
@@ -561,6 +564,9 @@ importers:
       '@opentiny/vue-tabs':
         specifier: ~3.28.0
         version: 3.28.0
+      '@opentiny/vue-theme':
+        specifier: ~3.28.0
+        version: 3.28.0
       '@opentiny/vue-transfer':
         specifier: ~3.28.0
         version: 3.28.0
diff --git a/sites/playground/web/src/components/AssistantFooter.vue b/sites/playground/web/src/components/AssistantFooter.vue
index 2aa4cae6..6a2da806 100644
--- a/sites/playground/web/src/components/AssistantFooter.vue
+++ b/sites/playground/web/src/components/AssistantFooter.vue
@@ -13,10 +13,10 @@ import { t } from '../i18n';
 const props = defineProps<IBubbleSlotsProps>();
 
 const vAutoTip = AutoTip;
-const genuiConfig: any = inject(GENUI_CONFIG, {});
+const genuiConfig: any = inject(GENUI_CONFIG, null);
 
 const tooltipEffect = computed(() => {
-  return genuiConfig.value?.theme === 'dark' ? 'dark' : 'light';
+  return genuiConfig?.value?.colorScheme === 'dark' ? 'dark' : 'light';
 });
 
 const RefreshIcon = iconRefresh();
diff --git a/sites/playground/web/src/components/UserFooter.vue b/sites/playground/web/src/components/UserFooter.vue
index 6a2a89d8..342fc843 100644
--- a/sites/playground/web/src/components/UserFooter.vue
+++ b/sites/playground/web/src/components/UserFooter.vue
@@ -12,10 +12,10 @@ import { t } from '../i18n';
 
 const props = defineProps<IBubbleSlotsProps>();
 const generating = computed(() => GeneratingStatus.includes(props.messageManager?.messageState.status));
-const genuiConfig: any = inject(GENUI_CONFIG, {});
+const genuiConfig: any = inject(GENUI_CONFIG, null);
 
 const tooltipEffect = computed(() => {
-  return genuiConfig.value?.theme === 'dark' ? 'dark' : 'light';
+  return genuiConfig?.value?.colorScheme === 'dark' ? 'dark' : 'light';
 });
 
 
diff --git a/sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue b/sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue
index bc6ba67d..db1db17f 100644
--- a/sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue
+++ b/sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue
@@ -58,13 +58,9 @@ const {
 } = stream;
 
 watch(
-  () => TinyGenuiConfig?.value?.theme,
-  (theme) => {
-    if (theme === 'dark') {
-      setColorMode(theme);
-    } else {
-      setColorMode('light');
-    }
+  () => TinyGenuiConfig?.value?.colorScheme,
+  (colorScheme) => {
+    setColorMode(colorScheme === 'dark' ? 'dark' : 'light');
   },
   {
     immediate: true,
@@ -334,7 +330,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="tg-chat-container" :class="{ 'dark': TinyGenuiConfig?.theme === 'dark' }">
+  <div class="tg-chat-container" :class="{ 'dark': TinyGenuiConfig?.colorScheme === 'dark' }">
     <div class="messages-container" ref="messagesContainer">
       <tr-bubble-provider :content-renderers="messageRenderers">
         <tr-bubble-list v-if="showMessages.length" :items="showMessages" :roles="roles" auto-scroll> </tr-bubble-list>
diff --git a/sites/playground/web/src/components/genui-template/composables/use-monaco-playground-theme.ts b/sites/playground/web/src/components/genui-template/composables/use-monaco-playground-theme.ts
index b4800eaa..517d144d 100644
--- a/sites/playground/web/src/components/genui-template/composables/use-monaco-playground-theme.ts
+++ b/sites/playground/web/src/components/genui-template/composables/use-monaco-playground-theme.ts
@@ -25,11 +25,15 @@ function useSystemPrefersDark() {
 export function useMonacoPlaygroundTheme(
   fallbackTheme?: () => PlaygroundColorTheme | undefined,
 ): ComputedRef<'vs' | 'vs-dark'> {
-  const genuiConfig = inject(GENUI_CONFIG, null) as { value?: { theme?: PlaygroundColorTheme } } | null;
+  const genuiConfig = inject(GENUI_CONFIG, null) as { value?: { colorScheme?: 'light' | 'dark' } } | null;
   const systemPrefersDark = useSystemPrefersDark();
 
   return computed(() => {
-    const raw = fallbackTheme?.() ?? genuiConfig?.value?.theme ?? 'light';
+    const colorScheme = genuiConfig?.value?.colorScheme;
+    if (colorScheme) {
+      return colorScheme === 'dark' ? 'vs-dark' : 'vs';
+    }
+    const raw = fallbackTheme?.() ?? 'light';
     const isDark = raw === 'dark' || (raw === 'auto' && systemPrefersDark.value);
     return isDark ? 'vs-dark' : 'vs';
   });

From 424626311771685c09d680f94d4aed62eeb145ef Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Tue, 18 Aug 2026 09:26:21 +0800
Subject: [PATCH 02/13] refactor(genui-sdk-vue): update theme application to
 return structured results and enhance color scheme resolution

---
 packages/core/src/material/materials-theme.ts | 29 ++++++++++++++-
 .../src/config-provider/ConfigProvider.vue    | 37 +++++++++++--------
 .../src/materials/theme/index.ts              | 25 +++++++------
 .../src/materials/theme/index.ts              | 20 +++++-----
 4 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/packages/core/src/material/materials-theme.ts b/packages/core/src/material/materials-theme.ts
index 01d30f82..0b240b26 100644
--- a/packages/core/src/material/materials-theme.ts
+++ b/packages/core/src/material/materials-theme.ts
@@ -10,12 +10,39 @@ export interface ThemeApplyContext {
   scopeId: string;
   rootEl?: HTMLElement | null;
   systemColorScheme: ThemeColorScheme;
+  colorScheme?: ThemeColorScheme;
 }
 
 export type ThemeDisposer = () => void;
 
+export interface ThemeApplyResult {
+  id: string;
+  dispose: ThemeDisposer;
+}
+
 export interface IMaterialsTheme {
   themes?: ThemeDescriptor[];
-  apply(theme: string, ctx: ThemeApplyContext): void | ThemeDisposer;
+  apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult;
   Root?: unknown;
 }
+
+export function lookupColorScheme(
+  themeId: string,
+  themes: ThemeDescriptor[] | undefined,
+  fallback: ThemeColorScheme,
+): ThemeColorScheme {
+  return themes?.find((item) => item.id === themeId)?.colorScheme ?? fallback;
+}
+
+export function resolveColorSchemeFromApplied(
+  results: { themes?: ThemeDescriptor[]; id: string }[],
+  fallback: ThemeColorScheme,
+): ThemeColorScheme {
+  for (const item of results) {
+    const scheme = item.themes?.find((theme) => theme.id === item.id)?.colorScheme;
+    if (scheme) {
+      return scheme;
+    }
+  }
+  return fallback;
+}
diff --git a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
index b86a1683..20210a20 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -3,8 +3,9 @@ import { ThemeProvider } from '@opentiny/tiny-robot';
 import {
   type IMaterials,
   type IMaterialsTheme,
+  type ThemeApplyResult,
   type ThemeColorScheme,
-  type ThemeDisposer,
+  resolveColorSchemeFromApplied,
 } from '@opentiny/genui-sdk-core';
 import {
   watch,
@@ -50,12 +51,7 @@ const materialThemes = computed<IMaterialsTheme[]>(() => {
 
 const theme = computed(() => props.theme || 'light');
 
-const colorScheme = computed<ThemeColorScheme>(() => {
-  if (theme.value === 'auto') {
-    return mediaTheme.value;
-  }
-  return theme.value === 'dark' ? 'dark' : 'light';
-});
+const colorScheme = ref<ThemeColorScheme>('light');
 
 const genuiConfig = computed(() => ({
   colorScheme: colorScheme.value,
@@ -95,12 +91,12 @@ function resolveRootEl(value: unknown): HTMLElement | null {
   return el instanceof HTMLElement ? el : null;
 }
 
-let disposers: ThemeDisposer[] = [];
+let applied: ThemeApplyResult[] = [];
 
 function clearTheme() {
-  const pending = disposers;
-  disposers = [];
-  pending.forEach((dispose) => dispose());
+  const pending = applied;
+  applied = [];
+  pending.forEach((item) => item.dispose());
 }
 
 watch(
@@ -108,12 +104,23 @@ watch(
   ([apis, themeValue, systemColorScheme, scopeId, root]) => {
     clearTheme();
     const rootEl = resolveRootEl(root);
+    const claimedScheme = apis
+      .flatMap((api) => api.themes ?? [])
+      .find((item) => item.id === themeValue)?.colorScheme;
+    const next: { themes?: IMaterialsTheme['themes']; id: string }[] = [];
+
     for (const api of apis) {
-      const dispose = api.apply(themeValue, { scopeId, rootEl, systemColorScheme });
-      if (dispose) {
-        disposers.push(dispose);
-      }
+      const result = api.apply(themeValue, {
+        scopeId,
+        rootEl,
+        systemColorScheme,
+        colorScheme: claimedScheme,
+      });
+      applied.push(result);
+      next.push({ themes: api.themes, id: result.id });
     }
+
+    colorScheme.value = resolveColorSchemeFromApplied(next, systemColorScheme);
   },
   { immediate: true },
 );
diff --git a/packages/materials/vue-element-plus/src/materials/theme/index.ts b/packages/materials/vue-element-plus/src/materials/theme/index.ts
index adb61430..e85ae18a 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/index.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/index.ts
@@ -1,9 +1,8 @@
 import {
   type IMaterialsTheme,
   type ThemeApplyContext,
-  type ThemeColorScheme,
+  type ThemeApplyResult,
   type ThemeDescriptor,
-  type ThemeDisposer,
 } from '@opentiny/genui-sdk-core';
 
 const themes: ThemeDescriptor[] = [
@@ -17,30 +16,34 @@ function getScopeElement(ctx: ThemeApplyContext) {
   return ctx.rootEl ?? (typeof document !== 'undefined' ? document.getElementById(ctx.scopeId) : null);
 }
 
-function resolveColorScheme(theme: string, systemColorScheme: ThemeColorScheme): ThemeColorScheme {
-  if (theme === 'auto') {
-    return systemColorScheme;
+function resolveThemeId(theme: string, ctx: ThemeApplyContext) {
+  if (themes.some((item) => item.id === theme)) {
+    return theme;
   }
-  return theme === 'dark' ? 'dark' : 'light';
+  return ctx.colorScheme ?? ctx.systemColorScheme;
 }
 
 export function createElementPlusMaterialsTheme(): IMaterialsTheme {
   return {
     themes,
-    apply(theme: string, ctx: ThemeApplyContext): ThemeDisposer {
+    apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
+      const id = resolveThemeId(theme, ctx);
       const el = getScopeElement(ctx);
       if (!el) {
-        return () => {};
+        return { id, dispose: () => {} };
       }
 
-      if (resolveColorScheme(theme, ctx.systemColorScheme) === 'dark') {
+      if (id === 'dark') {
         el.classList.add(DARK_CLASS);
       } else {
         el.classList.remove(DARK_CLASS);
       }
 
-      return () => {
-        el.classList.remove(DARK_CLASS);
+      return {
+        id,
+        dispose: () => {
+          el.classList.remove(DARK_CLASS);
+        },
       };
     },
   };
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
index 0d6b4f19..501f4ce0 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
@@ -1,9 +1,8 @@
 import {
   type IMaterialsTheme,
   type ThemeApplyContext,
-  type ThemeColorScheme,
+  type ThemeApplyResult,
   type ThemeDescriptor,
-  type ThemeDisposer,
 } from '@opentiny/genui-sdk-core';
 import ThemeTool, { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
 import { OpenTinyThemeRoot } from './ThemeRoot';
@@ -30,23 +29,26 @@ function buildThemeConfig(themeId: string, scopeId: string) {
   return { css: ' ' };
 }
 
-function resolveThemeId(theme: string, systemColorScheme: ThemeColorScheme) {
+function resolveThemeId(theme: string, ctx: ThemeApplyContext) {
   if (themes.some((item) => item.id === theme)) {
     return theme;
   }
-  return systemColorScheme === 'dark' ? 'dark' : 'light';
+  return ctx.colorScheme ?? ctx.systemColorScheme;
 }
 
 export function createOpenTinyMaterialsTheme(): IMaterialsTheme {
   return {
     themes,
     Root: OpenTinyThemeRoot,
-    apply(theme: string, ctx: ThemeApplyContext): ThemeDisposer {
-      const themeId = resolveThemeId(theme, ctx.systemColorScheme);
+    apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
+      const id = resolveThemeId(theme, ctx);
       const themeTool = new ThemeTool();
-      themeTool.changeTheme(buildThemeConfig(themeId, ctx.scopeId));
-      return () => {
-        themeTool.changeTheme({ css: ' ' });
+      themeTool.changeTheme(buildThemeConfig(id, ctx.scopeId));
+      return {
+        id,
+        dispose: () => {
+          themeTool.changeTheme({ css: ' ' });
+        },
       };
     },
   };

From 9acb6dbc8494114704c358d1e44ec614103c61fe Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Tue, 18 Aug 2026 17:10:12 +0800
Subject: [PATCH 03/13] fix: enhance theme application with root instance
 management and dynamic props

---
 packages/core/src/material/materials-theme.ts |  4 ++
 .../src/config-provider/ConfigProvider.vue    | 48 +++++++++++++++----
 .../src/materials/theme/ThemeRoot.ts          | 10 +++-
 .../src/materials/theme/index.ts              | 11 +++++
 projects/tiny-schema-renderer                 |  2 +-
 5 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/material/materials-theme.ts b/packages/core/src/material/materials-theme.ts
index 0b240b26..a0c9e4f6 100644
--- a/packages/core/src/material/materials-theme.ts
+++ b/packages/core/src/material/materials-theme.ts
@@ -6,11 +6,14 @@ export interface ThemeDescriptor {
   colorScheme?: ThemeColorScheme;
 }
 
+export type ThemeRootProps = Record<string, unknown>;
+
 export interface ThemeApplyContext {
   scopeId: string;
   rootEl?: HTMLElement | null;
   systemColorScheme: ThemeColorScheme;
   colorScheme?: ThemeColorScheme;
+  rootInstance?: unknown;
 }
 
 export type ThemeDisposer = () => void;
@@ -18,6 +21,7 @@ export type ThemeDisposer = () => void;
 export interface ThemeApplyResult {
   id: string;
   dispose: ThemeDisposer;
+  props?: ThemeRootProps;
 }
 
 export interface IMaterialsTheme {
diff --git a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
index 20210a20..6c0cbec3 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -3,8 +3,10 @@ import { ThemeProvider } from '@opentiny/tiny-robot';
 import {
   type IMaterials,
   type IMaterialsTheme,
+  type ThemeApplyContext,
   type ThemeApplyResult,
   type ThemeColorScheme,
+  type ThemeRootProps,
   resolveColorSchemeFromApplied,
 } from '@opentiny/genui-sdk-core';
 import {
@@ -12,6 +14,7 @@ import {
   provide,
   computed,
   ref,
+  shallowRef,
   onBeforeUnmount,
   defineComponent,
   h,
@@ -79,6 +82,8 @@ watch(
 );
 
 const rootRef = ref();
+const rootInstances = shallowRef<unknown[]>([]);
+const themeRootProps = ref<ThemeRootProps[]>([]);
 
 function resolveRootEl(value: unknown): HTMLElement | null {
   if (!value) {
@@ -91,6 +96,16 @@ function resolveRootEl(value: unknown): HTMLElement | null {
   return el instanceof HTMLElement ? el : null;
 }
 
+function setRootInstance(index: number, instance: unknown) {
+  const next = instance || undefined;
+  if (rootInstances.value[index] === next) {
+    return;
+  }
+  const arr = [...rootInstances.value];
+  arr[index] = next;
+  rootInstances.value = arr;
+}
+
 let applied: ThemeApplyResult[] = [];
 
 function clearTheme() {
@@ -100,26 +115,31 @@ function clearTheme() {
 }
 
 watch(
-  () => [materialThemes.value, theme.value, mediaTheme.value, props.id, rootRef.value] as const,
-  ([apis, themeValue, systemColorScheme, scopeId, root]) => {
+  () => [materialThemes.value, theme.value, mediaTheme.value, props.id, rootRef.value, rootInstances.value] as const,
+  ([apis, themeValue, systemColorScheme, scopeId, root, instances]) => {
     clearTheme();
     const rootEl = resolveRootEl(root);
     const claimedScheme = apis
       .flatMap((api) => api.themes ?? [])
       .find((item) => item.id === themeValue)?.colorScheme;
     const next: { themes?: IMaterialsTheme['themes']; id: string }[] = [];
+    const computedProps: ThemeRootProps[] = [];
 
-    for (const api of apis) {
-      const result = api.apply(themeValue, {
+    for (const [index, api] of apis.entries()) {
+      const ctx = {
         scopeId,
         rootEl,
         systemColorScheme,
         colorScheme: claimedScheme,
-      });
+        rootInstance: instances[index],
+      };
+      const result = api.apply(themeValue, ctx);
+      computedProps[index] = result.props ?? {};
       applied.push(result);
       next.push({ themes: api.themes, id: result.id });
     }
 
+    themeRootProps.value = computedProps;
     colorScheme.value = resolveColorSchemeFromApplied(next, systemColorScheme);
   },
   { immediate: true },
@@ -131,6 +151,8 @@ const ThemeRoots = defineComponent({
   name: 'ThemeRoots',
   props: {
     roots: { type: Array as PropType<Component[]>, required: true },
+    rootPropsList: { type: Array as PropType<ThemeRootProps[]>, required: true },
+    onRootInstance: { type: Function as PropType<(index: number, instance: unknown) => void>, required: true },
   },
   setup(props, { slots }) {
     return () => {
@@ -139,15 +161,23 @@ const ThemeRoots = defineComponent({
         return children;
       }
       return props.roots.reduceRight<VNode | VNode[]>(
-        (acc, root) => h(root, {}, () => acc),
+        (acc, root, index) =>
+          h(root, { ...(props.rootPropsList[index] ?? {}), ref: (el) => props.onRootInstance(index, el) }, () => acc),
         children,
       );
     };
   },
 });
 
-const themeRoots = computed(() =>
-  materialThemes.value.map((api) => api.Root).filter((root): root is Component => Boolean(root)),
+const PassthroughRoot = defineComponent({
+  name: 'PassthroughRoot',
+  setup(_, { slots }) {
+    return () => slots.default?.() ?? [];
+  },
+});
+
+const themeRoots = computed<Component[]>(() =>
+  materialThemes.value.map((api) => (api.Root ? (api.Root as Component) : PassthroughRoot)),
 );
 
 const robotProviderProps = computed(() => ({
@@ -159,7 +189,7 @@ const robotProviderProps = computed(() => ({
 <template>
   <div :id="props.id" class="tg-config-provider" ref="rootRef">
     <ThemeProvider v-bind="robotProviderProps">
-      <ThemeRoots :roots="themeRoots">
+      <ThemeRoots :roots="themeRoots" :root-props-list="themeRootProps" :on-root-instance="setRootInstance">
         <slot />
       </ThemeRoots>
     </ThemeProvider>
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
index f9717dff..7b6e9f44 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
@@ -4,19 +4,27 @@ import { defineComponent, h, onMounted, ref } from 'vue';
 export const OpenTinyThemeRoot = defineComponent({
   name: 'OpenTinyThemeRoot',
   inheritAttrs: false,
-  setup(_, { slots }) {
+  expose: ['setColorScheme'],
+  setup(_, { slots, attrs, expose }) {
     const providerRef = ref<{ $el?: HTMLElement } | null>(null);
 
     onMounted(() => {
       providerRef.value?.$el?.classList.remove('tiny-config-provider');
     });
 
+    function setColorScheme(scheme: 'light' | 'dark') {
+      providerRef.value?.$el?.setAttribute('data-color-scheme', scheme);
+    }
+
+    expose({ setColorScheme });
+
     return () =>
       h(
         TinyConfigProvider,
         {
           ref: providerRef,
           style: { height: '100%' },
+          ...attrs,
         },
         slots,
       );
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
index 501f4ce0..9580cd79 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
@@ -44,8 +44,19 @@ export function createOpenTinyMaterialsTheme(): IMaterialsTheme {
       const id = resolveThemeId(theme, ctx);
       const themeTool = new ThemeTool();
       themeTool.changeTheme(buildThemeConfig(id, ctx.scopeId));
+      // 通过 Root 实例句柄调用其暴露的方法
+      const instance = ctx.rootInstance as { setColorScheme?: (scheme: 'light' | 'dark') => void } | undefined;
+      instance?.setColorScheme?.(id === 'dark' ? 'dark' : 'light');
       return {
         id,
+        // 渲染后动态下发给 Root 组件的 props（TinyConfigProvider 对 theme 有响应式 watch）
+        props: {
+          theme: {
+            data: {
+              'tv-base-color-brand': id === 'dark' ? '#B3B3B3' : '#1476ff',
+            },
+          },
+        },
         dispose: () => {
           themeTool.changeTheme({ css: ' ' });
         },
diff --git a/projects/tiny-schema-renderer b/projects/tiny-schema-renderer
index 52ce2c46..20c48092 160000
--- a/projects/tiny-schema-renderer
+++ b/projects/tiny-schema-renderer
@@ -1 +1 @@
-Subproject commit 52ce2c466d8be21baa156243de8c421382d21f03
+Subproject commit 20c48092424d693a25000be3465a14e3daf3341d

From 04c6924dd221145b70318e36f4b731fba0a04fb6 Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Wed, 26 Aug 2026 18:08:33 +0800
Subject: [PATCH 04/13] fix: optimize materials theme switch

---
 packages/core/src/material/materials-theme.ts |  33 +----
 .../src/config-provider/ConfigProvider.vue    | 118 ++++++------------
 .../src/materials/theme/index.ts              |  59 ++++-----
 .../src/materials/theme/ThemeRoot.ts          |  54 ++++++--
 .../src/materials/theme/index.ts              |  67 +++++-----
 5 files changed, 143 insertions(+), 188 deletions(-)

diff --git a/packages/core/src/material/materials-theme.ts b/packages/core/src/material/materials-theme.ts
index a0c9e4f6..df144145 100644
--- a/packages/core/src/material/materials-theme.ts
+++ b/packages/core/src/material/materials-theme.ts
@@ -2,51 +2,22 @@ export type ThemeColorScheme = 'light' | 'dark';
 
 export interface ThemeDescriptor {
   id: string;
-  label?: string;
   colorScheme?: ThemeColorScheme;
 }
 
-export type ThemeRootProps = Record<string, unknown>;
-
 export interface ThemeApplyContext {
-  scopeId: string;
-  rootEl?: HTMLElement | null;
   systemColorScheme: ThemeColorScheme;
-  colorScheme?: ThemeColorScheme;
-  rootInstance?: unknown;
 }
 
 export type ThemeDisposer = () => void;
 
 export interface ThemeApplyResult {
-  id: string;
+  descriptor: ThemeDescriptor;
   dispose: ThemeDisposer;
-  props?: ThemeRootProps;
+  Root?: unknown;
 }
 
 export interface IMaterialsTheme {
   themes?: ThemeDescriptor[];
   apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult;
-  Root?: unknown;
-}
-
-export function lookupColorScheme(
-  themeId: string,
-  themes: ThemeDescriptor[] | undefined,
-  fallback: ThemeColorScheme,
-): ThemeColorScheme {
-  return themes?.find((item) => item.id === themeId)?.colorScheme ?? fallback;
-}
-
-export function resolveColorSchemeFromApplied(
-  results: { themes?: ThemeDescriptor[]; id: string }[],
-  fallback: ThemeColorScheme,
-): ThemeColorScheme {
-  for (const item of results) {
-    const scheme = item.themes?.find((theme) => theme.id === item.id)?.colorScheme;
-    if (scheme) {
-      return scheme;
-    }
-  }
-  return fallback;
 }
diff --git a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
index 6c0cbec3..a7419daa 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -3,11 +3,8 @@ import { ThemeProvider } from '@opentiny/tiny-robot';
 import {
   type IMaterials,
   type IMaterialsTheme,
-  type ThemeApplyContext,
   type ThemeApplyResult,
   type ThemeColorScheme,
-  type ThemeRootProps,
-  resolveColorSchemeFromApplied,
 } from '@opentiny/genui-sdk-core';
 import {
   watch,
@@ -81,30 +78,23 @@ watch(
   { immediate: true },
 );
 
-const rootRef = ref();
-const rootInstances = shallowRef<unknown[]>([]);
-const themeRootProps = ref<ThemeRootProps[]>([]);
-
-function resolveRootEl(value: unknown): HTMLElement | null {
-  if (!value) {
-    return null;
-  }
-  if (value instanceof HTMLElement) {
-    return value;
-  }
-  const el = (value as { $el?: unknown }).$el;
-  return el instanceof HTMLElement ? el : null;
-}
+const ThemeRoots = defineComponent({
+  name: 'ThemeRoots',
+  props: {
+    roots: { type: Array as PropType<Component[]>, required: true },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const children = slots.default?.() ?? [];
+      return props.roots.reduceRight<VNode | VNode[]>(
+        (acc, root) => h(root, {}, () => acc),
+        children,
+      );
+    };
+  },
+});
 
-function setRootInstance(index: number, instance: unknown) {
-  const next = instance || undefined;
-  if (rootInstances.value[index] === next) {
-    return;
-  }
-  const arr = [...rootInstances.value];
-  arr[index] = next;
-  rootInstances.value = arr;
-}
+const themeRoots = shallowRef<Component[]>([]);
 
 let applied: ThemeApplyResult[] = [];
 
@@ -115,71 +105,33 @@ function clearTheme() {
 }
 
 watch(
-  () => [materialThemes.value, theme.value, mediaTheme.value, props.id, rootRef.value, rootInstances.value] as const,
-  ([apis, themeValue, systemColorScheme, scopeId, root, instances]) => {
+  () => [materialThemes.value, theme.value, mediaTheme.value, props.id] as const,
+  ([apis, themeValue, systemColorScheme]) => {
     clearTheme();
-    const rootEl = resolveRootEl(root);
-    const claimedScheme = apis
-      .flatMap((api) => api.themes ?? [])
-      .find((item) => item.id === themeValue)?.colorScheme;
-    const next: { themes?: IMaterialsTheme['themes']; id: string }[] = [];
-    const computedProps: ThemeRootProps[] = [];
-
-    for (const [index, api] of apis.entries()) {
-      const ctx = {
-        scopeId,
-        rootEl,
-        systemColorScheme,
-        colorScheme: claimedScheme,
-        rootInstance: instances[index],
-      };
-      const result = api.apply(themeValue, ctx);
-      computedProps[index] = result.props ?? {};
+    // 原始 theme（含 auto）原样下发，物料用 ctx.systemColorScheme 自行解析
+    const results: ThemeApplyResult[] = [];
+    const roots: Component[] = [];
+
+    for (const api of apis) {
+      const result = api.apply(themeValue, { systemColorScheme });
+      if (result.Root) {
+        roots.push(result.Root as Component);
+      }
+      results.push(result);
       applied.push(result);
-      next.push({ themes: api.themes, id: result.id });
     }
 
-    themeRootProps.value = computedProps;
-    colorScheme.value = resolveColorSchemeFromApplied(next, systemColorScheme);
+    themeRoots.value = roots;
+    // 取第一个声明了 colorScheme 的落地结果（first-wins），否则跟随系统
+    colorScheme.value =
+      results.find((result) => result.descriptor.colorScheme)?.descriptor.colorScheme ??
+      systemColorScheme;
   },
   { immediate: true },
 );
 
 onBeforeUnmount(clearTheme);
 
-const ThemeRoots = defineComponent({
-  name: 'ThemeRoots',
-  props: {
-    roots: { type: Array as PropType<Component[]>, required: true },
-    rootPropsList: { type: Array as PropType<ThemeRootProps[]>, required: true },
-    onRootInstance: { type: Function as PropType<(index: number, instance: unknown) => void>, required: true },
-  },
-  setup(props, { slots }) {
-    return () => {
-      const children = slots.default?.() ?? [];
-      if (!props.roots.length) {
-        return children;
-      }
-      return props.roots.reduceRight<VNode | VNode[]>(
-        (acc, root, index) =>
-          h(root, { ...(props.rootPropsList[index] ?? {}), ref: (el) => props.onRootInstance(index, el) }, () => acc),
-        children,
-      );
-    };
-  },
-});
-
-const PassthroughRoot = defineComponent({
-  name: 'PassthroughRoot',
-  setup(_, { slots }) {
-    return () => slots.default?.() ?? [];
-  },
-});
-
-const themeRoots = computed<Component[]>(() =>
-  materialThemes.value.map((api) => (api.Root ? (api.Root as Component) : PassthroughRoot)),
-);
-
 const robotProviderProps = computed(() => ({
   colorMode: colorScheme.value,
   targetElement: `#${props.id}`,
@@ -187,9 +139,9 @@ const robotProviderProps = computed(() => ({
 </script>
 
 <template>
-  <div :id="props.id" class="tg-config-provider" ref="rootRef">
+  <div :id="props.id" class="tg-config-provider">
     <ThemeProvider v-bind="robotProviderProps">
-      <ThemeRoots :roots="themeRoots" :root-props-list="themeRootProps" :on-root-instance="setRootInstance">
+      <ThemeRoots :roots="themeRoots">
         <slot />
       </ThemeRoots>
     </ThemeProvider>
diff --git a/packages/materials/vue-element-plus/src/materials/theme/index.ts b/packages/materials/vue-element-plus/src/materials/theme/index.ts
index e85ae18a..4a8e9bb9 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/index.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/index.ts
@@ -2,48 +2,49 @@ import {
   type IMaterialsTheme,
   type ThemeApplyContext,
   type ThemeApplyResult,
+  type ThemeColorScheme,
   type ThemeDescriptor,
 } from '@opentiny/genui-sdk-core';
+import { defineComponent, h, ref } from 'vue';
 
-const themes: ThemeDescriptor[] = [
-  { id: 'light', label: '浅色', colorScheme: 'light' },
-  { id: 'dark', label: '深色', colorScheme: 'dark' },
-];
+const darkFlag = ref(false);
 
-const DARK_CLASS = 'dark';
+const ElementPlusThemeRoot = defineComponent({
+  name: 'ElementPlusThemeRoot',
+  setup(_, { slots }) {
+    return () =>
+      h('div', { class: { dark: darkFlag.value }, style: { height: '100%' } }, slots.default?.());
+  },
+});
 
-function getScopeElement(ctx: ThemeApplyContext) {
-  return ctx.rootEl ?? (typeof document !== 'undefined' ? document.getElementById(ctx.scopeId) : null);
-}
+const themes: ThemeDescriptor[] = [
+  { id: 'light', colorScheme: 'light' },
+  { id: 'dark', colorScheme: 'dark' },
+];
 
-function resolveThemeId(theme: string, ctx: ThemeApplyContext) {
-  if (themes.some((item) => item.id === theme)) {
-    return theme;
-  }
-  return ctx.colorScheme ?? ctx.systemColorScheme;
+function resolveDescriptor(
+  theme: string,
+  systemColorScheme: ThemeColorScheme,
+): ThemeDescriptor {
+  return (
+    themes.find((item) => item.id === theme) ?? {
+      id: systemColorScheme,
+      colorScheme: systemColorScheme,
+    }
+  );
 }
 
 export function createElementPlusMaterialsTheme(): IMaterialsTheme {
   return {
     themes,
     apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
-      const id = resolveThemeId(theme, ctx);
-      const el = getScopeElement(ctx);
-      if (!el) {
-        return { id, dispose: () => {} };
-      }
-
-      if (id === 'dark') {
-        el.classList.add(DARK_CLASS);
-      } else {
-        el.classList.remove(DARK_CLASS);
-      }
-
+      const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
+      // dark 状态写入模块级 ref，Root 渲染时按需打 class（副作用收拢在 Root，apply 无 DOM 副作用）
+      darkFlag.value = descriptor.colorScheme === 'dark';
       return {
-        id,
-        dispose: () => {
-          el.classList.remove(DARK_CLASS);
-        },
+        descriptor,
+        Root: ElementPlusThemeRoot,
+        dispose: () => {},
       };
     },
   };
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
index 7b6e9f44..4a1a2f2b 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
@@ -1,22 +1,57 @@
 import TinyConfigProvider from '@opentiny/vue-config-provider';
-import { defineComponent, h, onMounted, ref } from 'vue';
+import ThemeTool from '@opentiny/vue-theme/theme-tool';
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+
+const SCOPE_ATTR = 'data-genui-theme-scope';
+
+export interface OpenTinyThemeState {
+  themeConfig: { css: string };
+  colorScheme: 'light' | 'dark';
+}
+
+// Root 自持的主题配置：apply 通过 setOpenTinyThemeState 写入，Root 内部响应式消费
+const themeState = shallowRef<OpenTinyThemeState>({ themeConfig: { css: ' ' }, colorScheme: 'light' });
+
+export function setOpenTinyThemeState(state: OpenTinyThemeState) {
+  themeState.value = state;
+}
+
+// 把 :host / :root 改写为作用域自身的 data 属性选择器，注入 document 后只对自身子树生效
+function scopeThemeConfig(themeConfig: { css?: string }, el: HTMLElement): { css: string } {
+  el.setAttribute(SCOPE_ATTR, '');
+  const selector = `[${SCOPE_ATTR}]`;
+  const next: { css: string } = { css: themeConfig.css || '' };
+  next.css = next.css.split(':host').join(selector).split(':root').join(selector);
+  return next;
+}
 
 export const OpenTinyThemeRoot = defineComponent({
   name: 'OpenTinyThemeRoot',
   inheritAttrs: false,
-  expose: ['setColorScheme'],
-  setup(_, { slots, attrs, expose }) {
+  setup(_, { slots, attrs }) {
     const providerRef = ref<{ $el?: HTMLElement } | null>(null);
+    const themeTool = new ThemeTool();
+
+    function applyTheme() {
+      const el = providerRef.value?.$el;
+      if (!el) {
+        return;
+      }
+      const { themeConfig, colorScheme } = themeState.value;
+      themeTool.changeTheme(scopeThemeConfig(themeConfig, el));
+      el.setAttribute('data-color-scheme', colorScheme === 'dark' ? 'dark' : 'light');
+    }
 
     onMounted(() => {
       providerRef.value?.$el?.classList.remove('tiny-config-provider');
+      applyTheme();
     });
 
-    function setColorScheme(scheme: 'light' | 'dark') {
-      providerRef.value?.$el?.setAttribute('data-color-scheme', scheme);
-    }
+    watch(themeState, applyTheme);
 
-    expose({ setColorScheme });
+    onBeforeUnmount(() => {
+      themeTool.changeTheme({ css: ' ' });
+    });
 
     return () =>
       h(
@@ -24,6 +59,11 @@ export const OpenTinyThemeRoot = defineComponent({
         {
           ref: providerRef,
           style: { height: '100%' },
+          theme: {
+            data: {
+              'tv-base-color-brand': themeState.value.colorScheme === 'dark' ? '#B3B3B3' : '#1476ff',
+            },
+          },
           ...attrs,
         },
         slots,
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
index 9580cd79..6a7d41a2 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
@@ -2,64 +2,55 @@ import {
   type IMaterialsTheme,
   type ThemeApplyContext,
   type ThemeApplyResult,
+  type ThemeColorScheme,
   type ThemeDescriptor,
 } from '@opentiny/genui-sdk-core';
-import ThemeTool, { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
-import { OpenTinyThemeRoot } from './ThemeRoot';
+import { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
+import { OpenTinyThemeRoot, setOpenTinyThemeState } from './ThemeRoot';
 
 const themes: ThemeDescriptor[] = [
-  { id: 'light', label: '浅色', colorScheme: 'light' },
-  { id: 'dark', label: '深色', colorScheme: 'dark' },
-  { id: 'lite', label: '清新', colorScheme: 'light' },
+  { id: 'light', colorScheme: 'light' },
+  { id: 'dark', colorScheme: 'dark' },
+  { id: 'lite', colorScheme: 'light' },
 ];
 
-function transformTheme(themeConfig: { css?: string }, scopeId: string) {
-  const next = structuredClone(themeConfig) as { css: string };
-  next.css = (next.css || '').split(':host').join(`#${scopeId}`).split(':root').join(`#${scopeId}`);
-  return next;
+function resolveDescriptor(
+  theme: string,
+  systemColorScheme: ThemeColorScheme,
+): ThemeDescriptor {
+  return (
+    themes.find((item) => item.id === theme) ?? {
+      id: systemColorScheme,
+      colorScheme: systemColorScheme,
+    }
+  );
 }
 
-function buildThemeConfig(themeId: string, scopeId: string) {
+// 只取 css 部分（data 品牌色由 Root 按 colorScheme 自行生成），作用域改写由 Root 完成
+function buildThemeConfig(themeId: string): { css: string } {
   if (themeId === 'dark') {
-    return transformTheme(tinyDarkTheme, scopeId);
+    return { css: tinyDarkTheme.css };
   }
   if (themeId === 'lite') {
-    return transformTheme(tinyOldTheme, scopeId);
+    return { css: tinyOldTheme.css };
   }
   return { css: ' ' };
 }
 
-function resolveThemeId(theme: string, ctx: ThemeApplyContext) {
-  if (themes.some((item) => item.id === theme)) {
-    return theme;
-  }
-  return ctx.colorScheme ?? ctx.systemColorScheme;
-}
-
 export function createOpenTinyMaterialsTheme(): IMaterialsTheme {
   return {
     themes,
-    Root: OpenTinyThemeRoot,
     apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
-      const id = resolveThemeId(theme, ctx);
-      const themeTool = new ThemeTool();
-      themeTool.changeTheme(buildThemeConfig(id, ctx.scopeId));
-      // 通过 Root 实例句柄调用其暴露的方法
-      const instance = ctx.rootInstance as { setColorScheme?: (scheme: 'light' | 'dark') => void } | undefined;
-      instance?.setColorScheme?.(id === 'dark' ? 'dark' : 'light');
+      const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
+      // 主题数据喂给 Root（模块级状态），Root 内部响应式注入/清理，apply 无副作用
+      setOpenTinyThemeState({
+        themeConfig: buildThemeConfig(descriptor.id),
+        colorScheme: descriptor.colorScheme ?? 'light',
+      });
       return {
-        id,
-        // 渲染后动态下发给 Root 组件的 props（TinyConfigProvider 对 theme 有响应式 watch）
-        props: {
-          theme: {
-            data: {
-              'tv-base-color-brand': id === 'dark' ? '#B3B3B3' : '#1476ff',
-            },
-          },
-        },
-        dispose: () => {
-          themeTool.changeTheme({ css: ' ' });
-        },
+        descriptor,
+        Root: OpenTinyThemeRoot,
+        dispose: () => {},
       };
     },
   };

From 1b23e8f720a0f60e6b09c4c9280de692cb4ee29f Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Fri, 28 Aug 2026 10:03:22 +0800
Subject: [PATCH 05/13] fix: remove null default value

---
 packages/frameworks/vue/src/chat/GenuiChat.vue                  | 2 +-
 sites/playground/web/src/components/AssistantFooter.vue         | 2 +-
 sites/playground/web/src/components/UserFooter.vue              | 2 +-
 .../web/src/components/genui-template/GenuiTemplateChat.vue     | 2 +-
 .../genui-template/composables/use-monaco-playground-theme.ts   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frameworks/vue/src/chat/GenuiChat.vue b/packages/frameworks/vue/src/chat/GenuiChat.vue
index b661eeb2..a4dd1cbf 100644
--- a/packages/frameworks/vue/src/chat/GenuiChat.vue
+++ b/packages/frameworks/vue/src/chat/GenuiChat.vue
@@ -37,7 +37,7 @@ import { IResponseHandler, defaultResponseHandlers } from './response-handler';
 
 const props = defineProps<IChatProps>();
 
-const genuiConfig = inject(GENUI_CONFIG, null);
+const genuiConfig = inject(GENUI_CONFIG);
 const { t } = useI18n();
 
 const isAllowFiles = computed(() => {
diff --git a/sites/playground/web/src/components/AssistantFooter.vue b/sites/playground/web/src/components/AssistantFooter.vue
index 6a2da806..3d45ddaf 100644
--- a/sites/playground/web/src/components/AssistantFooter.vue
+++ b/sites/playground/web/src/components/AssistantFooter.vue
@@ -13,7 +13,7 @@ import { t } from '../i18n';
 const props = defineProps<IBubbleSlotsProps>();
 
 const vAutoTip = AutoTip;
-const genuiConfig: any = inject(GENUI_CONFIG, null);
+const genuiConfig: any = inject(GENUI_CONFIG);
 
 const tooltipEffect = computed(() => {
   return genuiConfig?.value?.colorScheme === 'dark' ? 'dark' : 'light';
diff --git a/sites/playground/web/src/components/UserFooter.vue b/sites/playground/web/src/components/UserFooter.vue
index 342fc843..7eca0887 100644
--- a/sites/playground/web/src/components/UserFooter.vue
+++ b/sites/playground/web/src/components/UserFooter.vue
@@ -12,7 +12,7 @@ import { t } from '../i18n';
 
 const props = defineProps<IBubbleSlotsProps>();
 const generating = computed(() => GeneratingStatus.includes(props.messageManager?.messageState.status));
-const genuiConfig: any = inject(GENUI_CONFIG, null);
+const genuiConfig: any = inject(GENUI_CONFIG);
 
 const tooltipEffect = computed(() => {
   return genuiConfig?.value?.colorScheme === 'dark' ? 'dark' : 'light';
diff --git a/sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue b/sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue
index e4b0041e..aff96e84 100644
--- a/sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue
+++ b/sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue
@@ -50,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const route = useRoute();
-const TinyGenuiConfig: any = inject(GENUI_CONFIG, null);
+const TinyGenuiConfig: any = inject(GENUI_CONFIG);
 const { setColorMode } = useTheme();
 const prevSchema = ref<string>('');
 const { schema, conversation, versionControl, stream, emitter } = useTemplateContext();
diff --git a/sites/playground/web/src/components/genui-template/composables/use-monaco-playground-theme.ts b/sites/playground/web/src/components/genui-template/composables/use-monaco-playground-theme.ts
index 517d144d..d68f0a3a 100644
--- a/sites/playground/web/src/components/genui-template/composables/use-monaco-playground-theme.ts
+++ b/sites/playground/web/src/components/genui-template/composables/use-monaco-playground-theme.ts
@@ -25,7 +25,7 @@ function useSystemPrefersDark() {
 export function useMonacoPlaygroundTheme(
   fallbackTheme?: () => PlaygroundColorTheme | undefined,
 ): ComputedRef<'vs' | 'vs-dark'> {
-  const genuiConfig = inject(GENUI_CONFIG, null) as { value?: { colorScheme?: 'light' | 'dark' } } | null;
+  const genuiConfig = inject(GENUI_CONFIG);
   const systemPrefersDark = useSystemPrefersDark();
 
   return computed(() => {

From 5b9fa5e39f3b38bf019d118195ac4ce59ec3a112 Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Mon, 31 Aug 2026 17:37:07 +0800
Subject: [PATCH 06/13] refactor: materials use createTheme factory

---
 packages/core/src/material/materials-theme.ts |   2 +
 packages/core/src/material/materials.ts       |   8 +-
 packages/core/src/material/merge-materials.ts |  31 ++---
 .../src/config-provider/ConfigProvider.vue    |  44 +++++--
 .../src/materials/materials.ts                |   2 +-
 .../src/materials/theme/index.ts              |  30 +++--
 .../src/materials/materials.ts                |   6 +-
 .../src/materials/theme/ThemeRoot.ts          | 110 ++++++++++--------
 .../src/materials/theme/index.ts              |  20 ++--
 projects/tiny-schema-renderer                 |   2 +-
 10 files changed, 148 insertions(+), 107 deletions(-)

diff --git a/packages/core/src/material/materials-theme.ts b/packages/core/src/material/materials-theme.ts
index df144145..d017f9bb 100644
--- a/packages/core/src/material/materials-theme.ts
+++ b/packages/core/src/material/materials-theme.ts
@@ -21,3 +21,5 @@ export interface IMaterialsTheme {
   themes?: ThemeDescriptor[];
   apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult;
 }
+
+export type MaterialsThemeFactory = () => IMaterialsTheme;
diff --git a/packages/core/src/material/materials.ts b/packages/core/src/material/materials.ts
index 4a5cdb4f..4bee2f69 100644
--- a/packages/core/src/material/materials.ts
+++ b/packages/core/src/material/materials.ts
@@ -1,4 +1,4 @@
-import type { IMaterialsTheme } from './materials-theme';
+import type { MaterialsThemeFactory } from './materials-theme';
 
 export type IMaterialComponent = unknown;
 
@@ -8,6 +8,10 @@ export interface IMaterials {
   components?: IMaterialsMap;
   requiredCompleteFieldSelectors?: string[];
   defaultPropsMap?: Record<string, any>;
-  theme?: IMaterialsTheme | IMaterialsTheme[];
+  createTheme?: MaterialsThemeFactory;
   [key: string]: any;
 }
+
+export type MergedMaterials = Omit<IMaterials, 'createTheme'> & {
+  createTheme?: MaterialsThemeFactory | MaterialsThemeFactory[];
+};
diff --git a/packages/core/src/material/merge-materials.ts b/packages/core/src/material/merge-materials.ts
index 52d45a20..ae768307 100644
--- a/packages/core/src/material/merge-materials.ts
+++ b/packages/core/src/material/merge-materials.ts
@@ -1,14 +1,14 @@
-import type { IMaterials } from './materials';
-import type { IMaterialsTheme } from './materials-theme';
+import type { IMaterials, MergedMaterials } from './materials';
+import type { MaterialsThemeFactory } from './materials-theme';
 
-const KNOWN_KEYS = ['components', 'requiredCompleteFieldSelectors', 'defaultPropsMap', 'theme'];
+const KNOWN_KEYS = ['components', 'requiredCompleteFieldSelectors', 'defaultPropsMap', 'createTheme'];
 
-export function mergeMaterials(...sources: (IMaterials | undefined)[]): IMaterials {
+export function mergeMaterials(...sources: (IMaterials | undefined)[]): MergedMaterials {
   const components: Record<string, unknown> = {};
   const requiredCompleteFieldSelectors: string[] = [];
   const defaultPropsMap: Record<string, any> = {};
-  const themes: IMaterialsTheme[] = [];
-  const seenThemes = new Set<IMaterialsTheme>();
+  const themes: MaterialsThemeFactory[] = [];
+  const seenThemes = new Set<MaterialsThemeFactory>();
   const extra: Record<string, unknown> = {};
 
   for (const src of sources) {
@@ -22,14 +22,9 @@ export function mergeMaterials(...sources: (IMaterials | undefined)[]): IMateria
       }
     }
     Object.assign(defaultPropsMap, src.defaultPropsMap ?? {});
-    if (src.theme) {
-      const arr = Array.isArray(src.theme) ? src.theme : [src.theme];
-      for (const theme of arr) {
-        if (theme && !seenThemes.has(theme)) {
-          seenThemes.add(theme);
-          themes.push(theme);
-        }
-      }
+    if (src.createTheme && !seenThemes.has(src.createTheme)) {
+      seenThemes.add(src.createTheme);
+      themes.push(src.createTheme);
     }
     for (const key of Object.keys(src)) {
       if (!KNOWN_KEYS.includes(key)) {
@@ -38,17 +33,15 @@ export function mergeMaterials(...sources: (IMaterials | undefined)[]): IMateria
     }
   }
 
-  const merged: IMaterials = {
+  const merged: MergedMaterials = {
     components,
     requiredCompleteFieldSelectors,
     defaultPropsMap,
     ...extra,
   };
 
-  if (themes.length === 1) {
-    merged.theme = themes[0];
-  } else if (themes.length > 1) {
-    merged.theme = themes;
+  if (themes.length > 0) {
+    merged.createTheme = themes;
   }
 
   return merged;
diff --git a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
index 25391e9b..41a4254b 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ThemeProvider } from '@opentiny/tiny-robot';
 import {
-  type IMaterials,
   type IMaterialsTheme,
+  type MaterialsThemeFactory,
+  type MergedMaterials,
   type ThemeApplyResult,
   type ThemeColorScheme,
 } from '@opentiny/genui-sdk-core';
@@ -33,7 +34,7 @@ export interface ConfigProviderProps {
   id?: string;
   locale?: string;
   i18n?: I18nMessages;
-  materials?: IMaterials;
+  materials?: MergedMaterials;
   notify?: NotifyHandler;
 }
 
@@ -47,12 +48,30 @@ provide(GENUI_I18N, i18n);
 
 const { theme: mediaTheme } = useMediaTheme();
 
-const materialThemes = computed<IMaterialsTheme[]>(() => {
-  const theme = props.materials?.theme;
-  if (!theme) {
+const themeFactories = computed<MaterialsThemeFactory[]>(() => {
+  const createTheme = props.materials?.createTheme;
+  if (!createTheme) {
     return [];
   }
-  return Array.isArray(theme) ? theme : [theme];
+  return Array.isArray(createTheme) ? createTheme : [createTheme];
+});
+
+const themeInstances = new Map<MaterialsThemeFactory, IMaterialsTheme>();
+const materialThemes = computed<IMaterialsTheme[]>(() => {
+  const factories = themeFactories.value;
+  for (const key of themeInstances.keys()) {
+    if (!factories.includes(key)) {
+      themeInstances.delete(key);
+    }
+  }
+  return factories.map((factory) => {
+    let instance = themeInstances.get(factory);
+    if (!instance) {
+      instance = factory();
+      themeInstances.set(factory, instance);
+    }
+    return instance;
+  });
 });
 
 const theme = computed(() => props.theme || 'light');
@@ -127,7 +146,6 @@ watch(
   () => [materialThemes.value, theme.value, mediaTheme.value, props.id] as const,
   ([apis, themeValue, systemColorScheme]) => {
     clearTheme();
-    // 原始 theme（含 auto）原样下发，物料用 ctx.systemColorScheme 自行解析
     const results: ThemeApplyResult[] = [];
     const roots: Component[] = [];
 
@@ -141,15 +159,21 @@ watch(
     }
 
     themeRoots.value = roots;
-    // 取第一个声明了 colorScheme 的落地结果（first-wins），否则跟随系统
     colorScheme.value =
       results.find((result) => result.descriptor.colorScheme)?.descriptor.colorScheme ??
-      systemColorScheme;
+      (themeValue === 'auto'
+        ? systemColorScheme
+        : themeValue === 'dark'
+          ? 'dark'
+          : 'light');
   },
   { immediate: true },
 );
 
-onBeforeUnmount(clearTheme);
+onBeforeUnmount(() => {
+  clearTheme();
+  themeInstances.clear();
+});
 
 const robotProviderProps = computed(() => ({
   colorMode: colorScheme.value,
diff --git a/packages/materials/vue-element-plus/src/materials/materials.ts b/packages/materials/vue-element-plus/src/materials/materials.ts
index 97766d2c..f6cc56f9 100644
--- a/packages/materials/vue-element-plus/src/materials/materials.ts
+++ b/packages/materials/vue-element-plus/src/materials/materials.ts
@@ -9,5 +9,5 @@ export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
-  theme: createElementPlusMaterialsTheme(),
+  createTheme: createElementPlusMaterialsTheme,
 };
diff --git a/packages/materials/vue-element-plus/src/materials/theme/index.ts b/packages/materials/vue-element-plus/src/materials/theme/index.ts
index 4a8e9bb9..e86e89d5 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/index.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/index.ts
@@ -7,16 +7,6 @@ import {
 } from '@opentiny/genui-sdk-core';
 import { defineComponent, h, ref } from 'vue';
 
-const darkFlag = ref(false);
-
-const ElementPlusThemeRoot = defineComponent({
-  name: 'ElementPlusThemeRoot',
-  setup(_, { slots }) {
-    return () =>
-      h('div', { class: { dark: darkFlag.value }, style: { height: '100%' } }, slots.default?.());
-  },
-});
-
 const themes: ThemeDescriptor[] = [
   { id: 'light', colorScheme: 'light' },
   { id: 'dark', colorScheme: 'dark' },
@@ -35,17 +25,23 @@ function resolveDescriptor(
 }
 
 export function createElementPlusMaterialsTheme(): IMaterialsTheme {
+  // 每个实例独立的状态与 Root（工厂每被调用一次即得到一套，供单个使用方独占）
+  const dark = ref(false);
+  const Root = defineComponent({
+    name: 'ElementPlusThemeRoot',
+    setup(_, { slots }) {
+      return () =>
+        h('div', { class: { dark: dark.value }, style: { height: '100%' } }, slots.default?.());
+    },
+  });
+
   return {
     themes,
     apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
       const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
-      // dark 状态写入模块级 ref，Root 渲染时按需打 class（副作用收拢在 Root，apply 无 DOM 副作用）
-      darkFlag.value = descriptor.colorScheme === 'dark';
-      return {
-        descriptor,
-        Root: ElementPlusThemeRoot,
-        dispose: () => {},
-      };
+      // 只更新本实例状态，Root 类型保持不变，避免子树重挂载
+      dark.value = descriptor.colorScheme === 'dark';
+      return { descriptor, Root, dispose: () => {} };
     },
   };
 }
diff --git a/packages/materials/vue-opentiny-vue/src/materials/materials.ts b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
index 513dfd2c..19c975b4 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/materials.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
@@ -17,18 +17,18 @@ const standardRequiredCompleteFieldSelectors = [
   '[componentName^=TinyHuicharts] > props > options > theme',
 ];
 
-const theme = createOpenTinyMaterialsTheme();
+const createTheme = createOpenTinyMaterialsTheme;
 
 export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
-  theme,
+  createTheme,
 };
 
 export const miniMaterials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: baseRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(miniMaterialsMeta),
-  theme,
+  createTheme,
 };
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
index 4a1a2f2b..94eaf5ef 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
@@ -1,6 +1,15 @@
 import TinyConfigProvider from '@opentiny/vue-config-provider';
 import ThemeTool from '@opentiny/vue-theme/theme-tool';
-import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type Component,
+  type ShallowRef,
+} from 'vue';
 
 const SCOPE_ATTR = 'data-genui-theme-scope';
 
@@ -9,64 +18,73 @@ export interface OpenTinyThemeState {
   colorScheme: 'light' | 'dark';
 }
 
-// Root 自持的主题配置：apply 通过 setOpenTinyThemeState 写入，Root 内部响应式消费
-const themeState = shallowRef<OpenTinyThemeState>({ themeConfig: { css: ' ' }, colorScheme: 'light' });
-
-export function setOpenTinyThemeState(state: OpenTinyThemeState) {
-  themeState.value = state;
+// 每个 Root 实例生成唯一 scope token，避免不同实例的样式互相匹配
+let scopeSeq = 0;
+function nextScopeToken(): string {
+  scopeSeq += 1;
+  return `gts-${Date.now().toString(36)}-${scopeSeq.toString(36)}`;
 }
 
 // 把 :host / :root 改写为作用域自身的 data 属性选择器，注入 document 后只对自身子树生效
-function scopeThemeConfig(themeConfig: { css?: string }, el: HTMLElement): { css: string } {
-  el.setAttribute(SCOPE_ATTR, '');
-  const selector = `[${SCOPE_ATTR}]`;
+function scopeThemeConfig(
+  themeConfig: { css?: string },
+  el: HTMLElement,
+  token: string,
+): { css: string } {
+  el.setAttribute(SCOPE_ATTR, token);
+  const selector = `[${SCOPE_ATTR}="${token}"]`;
   const next: { css: string } = { css: themeConfig.css || '' };
   next.css = next.css.split(':host').join(selector).split(':root').join(selector);
   return next;
 }
 
-export const OpenTinyThemeRoot = defineComponent({
-  name: 'OpenTinyThemeRoot',
-  inheritAttrs: false,
-  setup(_, { slots, attrs }) {
-    const providerRef = ref<{ $el?: HTMLElement } | null>(null);
-    const themeTool = new ThemeTool();
+// 工厂：为每次 apply 创建独立的 Root 组件，闭包捕获该 apply 自己的主题状态，
+// 后续 update 只改写闭包内的 state（不重建组件），从而保留子树 UI 状态
+export function createOpenTinyThemeRoot(themeState: ShallowRef<OpenTinyThemeState>): Component {
+  return defineComponent({
+    name: 'OpenTinyThemeRoot',
+    inheritAttrs: false,
+    setup(_, { slots, attrs }) {
+      const providerRef = ref<{ $el?: HTMLElement } | null>(null);
+      const themeTool = new ThemeTool();
+      const scopeToken = nextScopeToken();
 
-    function applyTheme() {
-      const el = providerRef.value?.$el;
-      if (!el) {
-        return;
+      function applyTheme() {
+        const el = providerRef.value?.$el;
+        if (!el) {
+          return;
+        }
+        const { themeConfig, colorScheme } = themeState.value;
+        themeTool.changeTheme(scopeThemeConfig(themeConfig, el, scopeToken));
+        el.setAttribute('data-color-scheme', colorScheme === 'dark' ? 'dark' : 'light');
       }
-      const { themeConfig, colorScheme } = themeState.value;
-      themeTool.changeTheme(scopeThemeConfig(themeConfig, el));
-      el.setAttribute('data-color-scheme', colorScheme === 'dark' ? 'dark' : 'light');
-    }
 
-    onMounted(() => {
-      providerRef.value?.$el?.classList.remove('tiny-config-provider');
-      applyTheme();
-    });
+      onMounted(() => {
+        providerRef.value?.$el?.classList.remove('tiny-config-provider');
+        applyTheme();
+      });
 
-    watch(themeState, applyTheme);
+      watch(themeState, applyTheme);
 
-    onBeforeUnmount(() => {
-      themeTool.changeTheme({ css: ' ' });
-    });
+      onBeforeUnmount(() => {
+        themeTool.changeTheme({ css: ' ' });
+      });
 
-    return () =>
-      h(
-        TinyConfigProvider,
-        {
-          ref: providerRef,
-          style: { height: '100%' },
-          theme: {
-            data: {
-              'tv-base-color-brand': themeState.value.colorScheme === 'dark' ? '#B3B3B3' : '#1476ff',
+      return () =>
+        h(
+          TinyConfigProvider,
+          {
+            ref: providerRef,
+            style: { height: '100%' },
+            theme: {
+              data: {
+                'tv-base-color-brand': themeState.value.colorScheme === 'dark' ? '#B3B3B3' : '#1476ff',
+              },
             },
+            ...attrs,
           },
-          ...attrs,
-        },
-        slots,
-      );
-  },
-});
+          slots,
+        );
+    },
+  });
+}
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
index 6a7d41a2..39d42811 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
@@ -6,7 +6,8 @@ import {
   type ThemeDescriptor,
 } from '@opentiny/genui-sdk-core';
 import { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
-import { OpenTinyThemeRoot, setOpenTinyThemeState } from './ThemeRoot';
+import { shallowRef } from 'vue';
+import { createOpenTinyThemeRoot, type OpenTinyThemeState } from './ThemeRoot';
 
 const themes: ThemeDescriptor[] = [
   { id: 'light', colorScheme: 'light' },
@@ -38,20 +39,23 @@ function buildThemeConfig(themeId: string): { css: string } {
 }
 
 export function createOpenTinyMaterialsTheme(): IMaterialsTheme {
+  // 每个实例独立的状态与 Root（工厂每被调用一次即得到一套，供单个使用方独占）
+  const state = shallowRef<OpenTinyThemeState>({
+    themeConfig: { css: ' ' },
+    colorScheme: 'light',
+  });
+  const Root = createOpenTinyThemeRoot(state);
+
   return {
     themes,
     apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
       const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
-      // 主题数据喂给 Root（模块级状态），Root 内部响应式注入/清理，apply 无副作用
-      setOpenTinyThemeState({
+      // 只更新本实例状态，Root 类型保持不变，避免子树重挂载
+      state.value = {
         themeConfig: buildThemeConfig(descriptor.id),
         colorScheme: descriptor.colorScheme ?? 'light',
-      });
-      return {
-        descriptor,
-        Root: OpenTinyThemeRoot,
-        dispose: () => {},
       };
+      return { descriptor, Root, dispose: () => {} };
     },
   };
 }
diff --git a/projects/tiny-schema-renderer b/projects/tiny-schema-renderer
index 564eb75b..658afd14 160000
--- a/projects/tiny-schema-renderer
+++ b/projects/tiny-schema-renderer
@@ -1 +1 @@
-Subproject commit 564eb75b730561ddb3cb5f34979409323e5cdbfe
+Subproject commit 658afd1421fabae3e57bbf9ca09f0af73a20d305

From 0c97e51a09354a653d770292d6dda8ee7338e12b Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Mon, 31 Aug 2026 19:57:16 +0800
Subject: [PATCH 07/13] feat(materials): enhance theme options and update Vite
 config for Element Plus integration

---
 .../src/materials/theme/index.ts              | 20 +++++++++++--------
 .../materials/vue-element-plus/vite.config.ts | 11 ++++++++--
 .../components/materials-tab/MaterialsTab.vue |  8 ++++++--
 .../web/src/components/materials-tab/index.ts |  1 +
 .../materials-tab/materials-options.ts        |  6 ++++++
 5 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/materials/vue-element-plus/src/materials/theme/index.ts b/packages/materials/vue-element-plus/src/materials/theme/index.ts
index e86e89d5..1073e10d 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/index.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/index.ts
@@ -5,7 +5,8 @@ import {
   type ThemeColorScheme,
   type ThemeDescriptor,
 } from '@opentiny/genui-sdk-core';
-import { defineComponent, h, ref } from 'vue';
+import { defineComponent, h } from 'vue';
+import 'element-plus/theme-chalk/dark/css-vars.css';
 
 const themes: ThemeDescriptor[] = [
   { id: 'light', colorScheme: 'light' },
@@ -24,14 +25,12 @@ function resolveDescriptor(
   );
 }
 
+// element-plus 暗色基于全局 html.dark，暗色 css 直接从 element-plus 引入并打包进物料
 export function createElementPlusMaterialsTheme(): IMaterialsTheme {
-  // 每个实例独立的状态与 Root（工厂每被调用一次即得到一套，供单个使用方独占）
-  const dark = ref(false);
   const Root = defineComponent({
     name: 'ElementPlusThemeRoot',
     setup(_, { slots }) {
-      return () =>
-        h('div', { class: { dark: dark.value }, style: { height: '100%' } }, slots.default?.());
+      return () => h('div', { style: { height: '100%' } }, slots.default?.());
     },
   });
 
@@ -39,9 +38,14 @@ export function createElementPlusMaterialsTheme(): IMaterialsTheme {
     themes,
     apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
       const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
-      // 只更新本实例状态，Root 类型保持不变，避免子树重挂载
-      dark.value = descriptor.colorScheme === 'dark';
-      return { descriptor, Root, dispose: () => {} };
+      document.documentElement.classList.toggle('dark', descriptor.colorScheme === 'dark');
+      return {
+        descriptor,
+        Root,
+        dispose: () => {
+          document.documentElement.classList.remove('dark');
+        },
+      };
     },
   };
 }
diff --git a/packages/materials/vue-element-plus/vite.config.ts b/packages/materials/vue-element-plus/vite.config.ts
index 296ae7d4..bb642816 100644
--- a/packages/materials/vue-element-plus/vite.config.ts
+++ b/packages/materials/vue-element-plus/vite.config.ts
@@ -17,7 +17,9 @@ export default defineConfig({
     dts({
       rollupTypes: true,
     }),
-    cssInjectedByJsPlugin(),
+    cssInjectedByJsPlugin({
+      jsAssetsFilterFunction: (chunk) => chunk.fileName === 'materials.js',
+    }),
   ],
   build: {
     lib: {
@@ -31,7 +33,12 @@ export default defineConfig({
     },
     sourcemap: true,
     rollupOptions: {
-      external: externalPackages.map((name) => new RegExp(`^${escapeStringRegexp(name)}(/|$)`)),
+      external: (id) => {
+        if (id === 'element-plus/theme-chalk/dark/css-vars.css') {
+          return false;
+        }
+        return externalPackages.some((name) => new RegExp(`^${escapeStringRegexp(name)}(/|$)`).test(id));
+      },
     },
   },
 });
diff --git a/sites/playground/web/src/components/materials-tab/MaterialsTab.vue b/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
index 3125f126..60bfdece 100644
--- a/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
+++ b/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
@@ -7,6 +7,7 @@ import {
   getFrameworkOptions,
   componentLibOptionsByFramework,
   MATERIAL_THEME_OPTIONS,
+  ELEMENT_PLUS_THEME_OPTIONS,
 } from './materials-options';
 import vueIcon from '../../assets/images/vue.svg';
 import angularIcon from '../../assets/images/angular.svg';
@@ -37,6 +38,9 @@ const frameworkIconMap = {
 };
 
 const componentLibOptions = computed(() => componentLibOptionsByFramework[framework.value]);
+const themeOptions = computed(() =>
+  componentLib.value === 'ElementPlus' ? ELEMENT_PLUS_THEME_OPTIONS : MATERIAL_THEME_OPTIONS,
+);
 
 const componentLibModel = computed({
   get: () => componentLib.value,
@@ -81,10 +85,10 @@ const handleSetFramework = (name) => {
       </tiny-radio-group>
     </div>
 
-    <template v-if="framework === 'Vue' && componentLib === 'TinyVue'">
+    <template v-if="framework === 'Vue' && (componentLib === 'TinyVue' || componentLib === 'ElementPlus')">
       <div class="config-title">{{ t('materials.theme') }}</div>
       <div class="theme-card-group" role="radiogroup" :aria-label="t('materials.theme')">
-        <div v-for="item in MATERIAL_THEME_OPTIONS" :key="item.value" class="theme-card-item">
+        <div v-for="item in themeOptions" :key="item.value" class="theme-card-item">
           <div
             class="theme-card"
             :class="[`theme-card--${item.value}`, { 'theme-card--active': theme === item.value }]"
diff --git a/sites/playground/web/src/components/materials-tab/index.ts b/sites/playground/web/src/components/materials-tab/index.ts
index fb69a263..f4ebc7c1 100644
--- a/sites/playground/web/src/components/materials-tab/index.ts
+++ b/sites/playground/web/src/components/materials-tab/index.ts
@@ -3,6 +3,7 @@ export {
   FRAMEWORK_OPTIONS,
   getFrameworkOptions,
   MATERIAL_THEME_OPTIONS,
+  ELEMENT_PLUS_THEME_OPTIONS,
   MATERIAL_THEME_COLOR_MAP,
   componentLibOptionsByFramework,
   defaultComponentLib,
diff --git a/sites/playground/web/src/components/materials-tab/materials-options.ts b/sites/playground/web/src/components/materials-tab/materials-options.ts
index 3e4738f9..7a2f5830 100644
--- a/sites/playground/web/src/components/materials-tab/materials-options.ts
+++ b/sites/playground/web/src/components/materials-tab/materials-options.ts
@@ -26,6 +26,12 @@ export const MATERIAL_THEME_OPTIONS = [
   { textKey: 'materials.themeAuto', value: 'auto' },
 ];
 
+export const ELEMENT_PLUS_THEME_OPTIONS = [
+  { textKey: 'materials.themeLight', value: 'light' },
+  { textKey: 'materials.themeDark', value: 'dark' },
+  { textKey: 'materials.themeAuto', value: 'auto' },
+];
+
 export const MATERIAL_THEME_COLOR_MAP = {
   light: THEME_PREVIEW_COLOR_PRESETS.light,
   dark: THEME_PREVIEW_COLOR_PRESETS.dark,

From e9c64ab1e16af19b31df644e79b422c80560823d Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Mon, 31 Aug 2026 20:36:16 +0800
Subject: [PATCH 08/13] fix(materials): replace theme creation functions and
 streamline theme management

---
 .../src/materials/materials.ts                |  4 +-
 .../src/materials/theme/create-theme.ts       | 51 +++++++++++++++
 .../src/materials/theme/index.ts              | 52 +---------------
 .../src/materials/materials.ts                |  4 +-
 .../src/materials/theme/ThemeRoot.ts          |  5 --
 .../src/materials/theme/create-theme.ts       | 61 ++++++++++++++++++
 .../src/materials/theme/index.ts              | 62 +------------------
 7 files changed, 117 insertions(+), 122 deletions(-)
 create mode 100644 packages/materials/vue-element-plus/src/materials/theme/create-theme.ts
 create mode 100644 packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts

diff --git a/packages/materials/vue-element-plus/src/materials/materials.ts b/packages/materials/vue-element-plus/src/materials/materials.ts
index f6cc56f9..dc3145dd 100644
--- a/packages/materials/vue-element-plus/src/materials/materials.ts
+++ b/packages/materials/vue-element-plus/src/materials/materials.ts
@@ -1,7 +1,7 @@
 import { buildMaterialDefaultValueMap, type IMaterials } from '@opentiny/genui-sdk-core';
 import { materialsMeta } from '../meta';
 import { components } from './components';
-import { createElementPlusMaterialsTheme } from './theme';
+import { createTheme } from './theme';
 
 const standardRequiredCompleteFieldSelectors = ['[componentName=ElCard] > props > shadow'];
 
@@ -9,5 +9,5 @@ export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
-  createTheme: createElementPlusMaterialsTheme,
+  createTheme,
 };
diff --git a/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts b/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts
new file mode 100644
index 00000000..cd9550ab
--- /dev/null
+++ b/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts
@@ -0,0 +1,51 @@
+import {
+  type IMaterialsTheme,
+  type ThemeApplyContext,
+  type ThemeApplyResult,
+  type ThemeColorScheme,
+  type ThemeDescriptor,
+} from '@opentiny/genui-sdk-core';
+import { defineComponent, h } from 'vue';
+import 'element-plus/theme-chalk/dark/css-vars.css';
+
+const themes: ThemeDescriptor[] = [
+  { id: 'light', colorScheme: 'light' },
+  { id: 'dark', colorScheme: 'dark' },
+];
+
+function resolveDescriptor(
+  theme: string,
+  systemColorScheme: ThemeColorScheme,
+): ThemeDescriptor {
+  return (
+    themes.find((item) => item.id === theme) ?? {
+      id: systemColorScheme,
+      colorScheme: systemColorScheme,
+    }
+  );
+}
+
+// element-plus 暗色基于全局 html.dark，暗色 css 直接从 element-plus 引入并打包进物料
+export function createTheme(): IMaterialsTheme {
+  const Root = defineComponent({
+    name: 'ElementPlusThemeRoot',
+    setup(_, { slots }) {
+      return () => h('div', { style: { height: '100%' } }, slots.default?.());
+    },
+  });
+
+  return {
+    themes,
+    apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
+      const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
+      document.documentElement.classList.toggle('dark', descriptor.colorScheme === 'dark');
+      return {
+        descriptor,
+        Root,
+        dispose: () => {
+          document.documentElement.classList.remove('dark');
+        },
+      };
+    },
+  };
+}
diff --git a/packages/materials/vue-element-plus/src/materials/theme/index.ts b/packages/materials/vue-element-plus/src/materials/theme/index.ts
index 1073e10d..d5546e5b 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/index.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/index.ts
@@ -1,51 +1 @@
-import {
-  type IMaterialsTheme,
-  type ThemeApplyContext,
-  type ThemeApplyResult,
-  type ThemeColorScheme,
-  type ThemeDescriptor,
-} from '@opentiny/genui-sdk-core';
-import { defineComponent, h } from 'vue';
-import 'element-plus/theme-chalk/dark/css-vars.css';
-
-const themes: ThemeDescriptor[] = [
-  { id: 'light', colorScheme: 'light' },
-  { id: 'dark', colorScheme: 'dark' },
-];
-
-function resolveDescriptor(
-  theme: string,
-  systemColorScheme: ThemeColorScheme,
-): ThemeDescriptor {
-  return (
-    themes.find((item) => item.id === theme) ?? {
-      id: systemColorScheme,
-      colorScheme: systemColorScheme,
-    }
-  );
-}
-
-// element-plus 暗色基于全局 html.dark，暗色 css 直接从 element-plus 引入并打包进物料
-export function createElementPlusMaterialsTheme(): IMaterialsTheme {
-  const Root = defineComponent({
-    name: 'ElementPlusThemeRoot',
-    setup(_, { slots }) {
-      return () => h('div', { style: { height: '100%' } }, slots.default?.());
-    },
-  });
-
-  return {
-    themes,
-    apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
-      const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
-      document.documentElement.classList.toggle('dark', descriptor.colorScheme === 'dark');
-      return {
-        descriptor,
-        Root,
-        dispose: () => {
-          document.documentElement.classList.remove('dark');
-        },
-      };
-    },
-  };
-}
+export * from './create-theme';
diff --git a/packages/materials/vue-opentiny-vue/src/materials/materials.ts b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
index dea9dc18..fa1ceb25 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/materials.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
@@ -1,7 +1,7 @@
 import { buildMaterialDefaultValueMap, type IMaterials } from '@opentiny/genui-sdk-core';
 import { materialsMeta, miniMaterialsMeta, plusMaterialsMeta } from '../meta';
 import { components } from './components';
-import { createOpenTinyMaterialsTheme } from './theme';
+import { createTheme } from './theme';
 
 const baseRequiredCompleteFieldSelectors = [
   '[componentName=TinyNumeric] > props > controlsPosition',
@@ -16,8 +16,6 @@ const standardRequiredCompleteFieldSelectors = [
   '[componentName^=TinyHuicharts] > props > options > theme',
 ];
 
-const createTheme = createOpenTinyMaterialsTheme;
-
 const plusRequiredCompleteFieldSelectors = [
   ...standardRequiredCompleteFieldSelectors,
   '[componentName=TinyCollapseItem] > props > name',
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
index 94eaf5ef..8206d2f3 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
@@ -76,11 +76,6 @@ export function createOpenTinyThemeRoot(themeState: ShallowRef<OpenTinyThemeStat
           {
             ref: providerRef,
             style: { height: '100%' },
-            theme: {
-              data: {
-                'tv-base-color-brand': themeState.value.colorScheme === 'dark' ? '#B3B3B3' : '#1476ff',
-              },
-            },
             ...attrs,
           },
           slots,
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts
new file mode 100644
index 00000000..68c241dc
--- /dev/null
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts
@@ -0,0 +1,61 @@
+import {
+  type IMaterialsTheme,
+  type ThemeApplyContext,
+  type ThemeApplyResult,
+  type ThemeColorScheme,
+  type ThemeDescriptor,
+} from '@opentiny/genui-sdk-core';
+import { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
+import { shallowRef } from 'vue';
+import { createOpenTinyThemeRoot, type OpenTinyThemeState } from './ThemeRoot';
+
+const themes: ThemeDescriptor[] = [
+  { id: 'light', colorScheme: 'light' },
+  { id: 'dark', colorScheme: 'dark' },
+  { id: 'lite', colorScheme: 'light' },
+];
+
+function resolveDescriptor(
+  theme: string,
+  systemColorScheme: ThemeColorScheme,
+): ThemeDescriptor {
+  return (
+    themes.find((item) => item.id === theme) ?? {
+      id: systemColorScheme,
+      colorScheme: systemColorScheme,
+    }
+  );
+}
+
+// 只取 css 部分（data 品牌色由 Root 按 colorScheme 自行生成），作用域改写由 Root 完成
+function buildThemeConfig(themeId: string): { css: string } {
+  if (themeId === 'dark') {
+    return { css: tinyDarkTheme.css };
+  }
+  if (themeId === 'lite') {
+    return { css: tinyOldTheme.css };
+  }
+  return { css: ' ' };
+}
+
+export function createTheme(): IMaterialsTheme {
+  // 每个实例独立的状态与 Root（工厂每被调用一次即得到一套，供单个使用方独占）
+  const state = shallowRef<OpenTinyThemeState>({
+    themeConfig: { css: ' ' },
+    colorScheme: 'light',
+  });
+  const Root = createOpenTinyThemeRoot(state);
+
+  return {
+    themes,
+    apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
+      const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
+      // 只更新本实例状态，Root 类型保持不变，避免子树重挂载
+      state.value = {
+        themeConfig: buildThemeConfig(descriptor.id),
+        colorScheme: descriptor.colorScheme ?? 'light',
+      };
+      return { descriptor, Root, dispose: () => {} };
+    },
+  };
+}
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
index 39d42811..d5546e5b 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
@@ -1,61 +1 @@
-import {
-  type IMaterialsTheme,
-  type ThemeApplyContext,
-  type ThemeApplyResult,
-  type ThemeColorScheme,
-  type ThemeDescriptor,
-} from '@opentiny/genui-sdk-core';
-import { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
-import { shallowRef } from 'vue';
-import { createOpenTinyThemeRoot, type OpenTinyThemeState } from './ThemeRoot';
-
-const themes: ThemeDescriptor[] = [
-  { id: 'light', colorScheme: 'light' },
-  { id: 'dark', colorScheme: 'dark' },
-  { id: 'lite', colorScheme: 'light' },
-];
-
-function resolveDescriptor(
-  theme: string,
-  systemColorScheme: ThemeColorScheme,
-): ThemeDescriptor {
-  return (
-    themes.find((item) => item.id === theme) ?? {
-      id: systemColorScheme,
-      colorScheme: systemColorScheme,
-    }
-  );
-}
-
-// 只取 css 部分（data 品牌色由 Root 按 colorScheme 自行生成），作用域改写由 Root 完成
-function buildThemeConfig(themeId: string): { css: string } {
-  if (themeId === 'dark') {
-    return { css: tinyDarkTheme.css };
-  }
-  if (themeId === 'lite') {
-    return { css: tinyOldTheme.css };
-  }
-  return { css: ' ' };
-}
-
-export function createOpenTinyMaterialsTheme(): IMaterialsTheme {
-  // 每个实例独立的状态与 Root（工厂每被调用一次即得到一套，供单个使用方独占）
-  const state = shallowRef<OpenTinyThemeState>({
-    themeConfig: { css: ' ' },
-    colorScheme: 'light',
-  });
-  const Root = createOpenTinyThemeRoot(state);
-
-  return {
-    themes,
-    apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
-      const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
-      // 只更新本实例状态，Root 类型保持不变，避免子树重挂载
-      state.value = {
-        themeConfig: buildThemeConfig(descriptor.id),
-        colorScheme: descriptor.colorScheme ?? 'light',
-      };
-      return { descriptor, Root, dispose: () => {} };
-    },
-  };
-}
+export * from './create-theme';

From e0cf26cf5f3d7a3961aed3dcec1ae1b2e276b33e Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Mon, 31 Aug 2026 21:23:33 +0800
Subject: [PATCH 09/13] fix: add sfc component

---
 .../src/materials/theme/ThemeRoot.ts          | 85 -------------------
 .../src/materials/theme/ThemeRoot.vue         | 69 +++++++++++++++
 .../src/materials/theme/create-theme.ts       | 43 ++++------
 3 files changed, 86 insertions(+), 111 deletions(-)
 delete mode 100644 packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
 create mode 100644 packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue

diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
deleted file mode 100644
index 8206d2f3..00000000
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import TinyConfigProvider from '@opentiny/vue-config-provider';
-import ThemeTool from '@opentiny/vue-theme/theme-tool';
-import {
-  defineComponent,
-  h,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-  type Component,
-  type ShallowRef,
-} from 'vue';
-
-const SCOPE_ATTR = 'data-genui-theme-scope';
-
-export interface OpenTinyThemeState {
-  themeConfig: { css: string };
-  colorScheme: 'light' | 'dark';
-}
-
-// 每个 Root 实例生成唯一 scope token，避免不同实例的样式互相匹配
-let scopeSeq = 0;
-function nextScopeToken(): string {
-  scopeSeq += 1;
-  return `gts-${Date.now().toString(36)}-${scopeSeq.toString(36)}`;
-}
-
-// 把 :host / :root 改写为作用域自身的 data 属性选择器，注入 document 后只对自身子树生效
-function scopeThemeConfig(
-  themeConfig: { css?: string },
-  el: HTMLElement,
-  token: string,
-): { css: string } {
-  el.setAttribute(SCOPE_ATTR, token);
-  const selector = `[${SCOPE_ATTR}="${token}"]`;
-  const next: { css: string } = { css: themeConfig.css || '' };
-  next.css = next.css.split(':host').join(selector).split(':root').join(selector);
-  return next;
-}
-
-// 工厂：为每次 apply 创建独立的 Root 组件，闭包捕获该 apply 自己的主题状态，
-// 后续 update 只改写闭包内的 state（不重建组件），从而保留子树 UI 状态
-export function createOpenTinyThemeRoot(themeState: ShallowRef<OpenTinyThemeState>): Component {
-  return defineComponent({
-    name: 'OpenTinyThemeRoot',
-    inheritAttrs: false,
-    setup(_, { slots, attrs }) {
-      const providerRef = ref<{ $el?: HTMLElement } | null>(null);
-      const themeTool = new ThemeTool();
-      const scopeToken = nextScopeToken();
-
-      function applyTheme() {
-        const el = providerRef.value?.$el;
-        if (!el) {
-          return;
-        }
-        const { themeConfig, colorScheme } = themeState.value;
-        themeTool.changeTheme(scopeThemeConfig(themeConfig, el, scopeToken));
-        el.setAttribute('data-color-scheme', colorScheme === 'dark' ? 'dark' : 'light');
-      }
-
-      onMounted(() => {
-        providerRef.value?.$el?.classList.remove('tiny-config-provider');
-        applyTheme();
-      });
-
-      watch(themeState, applyTheme);
-
-      onBeforeUnmount(() => {
-        themeTool.changeTheme({ css: ' ' });
-      });
-
-      return () =>
-        h(
-          TinyConfigProvider,
-          {
-            ref: providerRef,
-            style: { height: '100%' },
-            ...attrs,
-          },
-          slots,
-        );
-    },
-  });
-}
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue
new file mode 100644
index 00000000..f31f35ed
--- /dev/null
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import TinyConfigProvider from '@opentiny/vue-config-provider';
+import ThemeTool, { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const SCOPE_ATTR = 'data-genui-theme-scope';
+
+defineOptions({ name: 'ThemeRoot', inheritAttrs: false });
+
+// 每个 Root 实例生成唯一 scope token，避免不同实例的样式互相匹配
+let scopeSeq = 0;
+function nextScopeToken(): string {
+  scopeSeq += 1;
+  return `gts-${Date.now().toString(36)}-${scopeSeq.toString(36)}`;
+}
+
+// 把 :host / :root 改写为作用域自身的 data 属性选择器，注入 document 后只对自身子树生效
+function scopeThemeConfig(themeConfig: { css?: string }, el: HTMLElement, token: string): { css: string } {
+  el.setAttribute(SCOPE_ATTR, token);
+  const selector = `[${SCOPE_ATTR}="${token}"]`;
+  const next: { css: string } = { css: themeConfig.css || '' };
+  next.css = next.css.split(':host').join(selector).split(':root').join(selector);
+  return next;
+}
+
+// 只取 css 部分（data 品牌色由 Root 按 colorScheme 自行生成），作用域改写由 Root 完成
+function buildThemeConfig(theme: string): { css: string } {
+  if (theme === 'dark') {
+    return { css: tinyDarkTheme.css };
+  }
+  if (theme === 'lite') {
+    return { css: tinyOldTheme.css };
+  }
+  return { css: ' ' };
+}
+
+const props = defineProps<{ theme: string }>();
+
+const providerRef = ref<{ $el?: HTMLElement } | null>(null);
+const themeTool = new ThemeTool();
+const scopeToken = nextScopeToken();
+
+function applyTheme() {
+  const el = providerRef.value?.$el;
+  if (!el) {
+    return;
+  }
+  const themeConfig = buildThemeConfig(props.theme);
+  themeTool.changeTheme(scopeThemeConfig(themeConfig, el, scopeToken));
+  el.setAttribute('data-color-scheme', props.theme === 'dark' ? 'dark' : 'light');
+}
+
+onMounted(() => {
+  providerRef.value?.$el?.classList.remove('tiny-config-provider');
+  applyTheme();
+});
+
+watch(() => props.theme, applyTheme);
+
+onBeforeUnmount(() => {
+  themeTool.changeTheme({ css: ' ' });
+});
+</script>
+
+<template>
+  <tiny-config-provider ref="providerRef" style="height: 100%" v-bind="$attrs">
+    <slot />
+  </tiny-config-provider>
+</template>
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts
index 68c241dc..81a177c8 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts
@@ -5,9 +5,8 @@ import {
   type ThemeColorScheme,
   type ThemeDescriptor,
 } from '@opentiny/genui-sdk-core';
-import { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
-import { shallowRef } from 'vue';
-import { createOpenTinyThemeRoot, type OpenTinyThemeState } from './ThemeRoot';
+import { defineComponent, h, ref } from 'vue';
+import ThemeRoot from './ThemeRoot.vue';
 
 const themes: ThemeDescriptor[] = [
   { id: 'light', colorScheme: 'light' },
@@ -27,35 +26,27 @@ function resolveDescriptor(
   );
 }
 
-// 只取 css 部分（data 品牌色由 Root 按 colorScheme 自行生成），作用域改写由 Root 完成
-function buildThemeConfig(themeId: string): { css: string } {
-  if (themeId === 'dark') {
-    return { css: tinyDarkTheme.css };
-  }
-  if (themeId === 'lite') {
-    return { css: tinyOldTheme.css };
-  }
-  return { css: ' ' };
-}
-
 export function createTheme(): IMaterialsTheme {
-  // 每个实例独立的状态与 Root（工厂每被调用一次即得到一套，供单个使用方独占）
-  const state = shallowRef<OpenTinyThemeState>({
-    themeConfig: { css: ' ' },
-    colorScheme: 'light',
+  // 框架渲染 Root 时不传 props，主题通过闭包 ref 传入，Root 类型保持不变避免子树重挂载
+  const theme = ref('light');
+  const Root = defineComponent({
+    name: 'OpenTinyThemeRoot',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      return () => h(ThemeRoot, { theme: theme.value, ...attrs }, slots);
+    },
   });
-  const Root = createOpenTinyThemeRoot(state);
 
   return {
     themes,
-    apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
-      const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
-      // 只更新本实例状态，Root 类型保持不变，避免子树重挂载
-      state.value = {
-        themeConfig: buildThemeConfig(descriptor.id),
-        colorScheme: descriptor.colorScheme ?? 'light',
+    apply(themeValue: string, ctx: ThemeApplyContext): ThemeApplyResult {
+      const descriptor = resolveDescriptor(themeValue, ctx.systemColorScheme);
+      theme.value = descriptor.id;
+      return {
+        descriptor,
+        Root,
+        dispose: () => {},
       };
-      return { descriptor, Root, dispose: () => {} };
     },
   };
 }

From 090d09b54a6cffbdee8cec106008f1db6101e9e2 Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Mon, 31 Aug 2026 21:47:56 +0800
Subject: [PATCH 10/13] fix(materials): update Vite config for theme management
 and add ThemeRoot component

---
 .../src/materials/theme/ThemeRoot.vue         | 53 +++++++++++++++++++
 .../src/materials/theme/create-theme.ts       | 20 +++----
 .../vue-element-plus/src/vite-env.d.ts        |  1 +
 .../materials/vue-element-plus/vite.config.ts |  3 +-
 4 files changed, 67 insertions(+), 10 deletions(-)
 create mode 100644 packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue
 create mode 100644 packages/materials/vue-element-plus/src/vite-env.d.ts

diff --git a/packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue b/packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue
new file mode 100644
index 00000000..88dedc5e
--- /dev/null
+++ b/packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import darkCss from 'element-plus/theme-chalk/dark/css-vars.css?raw';
+
+const SCOPE_ATTR = 'data-genui-theme-scope';
+
+defineOptions({ name: 'ThemeRoot', inheritAttrs: false });
+
+// 每个 Root 实例生成唯一 scope token，避免不同实例的样式互相匹配
+let scopeSeq = 0;
+function nextScopeToken(): string {
+  scopeSeq += 1;
+  return `eps-${Date.now().toString(36)}-${scopeSeq.toString(36)}`;
+}
+
+function scopeDarkCss(token: string): string {
+  const selector = `[${SCOPE_ATTR}="${token}"]`;
+  return darkCss.split('html.dark').join(selector);
+}
+
+const props = defineProps<{ theme: string }>();
+
+const rootRef = ref<HTMLElement | null>(null);
+const scopeToken = nextScopeToken();
+let styleEl: HTMLStyleElement | null = null;
+
+function syncDark() {
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.dataset.genuiTheme = 'element-plus-dark';
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = props.theme === 'dark' ? scopeDarkCss(scopeToken) : '';
+}
+
+onMounted(() => {
+  rootRef.value?.setAttribute(SCOPE_ATTR, scopeToken);
+  syncDark();
+});
+
+watch(() => props.theme, syncDark);
+
+onBeforeUnmount(() => {
+  styleEl?.remove();
+  styleEl = null;
+});
+</script>
+
+<template>
+  <div ref="rootRef" style="height: 100%">
+    <slot />
+  </div>
+</template>
diff --git a/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts b/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts
index cd9550ab..45fec030 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts
@@ -5,8 +5,8 @@ import {
   type ThemeColorScheme,
   type ThemeDescriptor,
 } from '@opentiny/genui-sdk-core';
-import { defineComponent, h } from 'vue';
-import 'element-plus/theme-chalk/dark/css-vars.css';
+import { defineComponent, h, ref } from 'vue';
+import ThemeRoot from './ThemeRoot.vue';
 
 const themes: ThemeDescriptor[] = [
   { id: 'light', colorScheme: 'light' },
@@ -25,25 +25,27 @@ function resolveDescriptor(
   );
 }
 
-// element-plus 暗色基于全局 html.dark，暗色 css 直接从 element-plus 引入并打包进物料
 export function createTheme(): IMaterialsTheme {
+
+  const theme = ref('light');
   const Root = defineComponent({
     name: 'ElementPlusThemeRoot',
-    setup(_, { slots }) {
-      return () => h('div', { style: { height: '100%' } }, slots.default?.());
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      return () => h(ThemeRoot, { theme: theme.value, ...attrs }, slots);
     },
   });
 
   return {
     themes,
-    apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult {
-      const descriptor = resolveDescriptor(theme, ctx.systemColorScheme);
-      document.documentElement.classList.toggle('dark', descriptor.colorScheme === 'dark');
+    apply(themeValue: string, ctx: ThemeApplyContext): ThemeApplyResult {
+      const descriptor = resolveDescriptor(themeValue, ctx.systemColorScheme);
+      theme.value = descriptor.id;
       return {
         descriptor,
         Root,
         dispose: () => {
-          document.documentElement.classList.remove('dark');
+          theme.value = 'light';
         },
       };
     },
diff --git a/packages/materials/vue-element-plus/src/vite-env.d.ts b/packages/materials/vue-element-plus/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/packages/materials/vue-element-plus/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/materials/vue-element-plus/vite.config.ts b/packages/materials/vue-element-plus/vite.config.ts
index bb642816..5a212a0e 100644
--- a/packages/materials/vue-element-plus/vite.config.ts
+++ b/packages/materials/vue-element-plus/vite.config.ts
@@ -34,7 +34,8 @@ export default defineConfig({
     sourcemap: true,
     rollupOptions: {
       external: (id) => {
-        if (id === 'element-plus/theme-chalk/dark/css-vars.css') {
+        const bareId = id.split('?')[0];
+        if (bareId === 'element-plus/theme-chalk/dark/css-vars.css') {
           return false;
         }
         return externalPackages.some((name) => new RegExp(`^${escapeStringRegexp(name)}(/|$)`).test(id));

From b4f33e17a02a16c980645292312a583b49d76750 Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Tue, 1 Sep 2026 20:40:59 +0800
Subject: [PATCH 11/13] fix: rename createTheme to themeFactory

---
 packages/core/src/material/materials.ts       |  6 ++---
 packages/core/src/material/merge-materials.ts | 17 +++++++++-----
 .../src/config-provider/ConfigProvider.vue    |  6 ++---
 .../src/materials/materials.ts                |  4 ++--
 .../src/materials/theme/ThemeRoot.vue         | 22 +++++--------------
 .../src/materials/theme/index.ts              |  2 +-
 .../{create-theme.ts => theme-factory.ts}     |  2 +-
 .../src/materials/materials.ts                |  8 +++----
 .../src/materials/theme/ThemeRoot.vue         | 22 +++++--------------
 .../src/materials/theme/index.ts              |  2 +-
 .../{create-theme.ts => theme-factory.ts}     |  2 +-
 .../components/materials-tab/MaterialsTab.vue | 13 ++++++++++-
 12 files changed, 50 insertions(+), 56 deletions(-)
 rename packages/materials/vue-element-plus/src/materials/theme/{create-theme.ts => theme-factory.ts} (96%)
 rename packages/materials/vue-opentiny-vue/src/materials/theme/{create-theme.ts => theme-factory.ts} (96%)

diff --git a/packages/core/src/material/materials.ts b/packages/core/src/material/materials.ts
index 4bee2f69..33c4b61d 100644
--- a/packages/core/src/material/materials.ts
+++ b/packages/core/src/material/materials.ts
@@ -8,10 +8,10 @@ export interface IMaterials {
   components?: IMaterialsMap;
   requiredCompleteFieldSelectors?: string[];
   defaultPropsMap?: Record<string, any>;
-  createTheme?: MaterialsThemeFactory;
+  themeFactory?: MaterialsThemeFactory;
   [key: string]: any;
 }
 
-export type MergedMaterials = Omit<IMaterials, 'createTheme'> & {
-  createTheme?: MaterialsThemeFactory | MaterialsThemeFactory[];
+export type MergedMaterials = Omit<IMaterials, 'themeFactory'> & {
+  themeFactory?: MaterialsThemeFactory | MaterialsThemeFactory[];
 };
diff --git a/packages/core/src/material/merge-materials.ts b/packages/core/src/material/merge-materials.ts
index ae768307..6b407be6 100644
--- a/packages/core/src/material/merge-materials.ts
+++ b/packages/core/src/material/merge-materials.ts
@@ -1,7 +1,7 @@
 import type { IMaterials, MergedMaterials } from './materials';
 import type { MaterialsThemeFactory } from './materials-theme';
 
-const KNOWN_KEYS = ['components', 'requiredCompleteFieldSelectors', 'defaultPropsMap', 'createTheme'];
+const handleKeys = ['components', 'requiredCompleteFieldSelectors', 'defaultPropsMap', 'themeFactory'];
 
 export function mergeMaterials(...sources: (IMaterials | undefined)[]): MergedMaterials {
   const components: Record<string, unknown> = {};
@@ -22,12 +22,17 @@ export function mergeMaterials(...sources: (IMaterials | undefined)[]): MergedMa
       }
     }
     Object.assign(defaultPropsMap, src.defaultPropsMap ?? {});
-    if (src.createTheme && !seenThemes.has(src.createTheme)) {
-      seenThemes.add(src.createTheme);
-      themes.push(src.createTheme);
+    if (src.themeFactory) {
+      const factories = Array.isArray(src.themeFactory) ? src.themeFactory : [src.themeFactory];
+      for (const factory of factories) {
+        if (factory && !seenThemes.has(factory)) {
+          seenThemes.add(factory);
+          themes.push(factory);
+        }
+      }
     }
     for (const key of Object.keys(src)) {
-      if (!KNOWN_KEYS.includes(key)) {
+      if (!handleKeys.includes(key)) {
         extra[key] = (src as Record<string, unknown>)[key];
       }
     }
@@ -41,7 +46,7 @@ export function mergeMaterials(...sources: (IMaterials | undefined)[]): MergedMa
   };
 
   if (themes.length > 0) {
-    merged.createTheme = themes;
+    merged.themeFactory = themes;
   }
 
   return merged;
diff --git a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
index 41a4254b..e351eb5d 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -49,11 +49,11 @@ provide(GENUI_I18N, i18n);
 const { theme: mediaTheme } = useMediaTheme();
 
 const themeFactories = computed<MaterialsThemeFactory[]>(() => {
-  const createTheme = props.materials?.createTheme;
-  if (!createTheme) {
+  const themeFactory = props.materials?.themeFactory;
+  if (!themeFactory) {
     return [];
   }
-  return Array.isArray(createTheme) ? createTheme : [createTheme];
+  return Array.isArray(themeFactory) ? themeFactory : [themeFactory];
 });
 
 const themeInstances = new Map<MaterialsThemeFactory, IMaterialsTheme>();
diff --git a/packages/materials/vue-element-plus/src/materials/materials.ts b/packages/materials/vue-element-plus/src/materials/materials.ts
index dc3145dd..997d8011 100644
--- a/packages/materials/vue-element-plus/src/materials/materials.ts
+++ b/packages/materials/vue-element-plus/src/materials/materials.ts
@@ -1,7 +1,7 @@
 import { buildMaterialDefaultValueMap, type IMaterials } from '@opentiny/genui-sdk-core';
 import { materialsMeta } from '../meta';
 import { components } from './components';
-import { createTheme } from './theme';
+import { themeFactory } from './theme';
 
 const standardRequiredCompleteFieldSelectors = ['[componentName=ElCard] > props > shadow'];
 
@@ -9,5 +9,5 @@ export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
-  createTheme,
+  themeFactory,
 };
diff --git a/packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue b/packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue
index 88dedc5e..5bf23089 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue
+++ b/packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue
@@ -1,27 +1,18 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, watch } from 'vue';
 import darkCss from 'element-plus/theme-chalk/dark/css-vars.css?raw';
 
-const SCOPE_ATTR = 'data-genui-theme-scope';
-
 defineOptions({ name: 'ThemeRoot', inheritAttrs: false });
 
-// 每个 Root 实例生成唯一 scope token，避免不同实例的样式互相匹配
-let scopeSeq = 0;
-function nextScopeToken(): string {
-  scopeSeq += 1;
-  return `eps-${Date.now().toString(36)}-${scopeSeq.toString(36)}`;
-}
+const scopeClass = `element-plus-theme-root-${Math.random().toString(36).slice(2, 8)}`;
 
-function scopeDarkCss(token: string): string {
-  const selector = `[${SCOPE_ATTR}="${token}"]`;
+function scopeDarkCss(): string {
+  const selector = `.${scopeClass}`;
   return darkCss.split('html.dark').join(selector);
 }
 
 const props = defineProps<{ theme: string }>();
 
-const rootRef = ref<HTMLElement | null>(null);
-const scopeToken = nextScopeToken();
 let styleEl: HTMLStyleElement | null = null;
 
 function syncDark() {
@@ -30,11 +21,10 @@ function syncDark() {
     styleEl.dataset.genuiTheme = 'element-plus-dark';
     document.head.appendChild(styleEl);
   }
-  styleEl.textContent = props.theme === 'dark' ? scopeDarkCss(scopeToken) : '';
+  styleEl.textContent = props.theme === 'dark' ? scopeDarkCss() : '';
 }
 
 onMounted(() => {
-  rootRef.value?.setAttribute(SCOPE_ATTR, scopeToken);
   syncDark();
 });
 
@@ -47,7 +37,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="rootRef" style="height: 100%">
+  <div :class="scopeClass" style="height: 100%">
     <slot />
   </div>
 </template>
diff --git a/packages/materials/vue-element-plus/src/materials/theme/index.ts b/packages/materials/vue-element-plus/src/materials/theme/index.ts
index d5546e5b..f11bdadb 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/index.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/index.ts
@@ -1 +1 @@
-export * from './create-theme';
+export * from './theme-factory';
diff --git a/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts b/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
similarity index 96%
rename from packages/materials/vue-element-plus/src/materials/theme/create-theme.ts
rename to packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
index 45fec030..c4915f44 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/create-theme.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
@@ -25,7 +25,7 @@ function resolveDescriptor(
   );
 }
 
-export function createTheme(): IMaterialsTheme {
+export function themeFactory(): IMaterialsTheme {
 
   const theme = ref('light');
   const Root = defineComponent({
diff --git a/packages/materials/vue-opentiny-vue/src/materials/materials.ts b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
index fa1ceb25..0e983a19 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/materials.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
@@ -1,7 +1,7 @@
 import { buildMaterialDefaultValueMap, type IMaterials } from '@opentiny/genui-sdk-core';
 import { materialsMeta, miniMaterialsMeta, plusMaterialsMeta } from '../meta';
 import { components } from './components';
-import { createTheme } from './theme';
+import { themeFactory } from './theme';
 
 const baseRequiredCompleteFieldSelectors = [
   '[componentName=TinyNumeric] > props > controlsPosition',
@@ -26,19 +26,19 @@ export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
-  createTheme,
+  themeFactory,
 };
 
 export const miniMaterials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: baseRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(miniMaterialsMeta),
-  createTheme,
+  themeFactory,
 };
 
 export const plusMaterials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: plusRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(plusMaterialsMeta),
-  createTheme,
+  themeFactory,
 };
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue
index f31f35ed..678c34c4 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue
@@ -3,27 +3,17 @@ import TinyConfigProvider from '@opentiny/vue-config-provider';
 import ThemeTool, { tinyDarkTheme, tinyOldTheme } from '@opentiny/vue-theme/theme-tool';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
-const SCOPE_ATTR = 'data-genui-theme-scope';
-
 defineOptions({ name: 'ThemeRoot', inheritAttrs: false });
 
-// 每个 Root 实例生成唯一 scope token，避免不同实例的样式互相匹配
-let scopeSeq = 0;
-function nextScopeToken(): string {
-  scopeSeq += 1;
-  return `gts-${Date.now().toString(36)}-${scopeSeq.toString(36)}`;
-}
+const scopeClass = `opentiny-vue-theme-root-${Math.random().toString(36).slice(2, 8)}`;
 
-// 把 :host / :root 改写为作用域自身的 data 属性选择器，注入 document 后只对自身子树生效
-function scopeThemeConfig(themeConfig: { css?: string }, el: HTMLElement, token: string): { css: string } {
-  el.setAttribute(SCOPE_ATTR, token);
-  const selector = `[${SCOPE_ATTR}="${token}"]`;
+function scopeThemeConfig(themeConfig: { css?: string }): { css: string } {
+  const selector = `.${scopeClass}`;
   const next: { css: string } = { css: themeConfig.css || '' };
   next.css = next.css.split(':host').join(selector).split(':root').join(selector);
   return next;
 }
 
-// 只取 css 部分（data 品牌色由 Root 按 colorScheme 自行生成），作用域改写由 Root 完成
 function buildThemeConfig(theme: string): { css: string } {
   if (theme === 'dark') {
     return { css: tinyDarkTheme.css };
@@ -38,7 +28,6 @@ const props = defineProps<{ theme: string }>();
 
 const providerRef = ref<{ $el?: HTMLElement } | null>(null);
 const themeTool = new ThemeTool();
-const scopeToken = nextScopeToken();
 
 function applyTheme() {
   const el = providerRef.value?.$el;
@@ -46,8 +35,7 @@ function applyTheme() {
     return;
   }
   const themeConfig = buildThemeConfig(props.theme);
-  themeTool.changeTheme(scopeThemeConfig(themeConfig, el, scopeToken));
-  el.setAttribute('data-color-scheme', props.theme === 'dark' ? 'dark' : 'light');
+  themeTool.changeTheme(scopeThemeConfig(themeConfig));
 }
 
 onMounted(() => {
@@ -63,7 +51,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <tiny-config-provider ref="providerRef" style="height: 100%" v-bind="$attrs">
+  <tiny-config-provider ref="providerRef" style="height: 100%" v-bind="$attrs" :class="scopeClass">
     <slot />
   </tiny-config-provider>
 </template>
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
index d5546e5b..f11bdadb 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
@@ -1 +1 @@
-export * from './create-theme';
+export * from './theme-factory';
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
similarity index 96%
rename from packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts
rename to packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
index 81a177c8..baf5c195 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/create-theme.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
@@ -26,7 +26,7 @@ function resolveDescriptor(
   );
 }
 
-export function createTheme(): IMaterialsTheme {
+export function themeFactory(): IMaterialsTheme {
   // 框架渲染 Root 时不传 props，主题通过闭包 ref 传入，Root 类型保持不变避免子树重挂载
   const theme = ref('light');
   const Root = defineComponent({
diff --git a/sites/playground/web/src/components/materials-tab/MaterialsTab.vue b/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
index 60bfdece..1e00ede6 100644
--- a/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
+++ b/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { TinyRadioGroup, TinyRadio, TinyCheckbox } from '@opentiny/vue';
-import { inject, computed } from 'vue';
+import { inject, computed, watch } from 'vue';
 import { t } from '../../i18n';
 import { PlaygroundMode } from '../../constants';
 import {
@@ -47,6 +47,17 @@ const componentLibModel = computed({
   set: (val) => setComponentLib(val),
 });
 
+// 切换组件库后，若当前主题不被新库支持，回退到默认主题，避免没有主题卡片被选中
+watch(
+  () => componentLib.value,
+  (lib) => {
+    const options = lib === 'ElementPlus' ? ELEMENT_PLUS_THEME_OPTIONS : MATERIAL_THEME_OPTIONS;
+    if (!options.some((item) => item.value === props.theme)) {
+      emit('update:theme', options[0].value);
+    }
+  },
+);
+
 const handleSetFramework = (name) => {
   setFramework(name);
   // Angular 和 Vue 不支持主题切换, 默认设置为 light 主题

From d4cb1704317f3029039bf89836350bb548de7c1d Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Wed, 2 Sep 2026 09:30:21 +0800
Subject: [PATCH 12/13] fix: rename interfaces add "I" prefix

---
 packages/core/src/material/materials-theme.ts        | 12 ++++++------
 .../vue/src/config-provider/ConfigProvider.vue       |  6 +++---
 .../src/materials/theme/theme-factory.ts             | 12 ++++++------
 .../src/materials/theme/theme-factory.ts             | 12 ++++++------
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/material/materials-theme.ts b/packages/core/src/material/materials-theme.ts
index d017f9bb..bdc2ff0a 100644
--- a/packages/core/src/material/materials-theme.ts
+++ b/packages/core/src/material/materials-theme.ts
@@ -1,25 +1,25 @@
 export type ThemeColorScheme = 'light' | 'dark';
 
-export interface ThemeDescriptor {
+export interface IThemeDescriptor {
   id: string;
   colorScheme?: ThemeColorScheme;
 }
 
-export interface ThemeApplyContext {
+export interface IThemeApplyContext {
   systemColorScheme: ThemeColorScheme;
 }
 
 export type ThemeDisposer = () => void;
 
-export interface ThemeApplyResult {
-  descriptor: ThemeDescriptor;
+export interface IThemeApplyResult {
+  descriptor: IThemeDescriptor;
   dispose: ThemeDisposer;
   Root?: unknown;
 }
 
 export interface IMaterialsTheme {
-  themes?: ThemeDescriptor[];
-  apply(theme: string, ctx: ThemeApplyContext): ThemeApplyResult;
+  themes?: IThemeDescriptor[];
+  apply(theme: string, ctx: IThemeApplyContext): IThemeApplyResult;
 }
 
 export type MaterialsThemeFactory = () => IMaterialsTheme;
diff --git a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
index e351eb5d..ffaedd76 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -4,7 +4,7 @@ import {
   type IMaterialsTheme,
   type MaterialsThemeFactory,
   type MergedMaterials,
-  type ThemeApplyResult,
+  type IThemeApplyResult,
   type ThemeColorScheme,
 } from '@opentiny/genui-sdk-core';
 import {
@@ -134,7 +134,7 @@ const ThemeRoots = defineComponent({
 
 const themeRoots = shallowRef<Component[]>([]);
 
-let applied: ThemeApplyResult[] = [];
+let applied: IThemeApplyResult[] = [];
 
 function clearTheme() {
   const pending = applied;
@@ -146,7 +146,7 @@ watch(
   () => [materialThemes.value, theme.value, mediaTheme.value, props.id] as const,
   ([apis, themeValue, systemColorScheme]) => {
     clearTheme();
-    const results: ThemeApplyResult[] = [];
+    const results: IThemeApplyResult[] = [];
     const roots: Component[] = [];
 
     for (const api of apis) {
diff --git a/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts b/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
index c4915f44..253de056 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
@@ -1,14 +1,14 @@
 import {
   type IMaterialsTheme,
-  type ThemeApplyContext,
-  type ThemeApplyResult,
+  type IThemeApplyContext,
+  type IThemeApplyResult,
   type ThemeColorScheme,
-  type ThemeDescriptor,
+  type IThemeDescriptor,
 } from '@opentiny/genui-sdk-core';
 import { defineComponent, h, ref } from 'vue';
 import ThemeRoot from './ThemeRoot.vue';
 
-const themes: ThemeDescriptor[] = [
+const themes: IThemeDescriptor[] = [
   { id: 'light', colorScheme: 'light' },
   { id: 'dark', colorScheme: 'dark' },
 ];
@@ -16,7 +16,7 @@ const themes: ThemeDescriptor[] = [
 function resolveDescriptor(
   theme: string,
   systemColorScheme: ThemeColorScheme,
-): ThemeDescriptor {
+): IThemeDescriptor {
   return (
     themes.find((item) => item.id === theme) ?? {
       id: systemColorScheme,
@@ -38,7 +38,7 @@ export function themeFactory(): IMaterialsTheme {
 
   return {
     themes,
-    apply(themeValue: string, ctx: ThemeApplyContext): ThemeApplyResult {
+    apply(themeValue: string, ctx: IThemeApplyContext): IThemeApplyResult {
       const descriptor = resolveDescriptor(themeValue, ctx.systemColorScheme);
       theme.value = descriptor.id;
       return {
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
index baf5c195..381a9f9b 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
@@ -1,14 +1,14 @@
 import {
   type IMaterialsTheme,
-  type ThemeApplyContext,
-  type ThemeApplyResult,
+  type IThemeApplyContext,
+  type IThemeApplyResult,
   type ThemeColorScheme,
-  type ThemeDescriptor,
+  type IThemeDescriptor,
 } from '@opentiny/genui-sdk-core';
 import { defineComponent, h, ref } from 'vue';
 import ThemeRoot from './ThemeRoot.vue';
 
-const themes: ThemeDescriptor[] = [
+const themes: IThemeDescriptor[] = [
   { id: 'light', colorScheme: 'light' },
   { id: 'dark', colorScheme: 'dark' },
   { id: 'lite', colorScheme: 'light' },
@@ -17,7 +17,7 @@ const themes: ThemeDescriptor[] = [
 function resolveDescriptor(
   theme: string,
   systemColorScheme: ThemeColorScheme,
-): ThemeDescriptor {
+): IThemeDescriptor {
   return (
     themes.find((item) => item.id === theme) ?? {
       id: systemColorScheme,
@@ -39,7 +39,7 @@ export function themeFactory(): IMaterialsTheme {
 
   return {
     themes,
-    apply(themeValue: string, ctx: ThemeApplyContext): ThemeApplyResult {
+    apply(themeValue: string, ctx: IThemeApplyContext): IThemeApplyResult {
       const descriptor = resolveDescriptor(themeValue, ctx.systemColorScheme);
       theme.value = descriptor.id;
       return {

From 3674b20176e1e2a81368a8f81245c4439c41d395 Mon Sep 17 00:00:00 2001
From: cenguanming <975402925@qq.com>
Date: Wed, 2 Sep 2026 11:18:49 +0800
Subject: [PATCH 13/13] fix: rename Root to root

---
 packages/core/src/material/materials-theme.ts               | 4 ++--
 .../frameworks/vue/src/config-provider/ConfigProvider.vue   | 4 ++--
 .../vue-element-plus/src/materials/theme/theme-factory.ts   | 4 ++--
 .../vue-opentiny-vue/src/materials/theme/theme-factory.ts   | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/material/materials-theme.ts b/packages/core/src/material/materials-theme.ts
index bdc2ff0a..3fd8f144 100644
--- a/packages/core/src/material/materials-theme.ts
+++ b/packages/core/src/material/materials-theme.ts
@@ -13,8 +13,8 @@ export type ThemeDisposer = () => void;
 
 export interface IThemeApplyResult {
   descriptor: IThemeDescriptor;
-  dispose: ThemeDisposer;
-  Root?: unknown;
+  dispose?: ThemeDisposer;
+  root?: unknown;
 }
 
 export interface IMaterialsTheme {
diff --git a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
index ffaedd76..fb688862 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -151,8 +151,8 @@ watch(
 
     for (const api of apis) {
       const result = api.apply(themeValue, { systemColorScheme });
-      if (result.Root) {
-        roots.push(result.Root as Component);
+      if (result.root) {
+        roots.push(result.root as Component);
       }
       results.push(result);
       applied.push(result);
diff --git a/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts b/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
index 253de056..26d2b9c6 100644
--- a/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
+++ b/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
@@ -28,7 +28,7 @@ function resolveDescriptor(
 export function themeFactory(): IMaterialsTheme {
 
   const theme = ref('light');
-  const Root = defineComponent({
+  const root = defineComponent({
     name: 'ElementPlusThemeRoot',
     inheritAttrs: false,
     setup(_, { attrs, slots }) {
@@ -43,7 +43,7 @@ export function themeFactory(): IMaterialsTheme {
       theme.value = descriptor.id;
       return {
         descriptor,
-        Root,
+        root,
         dispose: () => {
           theme.value = 'light';
         },
diff --git a/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts b/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
index 381a9f9b..0f72e1b9 100644
--- a/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
@@ -27,9 +27,9 @@ function resolveDescriptor(
 }
 
 export function themeFactory(): IMaterialsTheme {
-  // 框架渲染 Root 时不传 props，主题通过闭包 ref 传入，Root 类型保持不变避免子树重挂载
+  // 框架渲染 root 时不传 props，主题通过闭包 ref 传入，root 类型保持不变避免子树重挂载
   const theme = ref('light');
-  const Root = defineComponent({
+  const root = defineComponent({
     name: 'OpenTinyThemeRoot',
     inheritAttrs: false,
     setup(_, { attrs, slots }) {
@@ -44,7 +44,7 @@ export function themeFactory(): IMaterialsTheme {
       theme.value = descriptor.id;
       return {
         descriptor,
-        Root,
+        root,
         dispose: () => {},
       };
     },