diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 783b4913b8d0bab9f88f569346bfff35ae062fd4..f4a179802ccb45a7942e2412e871987312e4722d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -565,6 +565,7 @@ const config: UserConfig = {
           items: [
             { text: '样式', link: '/style-layout/style' },
             { text: '布局', link: '/style-layout/layout' },
+            { text: '界面主题', link: '/style-layout/ui-theme' },
           ],
         },
       ],
diff --git a/docs/public/png/custom-theme/image-20240110154148847.png b/docs/public/png/custom-theme/image-20240110154148847.png
new file mode 100644
index 0000000000000000000000000000000000000000..0eb6c6f09103256390bf0ad7b261eecaa7e82a88
Binary files /dev/null and b/docs/public/png/custom-theme/image-20240110154148847.png differ
diff --git a/docs/style-layout/ui-theme.md b/docs/style-layout/ui-theme.md
new file mode 100644
index 0000000000000000000000000000000000000000..581fbcf2e9a6c4eb46a34943ea44228a94d74835
--- /dev/null
+++ b/docs/style-layout/ui-theme.md
@@ -0,0 +1,60 @@
+# 界面主题包
+
+
+
+## 简介
+
+界面主题包是一种包含视觉样式和布局信息的文件，用于定义应用程序的界面外观和行为。它通常包括以下内容：
+
+1. 颜色方案：定义应用程序中各个元素的颜色，如背景颜色、文本颜色、按钮颜色等。
+
+2. 字体样式：规定应用程序中文本的字体、字号、字重以及其他字体相关的属性。
+
+3. 图标和图片：包含应用程序中使用的各种图标和图片资源。
+
+4. 布局样式：定义应用程序各个界面元素的排列方式、间距、边框等。
+
+5. 动画效果：规定应用程序中的过渡效果、动态交互效果等。
+
+界面主题包的优势在于它提供了灵活性和可定制性，使用户能够根据自己的需求和偏好来调整应用程序的外观和体验。同时，界面主题包也提供了一种统一和可扩展的方式来管理应用程序的视觉样式，并实现各种主题的切换和定制。
+
+
+
+## 定制界面主题包
+
+界面主题包本质上来说是一个插件拓展包，因此界面主题包的结构可以参考[插件](../plugin/#_1-获取插件模板项目)文档。
+
+### 配置 
+
+1. 打开前端应用。 
+2. 进入应用主题界面。
+3. 新建主题。
+4. 配置主题参数[theme-package-path]。
+
+**注： theme-package-path 参数格式为 `插件名称@版本号`**
+
+![image-20240110154148847](../public/png/custom-theme/image-20240110154148847.png)
+
+### 注入
+
+一旦你新建并启用了一个界面主题，应用程序将根据配置的主题参数 `theme-package-path` 获取该路径下的主题包，并将其注入到应用中。这样，应用程序将使用这个界面主题包来改变界面的外观和行为。
+
+### 注意事项
+
+当你使用定制界面主题包时，模板将不会自动注入默认的界面主题包。如果你只想调整局部主题，你可以选择继承一个合适的界面主题包作为基础（以 mob-theme 为例）进行定制。
+
+```ts
+// 插件包入口文件
+
+// 导入继承的主题包
+import theme from '@ibiz-template/mob-theme';
+
+export default {
+  install(app: App) {
+    // 挂载继承主题
+    app.use(theme);
+  },
+};
+
+```
+
diff --git a/package.json b/package.json
index 11620ccbc436a16379435f2b9b568ae03eb8a541..e8d9c29489bfa700a568433358d42910c914bb41 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "模板文档",
   "main": "index.js",
   "scripts": {
-    "dev": "vitepress dev docs",
+    "dev": "vitepress dev docs --host 0.0.0.0",
     "build": "vitepress build docs",
     "dev:studio": "vitepress dev studio",
     "build:studio": "vitepress build studio",