diff --git a/docs/.vuepress/client.ts b/docs/.vuepress/client.ts
index b71c3f8d..297ee754 100644
--- a/docs/.vuepress/client.ts
+++ b/docs/.vuepress/client.ts
@@ -2,11 +2,17 @@ import { type ClientConfig, defineClientConfig } from 'vuepress/client'
 import HeroTintPlateConfig from './themes/components/HeroTintPlateConfig.vue'
 import CanIUseConfig from './themes/components/CanIUseConfig.vue'
 import Demos from './themes/components/Demos.vue'
+import ThemeColors from './themes/components/ThemeColors.vue'
+import { setupThemeColors } from './themes/composables/theme-colors.js'
 
 export default defineClientConfig({
   enhance({ app }) {
     app.component('HeroTintPlateConfig', HeroTintPlateConfig)
     app.component('CanIUseConfig', CanIUseConfig)
     app.component('Demos', Demos)
+    app.component('ThemeColors', ThemeColors)
+  },
+  setup() {
+    setupThemeColors()
   },
 }) as ClientConfig
diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts
index a7f1a73a..0109a963 100644
--- a/docs/.vuepress/notes.ts
+++ b/docs/.vuepress/notes.ts
@@ -147,7 +147,7 @@ export const zhNotes = definePlumeNotesConfig({
         {
           text: '工具',
           icon: 'tabler:tools',
-          items: ['home-hero-tint-plate', 'caniuse'],
+          items: ['custom-theme', 'home-hero-tint-plate', 'caniuse'],
         },
       ],
     },
diff --git a/docs/README.md b/docs/README.md
index ed84ea3b..7b3c66c0 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -127,19 +127,19 @@ config:
 :::code-tabs
 @tab pnpm
 
-```sh
+```sh :no-line-numbers
 pnpm add vuepress@next vuepress-theme-plume vue
 ```
 
 @tab npm
 
-```sh
+```sh :no-line-numbers
 npm install vuepress@next vuepress-theme-plume
 ```
 
 @tab yarn
 
-```sh
+```sh :no-line-numbers
 yarn add vuepress@next vuepress-theme-plume
 ```
 
@@ -150,7 +150,7 @@ yarn add vuepress@next vuepress-theme-plume
 ::: code-tabs
 @tab .vuepress/config.ts
 
-```ts
+```ts :no-line-numbers
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -166,7 +166,7 @@ export default defineUserConfig({
 
 ### 更新记录
 
-[Changelog](/changelog/)
+[Changelog](./changelog.md)
 
 ### 贡献者
 
diff --git a/docs/notes/theme/guide/安装与使用.md b/docs/notes/theme/guide/安装与使用.md
index 1baa99ec..7020bfc9 100644
--- a/docs/notes/theme/guide/安装与使用.md
+++ b/docs/notes/theme/guide/安装与使用.md
@@ -28,7 +28,7 @@ tags:
 
 - ### 新建文件夹并进入目录
 
-  ``` sh
+  ``` sh :no-line-numbers
   mkdir my-blog
   cd my-blog
   ```
@@ -38,21 +38,21 @@ tags:
   ::: code-tabs
   @tab pnpm
 
-  ``` sh
+  ``` sh :no-line-numbers
   git init
   pnpm init
   ```
 
   @tab yarn
 
-  ``` sh
+  ``` sh :no-line-numbers
   git init
   yarn init
   ```
 
   @tab npm
 
