diff --git a/packages/varlet-cli/README.en-US.md b/packages/varlet-cli/README.en-US.md
index 12cd2151493..4e5937d5599 100644
--- a/packages/varlet-cli/README.en-US.md
+++ b/packages/varlet-cli/README.en-US.md
@@ -12,6 +12,7 @@ The out-of-the-box `Vue3 component library` rapid prototyping tool provides a se
 - 6.Unit testing tools out of the box
 - 7.Out-of-the-box code publishing tool, publish to npm and github, and automatically generate a change log
 - 8.Support `Typescript`
+- 9.Support `Dark Mode`
 
 ### Quickstart
 
@@ -49,6 +50,7 @@ The `varlet.config.js` in the project root directory is used to manage the speci
 | `defaultLanguage` | Document default language | _string_ | `zh-CN` |
 | `useMobile` | Whether to display the right mobile phone preview | _boolean_ | `false` |
 | `themes` | Document themes | _SiteThemes_ | `-` |
+| `darkThemes` | Document dark mode themes | _SiteThemes_ | `-` |
 | `highlight` | Document code snippet style related | _SiteHighlight_ | `-` |
 | `analysis` | Document statistics related | _SiteAnalysis_ | `-` |
 | `pc` | PC-side document structure configuration | _SitePC_ | `-` |
@@ -62,6 +64,14 @@ subject to the theme of the `varlet` official document
 
 | Variable |
 | ----- |
+| `color-body` |
+| `color-bar` |
+| `color-sub-bar` |
+| `color-text` |
+| `color-sub-text` |
+| `color-border` |
+| `color-shadow` |
+| `color-introduce-border` |
 | `color-primary` |
 | `color-link` |
 | `color-type` |
@@ -70,10 +80,10 @@ subject to the theme of the `varlet` official document
 | `color-side-bar` |
 | `color-side-bar-active-background` |
 | `color-app-bar` |
-| `color-mobile-cell-hover` |
-| `color-mobile-cell-hover-background` |
+| `color-nav-button-hover-background` |
 | `color-pc-language-active` |
 | `color-pc-language-active-background` |
+| `color-mobile-cell-hover` |
 | `color-mobile-language-active` |
 | `color-mobile-language-active-background` |
 
diff --git a/packages/varlet-cli/README.md b/packages/varlet-cli/README.md
index 0cd8f3f2e67..bb2c4d6dcf1 100644
--- a/packages/varlet-cli/README.md
+++ b/packages/varlet-cli/README.md
@@ -12,6 +12,7 @@
 - 6.开箱即用的单元测试工具
 - 7.开箱即用的代码发布工具,发布到npm和github,并自动生成更新日志
 - 8.支持`Typescript`
+- 9.支持`暗黑模式`
 
 ### 快速开始
 
@@ -47,6 +48,7 @@ yarn dev
 | `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
 | `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |
 | `themes` | 文档主题 | _SiteThemes_ | `-` |
+| `darkThemes` | 暗黑模式文档主题 | _SiteThemes_ | `-` |
 | `highlight` | 文档代码片段样式相关 | _SiteHighlight_ | `-` |
 | `analysis` | 文档统计相关 | _SiteAnalysis_ | `-` |
 | `pc` | pc端文档结构配置 | _SitePC_ | `-` |
@@ -58,6 +60,14 @@ yarn dev
 
 | 参数 |
 | ----- |
+| `color-body` |
+| `color-bar` |
+| `color-sub-bar` |
+| `color-text` |
+| `color-sub-text` |
+| `color-border` |
+| `color-shadow` |
+| `color-introduce-border` |
 | `color-primary` |
 | `color-link` |
 | `color-type` |
@@ -66,10 +76,10 @@ yarn dev
 | `color-side-bar` |
 | `color-side-bar-active-background` |
 | `color-app-bar` |
-| `color-mobile-cell-hover` |
-| `color-mobile-cell-hover-background` |
+| `color-nav-button-hover-background` |
 | `color-pc-language-active` |
 | `color-pc-language-active-background` |
+| `color-mobile-cell-hover` |
 | `color-mobile-language-active` |
 | `color-mobile-language-active-background` |
 
diff --git a/packages/varlet-ui/docs/cli.en-US.md b/packages/varlet-ui/docs/cli.en-US.md
index 12cd2151493..058303acb80 100644
--- a/packages/varlet-ui/docs/cli.en-US.md
+++ b/packages/varlet-ui/docs/cli.en-US.md
@@ -12,11 +12,12 @@ The out-of-the-box `Vue3 component library` rapid prototyping tool provides a se
 - 6.Unit testing tools out of the box
 - 7.Out-of-the-box code publishing tool, publish to npm and github, and automatically generate a change log
 - 8.Support `Typescript`
+- 9.Support `Dark Mode`
 
 ### Quickstart
 
 `@varlet/cli` has built-in `single file component (sfc)` and `tsx, jsx` two styles of component library project templates, which can be directly generated by the `gen` command.
