diff --git a/packages/core/src/material/index.ts b/packages/core/src/material/index.ts
index 251e84c4..d3c37962 100644
--- a/packages/core/src/material/index.ts
+++ b/packages/core/src/material/index.ts
@@ -2,4 +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..3fd8f144
--- /dev/null
+++ b/packages/core/src/material/materials-theme.ts
@@ -0,0 +1,25 @@
+export type ThemeColorScheme = 'light' | 'dark';
+
+export interface IThemeDescriptor {
+  id: string;
+  colorScheme?: ThemeColorScheme;
+}
+
+export interface IThemeApplyContext {
+  systemColorScheme: ThemeColorScheme;
+}
+
+export type ThemeDisposer = () => void;
+
+export interface IThemeApplyResult {
+  descriptor: IThemeDescriptor;
+  dispose?: ThemeDisposer;
+  root?: unknown;
+}
+
+export interface IMaterialsTheme {
+  themes?: IThemeDescriptor[];
+  apply(theme: string, ctx: IThemeApplyContext): IThemeApplyResult;
+}
+
+export type MaterialsThemeFactory = () => IMaterialsTheme;
diff --git a/packages/core/src/material/materials.ts b/packages/core/src/material/materials.ts
index dded8bf7..33c4b61d 100644
--- a/packages/core/src/material/materials.ts
+++ b/packages/core/src/material/materials.ts
@@ -1,3 +1,5 @@
+import type { MaterialsThemeFactory } from './materials-theme';
+
 export type IMaterialComponent = unknown;
 
 export type IMaterialsMap = Record<string, IMaterialComponent>;
@@ -6,5 +8,10 @@ export interface IMaterials {
   components?: IMaterialsMap;
   requiredCompleteFieldSelectors?: string[];
   defaultPropsMap?: Record<string, any>;
+  themeFactory?: MaterialsThemeFactory;
   [key: string]: any;
 }
+
+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 448742f6..6b407be6 100644
--- a/packages/core/src/material/merge-materials.ts
+++ b/packages/core/src/material/merge-materials.ts
@@ -1,20 +1,53 @@
-import type { IMaterials } from './materials';
+import type { IMaterials, MergedMaterials } from './materials';
+import type { MaterialsThemeFactory } from './materials-theme';
 