-  ``` sh
+  ``` sh :no-line-numbers
   git init
   npm init
   ```
@@ -66,7 +66,7 @@ tags:
   ::: code-tabs
   @tab pnpm
 
-  ```sh
+  ```sh :no-line-numbers
   # 安装 vuepress
   pnpm add -D vuepress@next vue
   # 安装 主题和打包工具
@@ -75,7 +75,7 @@ tags:
 
   @tab yarn
 
-  ``` sh
+  ``` sh :no-line-numbers
   # 安装 vuepress
   yarn add -D vuepress@next
   # 安装 主题和打包工具
@@ -84,7 +84,7 @@ tags:
 
   @tab npm
 
-  ``` sh
+  ``` sh :no-line-numbers
   # 安装 vuepress
   npm i -D vuepress@next
   # 安装 主题和打包工具
@@ -103,7 +103,7 @@ tags:
   ::: code-tabs
   @tab package.json
 
-  ``` json
+  ``` json :no-line-numbers
   {
     "scripts": {
       "dev": "vuepress dev docs",
@@ -121,7 +121,7 @@ tags:
   ::: code-tabs
   @tab .gitignore
 
-  ``` txt
+  ``` txt :no-line-numbers
   node_modules
   .temp
   .cache
@@ -129,7 +129,7 @@ tags:
 
   @tab sh
 
-  ``` sh
+  ``` sh :no-line-numbers
   echo 'node_modules' >> .gitignore
   echo '.temp' >> .gitignore
   echo '.cache' >> .gitignore
@@ -142,7 +142,7 @@ tags:
   ::: code-tabs
   @tab docs/.vuepress/config.js
 
-  ``` ts
+  ``` ts :no-line-numbers
   import { defineUserConfig } from 'vuepress'
   import { viteBundler } from '@vuepress/bundler-vite'
   import { plumeTheme } from 'vuepress-theme-plume'
@@ -170,7 +170,7 @@ tags:
   ::: code-tabs
   @tab README.md
 
-  ``` md
+  ``` md :no-line-numbers
   ---
   home: true
   ---
@@ -183,19 +183,19 @@ tags:
   ::: code-tabs
   @tab pnpm
 
-  ```sh
+  ```sh :no-line-numbers
   pnpm dev
   ```
 
   @tab yarn
 
-  ``` sh
+  ``` sh :no-line-numbers
   yarn dev
   ```
 
   @tab npm
 
-  ``` sh
+  ``` sh :no-line-numbers
   npm run dev
   ```
 
diff --git a/docs/notes/theme/guide/编写文章.md b/docs/notes/theme/guide/编写文章.md
index 6ee5e51f..12a9fc85 100644
--- a/docs/notes/theme/guide/编写文章.md
+++ b/docs/notes/theme/guide/编写文章.md
@@ -30,7 +30,7 @@ tags:
 
 由于文件夹名称将作为分类名称，且不在主题配置中进行排序配置，对于有排序需要的场景，使用以下规则进行命名
 
-``` ts
+``` ts :no-line-numbers
 const dir = /\d+\.[\s\S]+/
 // 即 数字 + . + 分类名称
 // 如： 1.前端
@@ -40,7 +40,7 @@ const dir = /\d+\.[\s\S]+/
 
 __example:__
 
-``` txt
+``` txt :no-line-numbers
  .{sourceDir}
   - 1.前端
     - 1.html
diff --git a/docs/notes/theme/guide/自定义样式.md b/docs/notes/theme/guide/自定义样式.md
index bb4a6c18..e67fa20d 100644
--- a/docs/notes/theme/guide/自定义样式.md
+++ b/docs/notes/theme/guide/自定义样式.md
@@ -92,3 +92,7 @@ export default defineClientConfig({
   --vp-c-text-3: rgba(235, 235, 245, 0.38);
 }
 ```
+
+::: tip
+主题提供了 [主题颜色工具](../../tools/custom-theme.md) , 你可以使用它来创建自定义颜色。
+:::
diff --git a/docs/notes/tools/caniuse.md b/docs/notes/tools/caniuse.md
index 07b9ffac..fe3ebcc0 100644
--- a/docs/notes/tools/caniuse.md
+++ b/docs/notes/tools/caniuse.md
@@ -17,7 +17,7 @@ lastUpdated: false
 搜索 `@property`,点击 `#` 会跳转到 `https://caniuse.com/mdn-css_at-rules_property`，
 可以直接复制 `mdn-css_at-rules_property` ，粘贴到 markdown 文件中:
 
-```md
+```md :no-line-numbers
 @[caniuse](mdn-css_at-rules_property)
 ```