diff --git a/packages/theme-saas/src/old-theme-index.js b/packages/theme-saas/src/old-theme-index.js
new file mode 100644
index 0000000000..0b74348759
--- /dev/null
+++ b/packages/theme-saas/src/old-theme-index.js
@@ -0,0 +1,6 @@
+export default {
+  id: 'tiny-old-theme',
+  name: 'OldTheme',
+  cnName: '旧的主题',
+  css: ``
+}
diff --git a/packages/theme-saas/src/theme-tool.js b/packages/theme-saas/src/theme-tool.js
index 2d9dad10f4..72425c978e 100644
--- a/packages/theme-saas/src/theme-tool.js
+++ b/packages/theme-saas/src/theme-tool.js
@@ -1,132 +1,40 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
+import tinyOldTheme from './old-theme-index.js'
 
-import definedComponents from './theme.config'
+export { tinyOldTheme }
 
 /**
- *  TinyVue主题切换类 负责CSS变量主题的装卸，主题元数据转换成主题数据
- *  使用示例：new TinyThemeTool(theme,'styleSheetId')
- *  @param {Object} theme 主题配置数据，结构如下：
- *  {
- *    id: 'tiny-infinity-theme',
- *    name: 'Infinity',
- *    cnName: '无限',
- *    data: {'ti-base-color': 'white'}
- *  }
- *  @param {String} styleSheetId style标签的id
+ * 动态切换文档或影子根节点的样式类
  */
