diff --git a/designer-demo/package.json b/designer-demo/package.json
index 51c607e8b8..3e50bba3e8 100644
--- a/designer-demo/package.json
+++ b/designer-demo/package.json
@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build"
+    "dev": "cross-env VITE_THEME=light vite",
+    "build": "cross-env VITE_THEME=light vite build"
   },
   "dependencies": {
     "vue": "^3.4.21",
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "cross-env": "^7.0.3",
     "vite": "^5.2.7",
     "@opentiny/tiny-engine-vite-config": "workspace:^",
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:^"
diff --git a/designer-demo/registry.js b/designer-demo/registry.js
index 1d54f09a53..0a162218f2 100644
--- a/designer-demo/registry.js
+++ b/designer-demo/registry.js
@@ -42,16 +42,23 @@ import {
   Styles,
 } from '@opentiny/tiny-engine'
 
-
 export default {
   config: {
     id: 'engine.config',
-    theme: 'light',
+    theme: import.meta.env.VITE_THEME || 'light',
     material: ['/mock/bundle.json'],
     scripts: [],
     styles: []
   },
   layout: { id: 'engine.layout' },
+  themes: [
+    {
+      id: 'engine.theme.light'
+    },
+    {
+      id: 'engine.theme.dark'
+    }
+  ],
   toolbars: [
     Logo,
     Breadcrumb,
diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js
index fda1cda42c..1439203056 100644
--- a/designer-demo/src/main.js
+++ b/designer-demo/src/main.js
@@ -16,6 +16,7 @@ import { init } from '@opentiny/tiny-engine'
 import { initHook, HOOK_NAME } from '@opentiny/tiny-engine-entry'
 import { configurators } from './configurators.js'
 import 'virtual:svg-icons-register'
+import '@opentiny/tiny-engine-theme'
 
 const beforeAppCreate = () => {
   initHook(HOOK_NAME.useEnv, import.meta.env)
diff --git a/designer-demo/vite.config.js b/designer-demo/vite.config.js
index 8eb8e1b2c4..0bed17012b 100644
--- a/designer-demo/vite.config.js
+++ b/designer-demo/vite.config.js
@@ -61,7 +61,11 @@ export default defineConfig((options) => {
     '@opentiny/tiny-engine-builtin-component': path.resolve(__dirname, '../packages/builtinComponent/index.js'),
     '@opentiny/tiny-engine-entry': path.resolve(__dirname, '../packages/entry/src/index.js'),
     '@opentiny/tiny-engine-layout': path.resolve(__dirname, '../packages/layout/index.js'),
-    '@opentiny/tiny-engine-configurator': path.resolve(__dirname, '../packages/configurator/src/index.js')
+    '@opentiny/tiny-engine-configurator': path.resolve(__dirname, '../packages/configurator/src/index.js'),
+    '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(extOptions.VITE_THEME)
+    ? path.resolve(process.cwd(), `../packages/theme/${extOptions.VITE_THEME}/index.less`)
+    // ? path.resolve(process.cwd(), `./node_modules/@opentiny/tiny-engine/node_modules/@opentiny/tiny-engine-theme-${extOptions.VITE_THEME}/dist/style.css`)
+    : ''
   }
 
   const config = {
@@ -74,6 +78,6 @@ export default defineConfig((options) => {
       alias: devAlias
     }
   }
-
+  
   return mergeConfig(defaultConfig, config)
 })
diff --git a/packages/design-core/registry.js b/packages/design-core/registry.js
index 5572014dab..c56bfd2f47 100644
--- a/packages/design-core/registry.js
+++ b/packages/design-core/registry.js
@@ -66,5 +66,15 @@ export default {
     lifeCycleTips: {
       Vue: '通过Vue解构出来的方法都可以在setup这里使用，比如watch、computed、watchEffect等'
     }
-  }
+  },
+  themes: [
+    {
+      id: 'engine.theme.light',
+      title: '亮色主题'
+    },
+    {
+      id: 'engine.theme.dark',
+      title: '暗色主题'
+    }
+  ],
 }
diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js
index 59a5316a51..516e87ef5d 100644
--- a/packages/design-core/src/init.js
+++ b/packages/design-core/src/init.js
@@ -36,7 +36,7 @@ const defaultLifeCycles = {
     defineEntry(newRegistry)
 
     // 加载主题样式，尽早加载
-    import(`./theme/${newRegistry.config.theme}.js`)
+    // import(`./theme/${newRegistry.config.theme}.js`)
 
     initHttp({ env: import.meta.env })