-To help users directly enter the development of the component itself, it is recommended to use `yarn` as a package management tool. First, make sure that `yarn` is installed and added to the system environment variables. 
+To help users directly enter the development of the component itself, it is recommended to use `yarn` as a package management tool. First, make sure that `yarn` is installed and added to the system environment variables.
 The installation and configuration methods of `yarn` are not introduced here.
 
 ```shell
@@ -49,6 +50,7 @@ The `varlet.config.js` in the project root directory is used to manage the speci
 | `defaultLanguage` | Document default language | _string_ | `zh-CN` |
 | `useMobile` | Whether to display the right mobile phone preview | _boolean_ | `false` |
 | `themes` | Document themes | _SiteThemes_ | `-` |
+| `darkThemes` | Document dark mode themes | _SiteThemes_ | `-` |
 | `highlight` | Document code snippet style related | _SiteHighlight_ | `-` |
 | `analysis` | Document statistics related | _SiteAnalysis_ | `-` |
 | `pc` | PC-side document structure configuration | _SitePC_ | `-` |
@@ -56,12 +58,20 @@ The `varlet.config.js` in the project root directory is used to manage the speci
 
 #### SiteThemes
 
-Theme variables are related, 
+Theme variables are related,
 because the default theme variables may be modified from time to time,
 subject to the theme of the `varlet` official document
 
 | Variable |
 | ----- |
+| `color-body` |
+| `color-bar` |
+| `color-sub-bar` |
+| `color-text` |
+| `color-sub-text` |
+| `color-border` |
+| `color-shadow` |
+| `color-introduce-border` |
 | `color-primary` |
 | `color-link` |
 | `color-type` |
@@ -70,10 +80,10 @@ subject to the theme of the `varlet` official document
 | `color-side-bar` |
 | `color-side-bar-active-background` |
 | `color-app-bar` |
-| `color-mobile-cell-hover` |
-| `color-mobile-cell-hover-background` |
+| `color-nav-button-hover-background` |
 | `color-pc-language-active` |
 | `color-pc-language-active-background` |
+| `color-mobile-cell-hover` |
 | `color-mobile-language-active` |
 | `color-mobile-language-active-background` |
 
@@ -242,7 +252,7 @@ module.exports = {
 
 #### git-hook
 
-`husky`, `lint-staged` cooperate with `eslint`, `stylelint`, `commitlint` to check before commit, 
+`husky`, `lint-staged` cooperate with `eslint`, `stylelint`, `commitlint` to check before commit,
 `package.json` configuration is as follows
 
 ```json
@@ -335,7 +345,7 @@ create `tsconfig.json`
 
 ### Release code
 
-Use `release-it` and `conventional-changelog` for code release and update log generation. 
+Use `release-it` and `conventional-changelog` for code release and update log generation.
 The configuration of `package.json` is as follows
 
 ```json
diff --git a/packages/varlet-ui/docs/cli.zh-CN.md b/packages/varlet-ui/docs/cli.zh-CN.md
index 0cd8f3f2e67..bb2c4d6dcf1 100644
--- a/packages/varlet-ui/docs/cli.zh-CN.md
+++ b/packages/varlet-ui/docs/cli.zh-CN.md
@@ -12,6 +12,7 @@
 - 6.开箱即用的单元测试工具
 - 7.开箱即用的代码发布工具,发布到npm和github,并自动生成更新日志
 - 8.支持`Typescript`
+- 9.支持`暗黑模式`
 
 ### 快速开始
 
@@ -47,6 +48,7 @@ yarn dev
 | `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
 | `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |
 | `themes` | 文档主题 | _SiteThemes_ | `-` |
+| `darkThemes` | 暗黑模式文档主题 | _SiteThemes_ | `-` |
 | `highlight` | 文档代码片段样式相关 | _SiteHighlight_ | `-` |
 | `analysis` | 文档统计相关 | _SiteAnalysis_ | `-` |
 | `pc` | pc端文档结构配置 | _SitePC_ | `-` |
@@ -58,6 +60,14 @@ yarn dev
 
 | 参数 |
 | ----- |
+| `color-body` |
+| `color-bar` |
+| `color-sub-bar` |
+| `color-text` |
+| `color-sub-text` |
+| `color-border` |
+| `color-shadow` |
+| `color-introduce-border` |
 | `color-primary` |
 | `color-link` |
 | `color-type` |
@@ -66,10 +76,10 @@ yarn dev
 | `color-side-bar` |
 | `color-side-bar-active-background` |
 | `color-app-bar` |
-| `color-mobile-cell-hover` |
-| `color-mobile-cell-hover-background` |
+| `color-nav-button-hover-background` |
 | `color-pc-language-active` |
 | `color-pc-language-active-background` |
+| `color-mobile-cell-hover` |
 | `color-mobile-language-active` |
 | `color-mobile-language-active-background` |