-
 export default class TinyThemeTool {
-  // 当前主题
-  currentTheme
-
-  // 当前style标签元素
-  contentElement
-
-  // 当前style标签的id
-  styleSheetId
-
-  // 默认主题
-
-  defaultTheme = {
-    id: 'tiny-default-theme',
-    name: 'Default',
-    cnName: '默认',
-    data: {}
-  }
-
-  constructor(theme, styleSheetId = 'tinyThemeVariables') {
-    let currentTheme = theme
-    if (!theme) {
-      currentTheme = this.defaultTheme
+  constructor(theme) {
+    this.loaded = {} // 缓存已加载的样式
+    if (theme) {
+      this.changeTheme(theme)
     }
-    this.styleSheetId = styleSheetId
-    this.changeTheme(currentTheme)
   }
 
-  changeTheme(theme) {
-    let currentTheme = theme
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
-      throw new TypeError('当前主题工具只支持浏览器环境')
-    }
-    if (!theme) {
-      currentTheme = this.defaultTheme
-    }
-    this.currentTheme = currentTheme
-    if (!this.contentElement) {
-      const styleElement = document.getElementById(this.styleSheetId)
-      if (styleElement) {
-        this.contentElement = styleElement
-      } else {
-        this.contentElement = document.createElement('style')
-        this.contentElement.id = this.styleSheetId
-        document.head.appendChild(this.contentElement)
-      }
+  changeTheme(theme, target = document) {
+    let loadedSheet = this.loaded[target]
+    if (!loadedSheet) {
+      loadedSheet = new CSSStyleSheet()
+      target.adoptedStyleSheets = [...target.adoptedStyleSheets, loadedSheet]
+      this.loaded[target] = loadedSheet
     }
-    this.contentElement.textContent = this.formatCSSVariables(currentTheme.data)
 
-    this.contentElement.setAttribute('tiny-theme', this.currentTheme.id)
-  }
+    if (theme && (theme.data || theme.css)) {
+      let cssContent = ''
+      if (theme.data && typeof theme.data === 'object') {
+        cssContent = Object.keys(theme.data)
+          .map((key) => `--${key}: ${theme.data[key]}; `)
+          .join('')
 
-  // 通过 `组件css变量`，来推导出组件名： 从 ti-checkbox-button-bg-color， 推导出 checkbox-button
-  findClassName(name) {
-    const compNameList = name.split('-')
-    if (compNameList.length < 2) {
-      return false
-    }
-    const compLength = definedComponents.length
-    let compName = ''
-    for (let i = 0; i < compLength; i++) {
-      // 先试试是不是双段式的组件名： 比如dialog-box 这种
-      if (definedComponents[i] === `${compNameList[1]}-${compNameList[2]}`) {
-        compName = `tiny-${definedComponents[i]}`
-        break
+        cssContent = `:root{${cssContent}}`
       }
-    }
-    // 不是双段的组件，则取第一位为组件名
-    if (!compName) {
-      compName = `tiny-${compNameList[1]}`
-    }
-
-    // 提高权重，促使主题变换成功
-    compName = `${compName}[class*=tiny]`
-    return compName
-  }
-
-  formatCSSVariables(themeData) {
-    const componentsMap = {}
-    let rootCssVar = 'html:root {'
-    let componentsCssVar = ''
-
-    Object.keys(themeData).forEach((item) => {
-      const isBaseCssVar = item.startsWith('ti-base') || item.startsWith('ti-common')
-      if (isBaseCssVar) {
-        rootCssVar += `--${item}:${themeData[item]};`
-      } else {
-        const classkey = this.findClassName(item)
-        if (classkey) {
-          if (componentsMap[classkey]) {
-            componentsMap[classkey].push(`--${item}:${themeData[item]};`)
-          } else {
-            componentsMap[classkey] = [`--${item}:${themeData[item]};`]
-          }
-        }
+      if (theme.css && typeof theme.css === 'string') {
+        cssContent += theme.css
       }
-    })
 
-    Object.keys(componentsMap).forEach((item) => {
-      componentsCssVar += `.${item}{${componentsMap[item].join('')}}`
-    })
-
-    return `${rootCssVar}}${componentsCssVar}`
+      loadedSheet.replaceSync(cssContent)
+    }
   }
 }
diff --git a/packages/theme-saas/src/theme/aurora-theme/index.js b/packages/theme-saas/src/theme/aurora-theme/index.js
deleted file mode 100644
index 244254ea64..0000000000
--- a/packages/theme-saas/src/theme/aurora-theme/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export const tinyBaseAuroraTheme = {}
diff --git a/packages/theme-saas/src/theme/deep-theme/index.js b/packages/theme-saas/src/theme/deep-theme/index.js
deleted file mode 100644
index bc5104a5c8..0000000000
--- a/packages/theme-saas/src/theme/deep-theme/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-export const deepTheme = {}
diff --git a/packages/theme-saas/src/theme/galaxy-theme/index.js b/packages/theme-saas/src/theme/galaxy-theme/index.js
deleted file mode 100644
index 12661b2808..0000000000
--- a/packages/theme-saas/src/theme/galaxy-theme/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-export const galaxyTheme = {}
diff --git a/packages/theme-saas/src/theme/impression-theme/index.js b/packages/theme-saas/src/theme/impression-theme/index.js
deleted file mode 100644
index ebf9ceb3de..0000000000
--- a/packages/theme-saas/src/theme/impression-theme/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-export const impressionTheme = {}
diff --git a/packages/theme-saas/src/theme/index.js b/packages/theme-saas/src/theme/index.js
deleted file mode 100644
index d757c8ca82..0000000000
--- a/packages/theme-saas/src/theme/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-import { flattenObject } from './utils'
-import { impressionTheme } from './impression-theme'
-import { infinityTheme } from './infinity-theme'
-import { deepTheme } from './deep-theme'
-import { galaxyTheme } from './galaxy-theme'
-import * as auroraTheme from './aurora-theme'
-import * as smbTheme from './smb-theme'
-
-export const tinyImpressionTheme = {
-  id: 'tiny-impression-theme',
-  name: 'Impression',
-  cnName: '印象',
-  data: impressionTheme
-}
-
-export const tinyInfinityTheme = {
-  id: 'tiny-infinity-theme',
-  name: 'Infinity',
-  cnName: '无限',
-  data: infinityTheme
-}
-
-export const tinyDeepTheme = {
-  id: 'tiny-deep-theme',
-  name: 'Deep',
-  cnName: '深邃夜空',
-  data: deepTheme
-}
-
-export const tinyGalaxyTheme = {
-  id: 'tiny-galaxy-theme',
-  name: 'Galaxy',
-  cnName: '追光',
-  data: galaxyTheme
-}
-
-export const tinyAuroraTheme = {
-  id: 'tiny-aurora-theme',
-  name: 'Aurora',
-  cnName: 'Aurora',
-  data: flattenObject(auroraTheme)
-}
-
-export const tinySmbTheme = {
-  id: 'tiny-smb-theme',
-  name: 'SMB',
-  cnName: 'SMB',
-  data: flattenObject(smbTheme)
-}
diff --git a/packages/theme-saas/src/theme/infinity-theme/index.js b/packages/theme-saas/src/theme/infinity-theme/index.js
deleted file mode 100644
index 2dfa228b5a..0000000000
--- a/packages/theme-saas/src/theme/infinity-theme/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-export const infinityTheme = {}
diff --git a/packages/theme-saas/src/theme/smb-theme/index.js b/packages/theme-saas/src/theme/smb-theme/index.js
deleted file mode 100644
index dfd526f0cb..0000000000
--- a/packages/theme-saas/src/theme/smb-theme/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export const tinyBaseSmbTheme = {}
diff --git a/packages/theme-saas/src/theme/utils.js b/packages/theme-saas/src/theme/utils.js
deleted file mode 100644
index a8cbcf0012..0000000000
--- a/packages/theme-saas/src/theme/utils.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export function flattenObject(obj) {
-  const result = {}
-
-  Object.entries(obj).forEach(([key, val]) => {
-    if (val && typeof val === 'object') Object.assign(result, val)
-    else result[key] = val
-  })
-
-  return result
-}