-export function mergeMaterials(...list: IMaterials[]): IMaterials {
-  const result: IMaterials = {
-    components: {},
-    defaultPropsMap: {},
-    requiredCompleteFieldSelectors: [],
+const handleKeys = ['components', 'requiredCompleteFieldSelectors', 'defaultPropsMap', 'themeFactory'];
+
+export function mergeMaterials(...sources: (IMaterials | undefined)[]): MergedMaterials {
+  const components: Record<string, unknown> = {};
+  const requiredCompleteFieldSelectors: string[] = [];
+  const defaultPropsMap: Record<string, any> = {};
+  const themes: MaterialsThemeFactory[] = [];
+  const seenThemes = new Set<MaterialsThemeFactory>();
+  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.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 (!handleKeys.includes(key)) {
+        extra[key] = (src as Record<string, unknown>)[key];
+      }
+    }
+  }
+
+  const merged: MergedMaterials = {
+    components,
+    requiredCompleteFieldSelectors,
+    defaultPropsMap,
+    ...extra,
   };
 
-  for (const item of list) {
-    if (!item) continue;
-    Object.assign(result.components!, item.components ?? {});
-    Object.assign(result.defaultPropsMap!, item.defaultPropsMap ?? {});
-    result.requiredCompleteFieldSelectors!.push(
-      ...(item.requiredCompleteFieldSelectors ?? []),
-    );
+  if (themes.length > 0) {
+    merged.themeFactory = themes;
   }
 
-  return result;
+  return merged;
 }
diff --git a/packages/frameworks/vue/src/chat/GenuiChat.vue b/packages/frameworks/vue/src/chat/GenuiChat.vue
index 9546c841..a4dd1cbf 100644
--- a/packages/frameworks/vue/src/chat/GenuiChat.vue
+++ b/packages/frameworks/vue/src/chat/GenuiChat.vue
@@ -10,7 +10,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';
@@ -37,7 +37,7 @@ import { IResponseHandler, defaultResponseHandlers } from './response-handler';
 
 const props = defineProps<IChatProps>();
 
-const genuiConfig: any = inject(GENUI_CONFIG, null);
+const genuiConfig = inject(GENUI_CONFIG);
 const { t } = useI18n();
 
 const isAllowFiles = computed(() => {
@@ -484,7 +484,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 c4660a43..fb688862 100644
--- a/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
+++ b/packages/frameworks/vue/src/config-provider/ConfigProvider.vue
@@ -1,9 +1,26 @@
 <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, inject } from 'vue';
-import type { IMaterials } from '@opentiny/genui-sdk-core';
+import {
+  type IMaterialsTheme,
+  type MaterialsThemeFactory,
+  type MergedMaterials,
+  type IThemeApplyResult,
+  type ThemeColorScheme,
+} from '@opentiny/genui-sdk-core';
+import {
+  watch,
+  provide,
+  inject,
+  computed,
+  ref,
+  shallowRef,
+  onBeforeUnmount,
+  defineComponent,
+  h,
+  type Component,
+  type PropType,
+  type VNode,
+} from 'vue';
 import { RENDERER_SETTINGS_KEY } from '@opentiny/tiny-schema-renderer';
 import { I18nMessages, useI18n } from '../chat/i18n';
 import { GENUI_I18N, GENUI_CONFIG, GENUI_MATERIALS } from './injection-tokens';
@@ -13,19 +30,14 @@ import type { NotifyHandler } from './notify.types';
 export type { NotifyHandler };
 
 export interface ConfigProviderProps {
-  theme?: 'light' | 'dark' | 'lite' | 'auto';
+  theme?: string;
   id?: string;
   locale?: string;
   i18n?: I18nMessages;
-  materials?: IMaterials;
+  materials?: MergedMaterials;
   notify?: NotifyHandler;
 }
 
-interface IRobotProviderProps {
-  colorMode: 'dark' | 'light';
-  targetElement?: string;
-}
-
 const props = withDefaults(defineProps<ConfigProviderProps>(), {
   id: 'tiny-genui-config-provider',
   locale: 'zh_CN',
@@ -34,36 +46,43 @@ 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 themeTool = new ThemeTool();
-
 const { theme: mediaTheme } = useMediaTheme();
 
-const actualTheme = computed(() => {
-  if (props.theme === 'auto') {
-    return mediaTheme.value;
+const themeFactories = computed<MaterialsThemeFactory[]>(() => {
+  const themeFactory = props.materials?.themeFactory;
+  if (!themeFactory) {
+    return [];
   }
-  return props.theme;
+  return Array.isArray(themeFactory) ? themeFactory : [themeFactory];
 });
 
-const genuiConfig = computed(() => {
-  return {
-    theme: actualTheme.value,
-    id: props.id,
-  };
+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');
+
+const colorScheme = ref<ThemeColorScheme>('light');
+
+const genuiConfig = computed(() => ({
+  colorScheme: colorScheme.value,
+  id: props.id,
+}));
+
 provide(GENUI_CONFIG, genuiConfig);
 
 const internalMaterials = {};
@@ -71,10 +90,7 @@ watch(() => props.materials, (newVal) => {
   Object.assign(internalMaterials, newVal);
 }, { immediate: true });
 
-provide(
-  GENUI_MATERIALS,
-  internalMaterials,
-);
+provide(GENUI_MATERIALS, internalMaterials);
 
 const parentRendererSettings = inject(RENDERER_SETTINGS_KEY, {}) as Record<string, any>;
 const rendererSettings = {
@@ -100,39 +116,79 @@ watch(
   { immediate: true },
 );
 
-watch(
-  () => actualTheme.value,
-  (newVal) => {
-    const themeConfig = themeMap[newVal] || themeMap.light;
-    themeTool.changeTheme(themeConfig);
+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,
+      );
+    };
   },
-  {
-    immediate: true,
+});
+
+const themeRoots = shallowRef<Component[]>([]);
+
+let applied: IThemeApplyResult[] = [];
+
+function clearTheme() {
+  const pending = applied;
+  applied = [];
+  pending.forEach((item) => item.dispose());
+}
+
+watch(
+  () => [materialThemes.value, theme.value, mediaTheme.value, props.id] as const,
+  ([apis, themeValue, systemColorScheme]) => {
+    clearTheme();
+    const results: IThemeApplyResult[] = [];
+    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);
+    }
+
+    themeRoots.value = roots;
+    colorScheme.value =
+      results.find((result) => result.descriptor.colorScheme)?.descriptor.colorScheme ??
+      (themeValue === 'auto'
+        ? systemColorScheme
+        : themeValue === 'dark'
+          ? 'dark'
+          : 'light');
   },
+  { immediate: true },
 );
 
-const providerRef = ref();
-onMounted(() => {
-  providerRef.value?.$el.classList.remove('tiny-config-provider');
+onBeforeUnmount(() => {
+  clearTheme();
+  themeInstances.clear();
 });
 
-const robotProviderProps = computed(() => {
-  const providerProps: IRobotProviderProps = {
-    colorMode: actualTheme.value === 'dark' ? 'dark' : 'light',
-  };
-  if (genuiConfig?.value?.id) {
-    providerProps.targetElement = '#' + genuiConfig.value.id;
-  }
-  return providerProps;
-});
+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">
     <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..997d8011 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 { themeFactory } from './theme';
 
 const standardRequiredCompleteFieldSelectors = ['[componentName=ElCard] > props > shadow'];
 
@@ -8,4 +9,5 @@ export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
+  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
new file mode 100644
index 00000000..5bf23089
--- /dev/null
+++ b/packages/materials/vue-element-plus/src/materials/theme/ThemeRoot.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, watch } from 'vue';
+import darkCss from 'element-plus/theme-chalk/dark/css-vars.css?raw';
+
+defineOptions({ name: 'ThemeRoot', inheritAttrs: false });
+
+const scopeClass = `element-plus-theme-root-${Math.random().toString(36).slice(2, 8)}`;
+
+function scopeDarkCss(): string {
+  const selector = `.${scopeClass}`;
+  return darkCss.split('html.dark').join(selector);
+}
+
+const props = defineProps<{ theme: string }>();
+
+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() : '';
+}
+
+onMounted(() => {
+  syncDark();
+});
+
+watch(() => props.theme, syncDark);
+
+onBeforeUnmount(() => {
+  styleEl?.remove();
+  styleEl = null;
+});
+</script>
+
+<template>
+  <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
new file mode 100644
index 00000000..f11bdadb
--- /dev/null
+++ b/packages/materials/vue-element-plus/src/materials/theme/index.ts
@@ -0,0 +1 @@
+export * from './theme-factory';
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
new file mode 100644
index 00000000..26d2b9c6
--- /dev/null
+++ b/packages/materials/vue-element-plus/src/materials/theme/theme-factory.ts
@@ -0,0 +1,53 @@
+import {
+  type IMaterialsTheme,
+  type IThemeApplyContext,
+  type IThemeApplyResult,
+  type ThemeColorScheme,
+  type IThemeDescriptor,
+} from '@opentiny/genui-sdk-core';
+import { defineComponent, h, ref } from 'vue';
+import ThemeRoot from './ThemeRoot.vue';
+
+const themes: IThemeDescriptor[] = [
+  { id: 'light', colorScheme: 'light' },
+  { id: 'dark', colorScheme: 'dark' },
+];
+
+function resolveDescriptor(
+  theme: string,
+  systemColorScheme: ThemeColorScheme,
+): IThemeDescriptor {
+  return (
+    themes.find((item) => item.id === theme) ?? {
+      id: systemColorScheme,
+      colorScheme: systemColorScheme,
+    }
+  );
+}
+
+export function themeFactory(): IMaterialsTheme {
+
+  const theme = ref('light');
+  const root = defineComponent({
+    name: 'ElementPlusThemeRoot',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      return () => h(ThemeRoot, { theme: theme.value, ...attrs }, slots);
+    },
+  });
+
+  return {
+    themes,
+    apply(themeValue: string, ctx: IThemeApplyContext): IThemeApplyResult {
+      const descriptor = resolveDescriptor(themeValue, ctx.systemColorScheme);
+      theme.value = descriptor.id;
+      return {
+        descriptor,
+        root,
+        dispose: () => {
+          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 296ae7d4..5a212a0e 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,13 @@ export default defineConfig({
     },
     sourcemap: true,
     rollupOptions: {
-      external: externalPackages.map((name) => new RegExp(`^${escapeStringRegexp(name)}(/|$)`)),
+      external: (id) => {
+        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));
+      },
     },
   },
 });
diff --git a/packages/materials/vue-opentiny-vue/package.json b/packages/materials/vue-opentiny-vue/package.json
index bb9ad695..8247e7ac 100644
--- a/packages/materials/vue-opentiny-vue/package.json
+++ b/packages/materials/vue-opentiny-vue/package.json
@@ -51,6 +51,7 @@
     "@opentiny/vue-collapse": "~3.31.0",
     "@opentiny/vue-collapse-item": "~3.31.0",
     "@opentiny/vue-color-picker": "~3.31.0",
+    "@opentiny/vue-config-provider": "~3.31.0",
     "@opentiny/vue-date-picker": "~3.31.0",
     "@opentiny/vue-dialog-box": "~3.31.0",
     "@opentiny/vue-form": "~3.31.0",
@@ -85,6 +86,7 @@
     "@opentiny/vue-switch": "~3.31.0",
     "@opentiny/vue-tab-item": "~3.31.0",
     "@opentiny/vue-tabs": "~3.31.0",
+    "@opentiny/vue-theme": "~3.31.0",
     "@opentiny/vue-time-line": "~3.31.0",
     "@opentiny/vue-tooltip": "~3.31.0",
     "@opentiny/vue-transfer": "~3.31.0",
diff --git a/packages/materials/vue-opentiny-vue/src/materials/materials.ts b/packages/materials/vue-opentiny-vue/src/materials/materials.ts
index cc5a3e62..0e983a19 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, plusMaterialsMeta } from '../meta';
 import { components } from './components';
+import { themeFactory } from './theme';
 
 const baseRequiredCompleteFieldSelectors = [
   '[componentName=TinyNumeric] > props > controlsPosition',
@@ -25,16 +26,19 @@ export const materials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: standardRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(materialsMeta),
+  themeFactory,
 };
 
-export const miniMaterials = {
+export const miniMaterials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: baseRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(miniMaterialsMeta),
+  themeFactory,
 };
 
 export const plusMaterials: IMaterials = {
   components,
   requiredCompleteFieldSelectors: plusRequiredCompleteFieldSelectors,
   defaultPropsMap: buildMaterialDefaultValueMap(plusMaterialsMeta),
+  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
new file mode 100644
index 00000000..678c34c4
--- /dev/null
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/ThemeRoot.vue
@@ -0,0 +1,57 @@
+<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';
+
+defineOptions({ name: 'ThemeRoot', inheritAttrs: false });
+
+const scopeClass = `opentiny-vue-theme-root-${Math.random().toString(36).slice(2, 8)}`;
+
+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;
+}
+
+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();
+
+function applyTheme() {
+  const el = providerRef.value?.$el;
+  if (!el) {
+    return;
+  }
+  const themeConfig = buildThemeConfig(props.theme);
+  themeTool.changeTheme(scopeThemeConfig(themeConfig));
+}
+
+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" :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
new file mode 100644
index 00000000..f11bdadb
--- /dev/null
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/index.ts
@@ -0,0 +1 @@
+export * from './theme-factory';
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
new file mode 100644
index 00000000..0f72e1b9
--- /dev/null
+++ b/packages/materials/vue-opentiny-vue/src/materials/theme/theme-factory.ts
@@ -0,0 +1,52 @@
+import {
+  type IMaterialsTheme,
+  type IThemeApplyContext,
+  type IThemeApplyResult,
+  type ThemeColorScheme,
+  type IThemeDescriptor,
+} from '@opentiny/genui-sdk-core';
+import { defineComponent, h, ref } from 'vue';
+import ThemeRoot from './ThemeRoot.vue';
+
+const themes: IThemeDescriptor[] = [
+  { id: 'light', colorScheme: 'light' },
+  { id: 'dark', colorScheme: 'dark' },
+  { id: 'lite', colorScheme: 'light' },
+];
+
+function resolveDescriptor(
+  theme: string,
+  systemColorScheme: ThemeColorScheme,
+): IThemeDescriptor {
+  return (
+    themes.find((item) => item.id === theme) ?? {
+      id: systemColorScheme,
+      colorScheme: systemColorScheme,
+    }
+  );
+}
+
+export function themeFactory(): IMaterialsTheme {
+  // 框架渲染 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);
+    },
+  });
+
+  return {
+    themes,
+    apply(themeValue: string, ctx: IThemeApplyContext): IThemeApplyResult {
+      const descriptor = resolveDescriptor(themeValue, ctx.systemColorScheme);
+      theme.value = descriptor.id;
+      return {
+        descriptor,
+        root,
+        dispose: () => {},
+      };
+    },
+  };
+}
diff --git a/packages/materials/vue-opentiny-vue/src/meta/materials/bundle.json b/packages/materials/vue-opentiny-vue/src/meta/materials/bundle.json
index 0aa6ca50..0ffd4d26 100644
--- a/packages/materials/vue-opentiny-vue/src/meta/materials/bundle.json
+++ b/packages/materials/vue-opentiny-vue/src/meta/materials/bundle.json
@@ -10559,7 +10559,7 @@
           }
         },
         {
-          "version": "3.28.0",
+          "version": "3.31.0",
           "icon": "autocomplete",
           "name": {
             "zh_CN": "自动完成"
@@ -10742,7 +10742,7 @@
           }
         },
         {
-          "version": "3.28.0",
+          "version": "3.31.0",
           "icon": "cascader",
           "name": {
             "zh_CN": "级联选择器"
@@ -10967,7 +10967,7 @@
           }
         },
         {
-          "version": "3.28.0",
+          "version": "3.31.0",
           "icon": "colorpicker",
           "name": {
             "zh_CN": "颜色选择器"
@@ -11127,7 +11127,7 @@
           }
         },
         {
-          "version": "3.28.0",
+          "version": "3.31.0",
           "icon": "ipaddress",
           "name": {
             "zh_CN": "IP 地址输入框"
@@ -11268,7 +11268,7 @@
           }
         },
         {
-          "version": "3.28.0",
+          "version": "3.31.0",
           "icon": "steps",
           "name": {
             "zh_CN": "步骤条"
@@ -12891,10 +12891,10 @@
         {
           "name": "TinyVue组件库",
           "package": "@opentiny/vue",
-          "version": "3.28.0",
+          "version": "3.31.0",
           "destructuring": true,
-          "script": "https://registry.npmmirror.com/@opentiny/vue-runtime/~3.28/files/dist3/tiny-vue-pc.mjs",
-          "css": "https://registry.npmmirror.com/@opentiny/vue-theme/~3.28/files/index.css"
+          "script": "https://registry.npmmirror.com/@opentiny/vue-runtime/~3.31/files/dist3/tiny-vue-pc.mjs",
+          "css": "https://registry.npmmirror.com/@opentiny/vue-theme/~3.31/files/index.css"
         },
         {
           "name": "element-plus组件库",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4be8200a..8de7b0bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -518,6 +518,9 @@ importers:
       '@opentiny/vue-color-picker':
         specifier: ~3.31.0
         version: 3.31.0
+      '@opentiny/vue-config-provider':
+        specifier: ~3.31.0
+        version: 3.31.0
       '@opentiny/vue-date-picker':
         specifier: ~3.31.0
         version: 3.31.0
@@ -620,6 +623,9 @@ importers:
       '@opentiny/vue-tabs':
         specifier: ~3.31.0
         version: 3.31.0
+      '@opentiny/vue-theme':
+        specifier: ~3.31.0
+        version: 3.31.1
       '@opentiny/vue-time-line':
         specifier: ~3.31.0
         version: 3.31.0
diff --git a/sites/playground/web/src/components/AssistantFooter.vue b/sites/playground/web/src/components/AssistantFooter.vue
index 2aa4cae6..3d45ddaf 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);
 
 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..7eca0887 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);
 
 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 14c28d49..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();
@@ -60,13 +60,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,
@@ -356,7 +352,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 v-if="showMessages.length" :content-renderers="messageRenderers">
         <tr-bubble-list :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..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,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);
   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';
   });
diff --git a/sites/playground/web/src/components/materials-tab/MaterialsTab.vue b/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
index 3125f126..1e00ede6 100644
--- a/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
+++ b/sites/playground/web/src/components/materials-tab/MaterialsTab.vue
@@ -1,12 +1,13 @@
 <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 {
   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,12 +38,26 @@ 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,
   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 主题
@@ -81,10 +96,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,