From d15d29b09c1006c71e661a5c011deeb60dc1f0a2 Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Wed, 5 Jun 2024 19:49:32 +0800
Subject: [PATCH 01/63] feat: init guidelines

---
 .../plugins/development/sass-palette/guide.md |  8 ++--
 docs/plugins/features/copy-code.md            |  2 +-
 docs/plugins/features/medium-zoom.md          |  2 +-
 docs/plugins/features/photo-swipe.md          |  2 +-
 docs/plugins/markdown/markdown-image.md       |  4 +-
 docs/plugins/search/docsearch.md              | 14 +++----
 docs/themes/default/frontmatter.md            |  2 +-
 docs/themes/guidelines.md                     | 38 +++++++++++++++++++
 docs/tools/helper/client.md                   |  4 +-
 .../plugins/development/sass-palette/guide.md |  8 ++--
 docs/zh/plugins/features/copy-code.md         |  2 +-
 docs/zh/plugins/features/medium-zoom.md       |  2 +-
 docs/zh/plugins/features/photo-swipe.md       |  2 +-
 docs/zh/plugins/markdown/markdown-image.md    |  4 +-
 docs/zh/plugins/search/docsearch.md           | 14 +++----
 docs/zh/themes/default/frontmatter.md         |  2 +-
 docs/zh/tools/helper/client.md                |  4 +-
 .../src/client/components/CommentService.ts   |  9 +++--
 .../src/client/components/WalineComment.ts    |  2 +-
 .../src/client/styles/base.scss               |  2 +-
 .../styles/default/config.scss                |  7 +---
 .../src/node/copyCodePlugin.ts                |  2 +-
 .../plugin-copy-code/src/node/options.ts      |  2 +-
 .../src/node/mediumZoomPlugin.ts              |  4 +-
 .../plugin-photo-swipe/src/node/options.ts    |  2 +-
 .../src/node/photoSwipePlugin.ts              |  3 +-
 .../plugin-markdown-image/src/node/options.ts |  4 +-
 .../node/prepare/prepareClientConfigFile.ts   |  4 +-
 .../src/client/components/VPHome.vue          |  2 +-
 .../src/client/components/VPHomeFooter.vue    |  4 +-
 .../src/client/components/VPNavbar.vue        |  2 +-
 .../src/client/components/VPPage.vue          |  2 +-
 .../src/client/components/VPSidebar.vue       |  2 +-
 .../src/client/composables/useDarkMode.ts     |  7 ++--
 .../src/client/layouts/Layout.vue             |  1 +
 .../src/client/layouts/NotFound.vue           |  4 +-
 .../src/client/styles/arrow.scss              |  2 +-
 .../src/client/styles/normalize.scss          |  2 +-
 .../src/client/styles/plugins.scss            |  2 +-
 .../src/client/styles/vars-dark.scss          |  2 +-
 themes/theme-default/templates/build.html     | 14 ++++---
 tools/helper/src/client/utils/getHeaders.ts   |  6 ++-
 42 files changed, 125 insertions(+), 82 deletions(-)
 create mode 100644 docs/themes/guidelines.md

diff --git a/docs/plugins/development/sass-palette/guide.md b/docs/plugins/development/sass-palette/guide.md
index 9effb13581..c18334f53b 100644
--- a/docs/plugins/development/sass-palette/guide.md
+++ b/docs/plugins/development/sass-palette/guide.md
@@ -103,9 +103,9 @@ If the Scss file is not imported directly, but is imported through `@use` or `@i
 
 ::: tip
 
-- If you are developing a plugin, you may set `$dark-selector: html.dark !default;` in default config files, as `@vuepress/theme-default` is doing that.
+- If you are developing a plugin, you may set `$dark-selector: html[data-theme="dark"] !default;` in default config files, as our guideline is asking this.
 
-  Your plugin will work with default theme, and users are allowed to change this selector in config file if they are using a third-party theme with different dark selector.
+  Your plugin will work with most of theme, and users are still allowed to change this selector in config file if they are using a third-party theme with different dark selector.
 
 - If you are developing a theme, you may set `$dark-selector` in default config files with your darkmode selector without `!default`, to insure users cannot override it.
 
@@ -180,7 +180,7 @@ $bg-color: (
 ) !default;
 ```
 
-Then if `$dark-selector` has a value `"html.dark"` in config file, you will get:
+Then if `$dark-selector` has a value `"html[data-theme="dark"]"` in config file, you will get:
 
 ```scss
 :root {
@@ -188,7 +188,7 @@ Then if `$dark-selector` has a value `"html.dark"` in config file, you will get:
   --bg-color: #fff;
 }
 
-html.dark {
+html[data-theme='dark'] {
   --text-color: #999;
   --bg-color: #1e1e1e;
 }
diff --git a/docs/plugins/features/copy-code.md b/docs/plugins/features/copy-code.md
index 7c18e56430..00ecff3ec5 100644
--- a/docs/plugins/features/copy-code.md
+++ b/docs/plugins/features/copy-code.md
@@ -29,7 +29,7 @@ export default {
 ### selector
 
 - Type: `string | string[]`
-- Default: `'.theme-default-content div[class*="language-"] pre'`
+- Default: `'[vp-content] div[class*="language-"] pre'`
 - Details:
 
   Code block selector
diff --git a/docs/plugins/features/medium-zoom.md b/docs/plugins/features/medium-zoom.md
index 362dce2544..9148ca082f 100644
--- a/docs/plugins/features/medium-zoom.md
+++ b/docs/plugins/features/medium-zoom.md
@@ -30,7 +30,7 @@ export default {
 
 - Type: `string`
 
-- Default: `':not(a) > img'`
+- Default: `'[vp-content] :not(a) > img'`
 
 - Details:
 
diff --git a/docs/plugins/features/photo-swipe.md b/docs/plugins/features/photo-swipe.md
index 33e06bbddd..f80a222935 100644
--- a/docs/plugins/features/photo-swipe.md
+++ b/docs/plugins/features/photo-swipe.md
@@ -43,7 +43,7 @@ In preview mode, you can:
 ### selector
 
 - Type: `string | string[]`
-- Default: `".theme-default-content :not(a) > img:not([no-view])"`
+- Default: `"[vp-content] :not(a) > img:not([no-view])"`
 - Details: Image selector
 
 ### download
diff --git a/docs/plugins/markdown/markdown-image.md b/docs/plugins/markdown/markdown-image.md
index 496cdc8b51..f0751c05a6 100644
--- a/docs/plugins/markdown/markdown-image.md
+++ b/docs/plugins/markdown/markdown-image.md
@@ -150,13 +150,13 @@ If the image is standalone in a line, wrapped or not wrapped by link, it will be
 ### lightmodeSelector
 
 - Type: `string`
-- Default: `'html:not(.dark)'`
+- Default: `'html[data-theme="light"]'`
 - Details: The selector to detect light mode.
 
 ### darkmodeSelector
 
 - Type: `string`
-- Default: `'html.dark'`
+- Default: `'html[data-theme="dark"]'`
 - Details: The selector to detect dark mode.
 
 <script setup>
diff --git a/docs/plugins/search/docsearch.md b/docs/plugins/search/docsearch.md
index 7f4e820524..5f5b958cd2 100644
--- a/docs/plugins/search/docsearch.md
+++ b/docs/plugins/search/docsearch.md
@@ -77,13 +77,13 @@ new Crawler({
               selectors: '.vp-sidebar-heading.active',
               defaultValue: 'Documentation',
             },
-            lvl1: '.theme-default-content h1',
-            lvl2: '.theme-default-content h2',
-            lvl3: '.theme-default-content h3',
-            lvl4: '.theme-default-content h4',
-            lvl5: '.theme-default-content h5',
-            lvl6: '.theme-default-content h6',
-            content: '.theme-default-content p, .theme-default-content li',
+            lvl1: '[vp-content] h1',
+            lvl2: '[vp-content] h2',
+            lvl3: '[vp-content] h3',
+            lvl4: '[vp-content] h4',
+            lvl5: '[vp-content] h5',
+            lvl6: '[vp-content] h6',
+            content: '[vp-content] p, [vp-content] li',
           },
           indexHeadings: true,
         })
diff --git a/docs/themes/default/frontmatter.md b/docs/themes/default/frontmatter.md
index 67f165cd7a..27c1c3c449 100644
--- a/docs/themes/default/frontmatter.md
+++ b/docs/themes/default/frontmatter.md
@@ -49,7 +49,7 @@ pageClass: custom-page-class
 Then you can customize styles of this page in `.vuepress/styles/index.scss` file:
 
 ```scss
-.theme-container.custom-page-class {
+[vp-container].custom-page-class {
   /* page styles */
 }
 ```
diff --git a/docs/themes/guidelines.md b/docs/themes/guidelines.md
new file mode 100644
index 0000000000..3cd2ab863d
--- /dev/null
+++ b/docs/themes/guidelines.md
@@ -0,0 +1,38 @@
+# Theme Guidelines
+
+To avoid theme developers and users setting unneeded options, we have a set of guidelines that should be followed when creating a theme.
+
+## DOM Structure
+
+A theme must implement the following DOM structure:
+
+- Container: An element which contains the entire theme. This element should have the id and the same attribute `vp-container`.
+- Content: An element which holds markdown render results. This element should have the id and the same attribute `vp-content`.
+
+A theme may have the following optional elements:
+
+- Navbar: Navbar of the site. This element should have the id and the same attribute `vp-navbar`.
+- Sidebar: Sidebar of the site. This element should have the id and the same attribute `vp-sidebar`.
+- Outline: Headings or outline of the main content. This element should have the id and the same attribute `vp-outline`.
+- Comment: Comment service (comment box and comment list). This element should have the id and the same attribute `vp-comment`.
+- Footer: Footer of the site. This element should have the id and the same attribute `vp-footer`.
+
+A theme must:
+
+- Set `data-theme` to `dark` on html in darkmode.
+- Set `data-theme` to `light` on html in lightmode.
+
+If it only have one color scheme, it still needs to set `data-theme` to `light` or `dark` to indicate the default color scheme.
+
+## Color Variables
+
+A theme must implement the following color variables:
+
+TODO
+
+<!--
+- `--vp-bg-color`: Background color of the theme.
+- `--vp-text-color`: Text color of the theme.
+- `--vp-brand-color`: Theme color of the theme.
+- `--vp-brand-hover`: Theme color used hover state.
+- `--vp-brand-bg`: Theme color used in bg, must have enough contrast. -->
diff --git a/docs/tools/helper/client.md b/docs/tools/helper/client.md
index 38d328d8d3..1cb21278fa 100644
--- a/docs/tools/helper/client.md
+++ b/docs/tools/helper/client.md
@@ -78,7 +78,7 @@ export interface GetHeadersOptions {
    * It will be passed as an argument to `document.querySelectorAll(selector)`,
    * so you should pass a `CSS Selector` string.
    *
-   * @default '#vp-content h1, #vp-content h2, #vp-content h3, #vp-content h4, #vp-content h5, #vp-content h6'
+   * @default '[vp-content] h1, [vp-content] h2, [vp-content] h3, [vp-content] h4, [vp-content] h5, [vp-content] h6'
    */
   selector?: string
   /**
@@ -148,7 +148,7 @@ export type MenuItem = Omit<Header, 'slug' | 'children'> & {
 ```ts
 onMounted(() => {
   const headers = getHeaders({
-    selector: '#vp-content :where(h1,h2,h3,h4,h5,h6)',
+    selector: '[vp-content] :where(h1,h2,h3,h4,h5,h6)',
     levels: [2, 3], // only h2 and h3
     ignore: ['.badge'], // ignore the <Badge /> within the header
   })
diff --git a/docs/zh/plugins/development/sass-palette/guide.md b/docs/zh/plugins/development/sass-palette/guide.md
index 14b09150dc..723afda4a2 100644
--- a/docs/zh/plugins/development/sass-palette/guide.md
+++ b/docs/zh/plugins/development/sass-palette/guide.md
@@ -101,9 +101,9 @@ $sidebar-width: 18rem !default;
 
 ::: tip
 
-- 如果你正在开发插件，你可以在默认配置文件中设置 `$dark-selector: html.dark !default;`，因为这是 `@vuepress/theme-default` 的默认行为。
+- 如果你正在开发插件，你可以在默认配置文件中设置 `$dark-selector: html[data-theme="dark"] !default;`，因为这是社区对主题的推荐要求。
 
-  你的插件将在默认主题正常工作，如果用户使用具有不同深色模式选择器的第三方主题，则用户可以在配置文件中更改此选择器。
+  你的插件将在绝大多主题中正常工作，如果用户使用具有不同深色模式选择器的第三方主题，则用户可以在配置文件中更改此选择器。
 
 - 如果你在开发主题，你可以在默认配置文件中设置 `$dark-selector` 为你的深色模式选择器同时不包含 `!default`，确保用户不能覆盖它。
 
@@ -178,7 +178,7 @@ $bg-color: (
 ) !default;
 ```
 
-然后，如果在配置文件中 `$dark-selector` 的值为 `"html.dark"`，你会得到:
+然后，如果在配置文件中 `$dark-selector` 的值为 `"html[data-theme="dark"]"`，你会得到:
 
 ```scss
 :root {
@@ -186,7 +186,7 @@ $bg-color: (
   --bg-color: #fff;
 }
 
-html.dark {
+html[data-theme='dark'] {
   --text-color: #999;
   --bg-color: #1e1e1e;
 }
diff --git a/docs/zh/plugins/features/copy-code.md b/docs/zh/plugins/features/copy-code.md
index bffd840f3c..76f99525d3 100644
--- a/docs/zh/plugins/features/copy-code.md
+++ b/docs/zh/plugins/features/copy-code.md
@@ -29,7 +29,7 @@ export default {
 ### selector
 
 - 类型：`string | string[]`
-- 默认值：`'.theme-default-content div[class*="language-"] pre'`
+- 默认值：`'[vp-content] div[class*="language-"] pre'`
 - 详情:
 
   代码块选择器
diff --git a/docs/zh/plugins/features/medium-zoom.md b/docs/zh/plugins/features/medium-zoom.md
index 293eb6a2c2..65fea05ef5 100644
--- a/docs/zh/plugins/features/medium-zoom.md
+++ b/docs/zh/plugins/features/medium-zoom.md
@@ -30,7 +30,7 @@ export default {
 
 - 类型： `string`
 
-- 默认值： `':not(a) > img'`
+- 默认值： `'[vp-content] :not(a) > img'`
 
 - 详情：
 
diff --git a/docs/zh/plugins/features/photo-swipe.md b/docs/zh/plugins/features/photo-swipe.md
index c29d5db8b5..e0d673c56d 100644
--- a/docs/zh/plugins/features/photo-swipe.md
+++ b/docs/zh/plugins/features/photo-swipe.md
@@ -43,7 +43,7 @@ export default {
 ### selector
 
 - 类型：`string | string[]`
-- 默认值：`".theme-default-content :not(a) > img:not([no-view])"`
+- 默认值：`"[vp-content] :not(a) > img:not([no-view])"`
 - 详情：图片选择器
 
 ### download
diff --git a/docs/zh/plugins/markdown/markdown-image.md b/docs/zh/plugins/markdown/markdown-image.md
index bdfba3671a..8b4f79a04d 100644
--- a/docs/zh/plugins/markdown/markdown-image.md
+++ b/docs/zh/plugins/markdown/markdown-image.md
@@ -149,13 +149,13 @@ interface ImageMarkOptions {
 ### lightmodeSelector
 
 - 类型：`string`
-- 默认值：`'html:not(.dark)'`
+- 默认值：`'html[data-theme="light"]'`
 - 详情：日间模式的选择器。
 
 ### darkmodeSelector
 
 - 类型：`string`
-- 默认值：`'html.dark'`
+- 默认值：`'html[data-theme="dark"]'`
 - 详情：夜间模式的选择器。
 
 <script setup>
diff --git a/docs/zh/plugins/search/docsearch.md b/docs/zh/plugins/search/docsearch.md
index d4eaad7690..830585718e 100644
--- a/docs/zh/plugins/search/docsearch.md
+++ b/docs/zh/plugins/search/docsearch.md
@@ -76,13 +76,13 @@ new Crawler({
               selectors: '.vp-sidebar-heading.active',
               defaultValue: 'Documentation',
             },
-            lvl1: '.theme-default-content h1',
-            lvl2: '.theme-default-content h2',
-            lvl3: '.theme-default-content h3',
-            lvl4: '.theme-default-content h4',
-            lvl5: '.theme-default-content h5',
-            lvl6: '.theme-default-content h6',
-            content: '.theme-default-content p, .theme-default-content li',
+            lvl1: '[vp-content] h1',
+            lvl2: '[vp-content] h2',
+            lvl3: '[vp-content] h3',
+            lvl4: '[vp-content] h4',
+            lvl5: '[vp-content] h5',
+            lvl6: '[vp-content] h6',
+            content: '[vp-content] p, [vp-content] li',
           },
           indexHeadings: true,
         })
diff --git a/docs/zh/themes/default/frontmatter.md b/docs/zh/themes/default/frontmatter.md
index d8345ccb48..b427d200d6 100644
--- a/docs/zh/themes/default/frontmatter.md
+++ b/docs/zh/themes/default/frontmatter.md
@@ -49,7 +49,7 @@ pageClass: custom-page-class
 然后你可以在 `.vuepress/styles/index.scss` 文件中为这个页面添加自定义样式：
 
 ```scss
-.theme-container.custom-page-class {
+[vp-container].custom-page-class {
   /* 页面样式 */
 }
 ```
diff --git a/docs/zh/tools/helper/client.md b/docs/zh/tools/helper/client.md
index cbe37217c8..8be45217b7 100644
--- a/docs/zh/tools/helper/client.md
+++ b/docs/zh/tools/helper/client.md
@@ -75,7 +75,7 @@ export interface GetHeadersOptions {
   /**
    * 页面标题选择器
    *
-   * @default '#vp-content h1, #vp-content h2, #vp-content h3, #vp-content h4, #vp-content h5, #vp-content h6'
+   * @default '[vp-content] h1, [vp-content] h2, [vp-content] h3, [vp-content] h4, [vp-content] h5, [vp-content] h6'
    */
   selector?: string
   /**
@@ -148,7 +148,7 @@ export type MenuItem = Omit<Header, 'slug' | 'children'> & {
 ```ts
 onMounted(() => {
   const headers = getHeaders({
-    selector: '#vp-content :where(h1,h2,h3,h4,h5,h6)',
+    selector: '[vp-content] :where(h1,h2,h3,h4,h5,h6)',
     levels: [2, 3], // 只有 h2 和 h3
     ignore: ['.badge'], // 忽略标题内的 <Badge />
   })
diff --git a/plugins/blog/plugin-comment/src/client/components/CommentService.ts b/plugins/blog/plugin-comment/src/client/components/CommentService.ts
index 4d5380c169..3f9485f528 100644
--- a/plugins/blog/plugin-comment/src/client/components/CommentService.ts
+++ b/plugins/blog/plugin-comment/src/client/components/CommentService.ts
@@ -32,10 +32,11 @@ export default defineComponent({
 
     return (): VNode | null =>
       h(CommentProvider, {
-        id: 'vp-comment',
-        identifier: frontmatter.value.commentID || page.value.path,
-        darkmode: props.darkmode,
-        style: { display: enabled.value ? 'block' : 'none' },
+        'class': 'vp-comment',
+        'vp-comment': '',
+        'identifier': frontmatter.value.commentID || page.value.path,
+        'darkmode': props.darkmode,
+        'style': { display: enabled.value ? 'block' : 'none' },
       })
   },
 })
diff --git a/plugins/blog/plugin-comment/src/client/components/WalineComment.ts b/plugins/blog/plugin-comment/src/client/components/WalineComment.ts
index 4ae1f9fc8c..6205f8d6db 100644
--- a/plugins/blog/plugin-comment/src/client/components/WalineComment.ts
+++ b/plugins/blog/plugin-comment/src/client/components/WalineComment.ts
@@ -66,7 +66,7 @@ export default defineComponent({
     const walineProps = computed(() => ({
       lang: lang.value === 'zh-CN' ? 'zh-CN' : 'en',
       locale: walineLocale.value,
-      dark: 'html.dark',
+      dark: "html[data-theme='dark']",
       ...walineOptions.value,
       path: props.identifier,
     }))
diff --git a/plugins/blog/plugin-comment/src/client/styles/base.scss b/plugins/blog/plugin-comment/src/client/styles/base.scss
index d3fd81a9fa..91c943df0c 100644
--- a/plugins/blog/plugin-comment/src/client/styles/base.scss
+++ b/plugins/blog/plugin-comment/src/client/styles/base.scss
@@ -1,4 +1,4 @@
-#vp-comment {
+.vp-comment {
   @media print {
     display: none !important;
   }
diff --git a/plugins/development/plugin-sass-palette/styles/default/config.scss b/plugins/development/plugin-sass-palette/styles/default/config.scss
index 230c082f1b..3d6a9fd482 100644
--- a/plugins/development/plugin-sass-palette/styles/default/config.scss
+++ b/plugins/development/plugin-sass-palette/styles/default/config.scss
@@ -18,12 +18,9 @@ $mobile: 419px !default;
 /* rtl */
 $rtl-selector: 'html[dir="rtl"]' !default;
 
-/* Content Class */
-$content-class: '.theme-default-content' !default;
-
 /** dark mode selectors */
-$dark-selector: 'html.dark' !default;
-$light-selector: 'html:not(.dark)' !default;
+$dark-selector: "html[data-theme='dark']" !default;
+$light-selector: "html[data-theme='light']" !default;
 
 /* Color list */
 $colors: #cf1322, #fa541c, #f39c12, #2ecc71, #25a55b, #10a5a5, #096dd9, #aa6fe9,
diff --git a/plugins/features/plugin-copy-code/src/node/copyCodePlugin.ts b/plugins/features/plugin-copy-code/src/node/copyCodePlugin.ts
index af2977508c..43e1a51b5c 100644
--- a/plugins/features/plugin-copy-code/src/node/copyCodePlugin.ts
+++ b/plugins/features/plugin-copy-code/src/node/copyCodePlugin.ts
@@ -34,7 +34,7 @@ export const copyCodePlugin =
           ? options.selector
           : isString(options.selector)
             ? [options.selector]
-            : ['.theme-default-content div[class*="language-"] pre'],
+            : ['[vp-content] div[class*="language-"] pre'],
         __CC_SHOW_IN_MOBILE__: options.showInMobile || false,
       }),
 
diff --git a/plugins/features/plugin-copy-code/src/node/options.ts b/plugins/features/plugin-copy-code/src/node/options.ts
index bc541dc36a..506936fad1 100644
--- a/plugins/features/plugin-copy-code/src/node/options.ts
+++ b/plugins/features/plugin-copy-code/src/node/options.ts
@@ -7,7 +7,7 @@ export interface CopyCodePluginOptions {
    *
    * 代码块选择器
    *
-   * @default '.theme-default-content div[class*="language-"] pre'
+   * @default '[vp-content] div[class*="language-"] pre'
    */
   selector?: string | string[]
 
diff --git a/plugins/features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts b/plugins/features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts
index 4086267638..1734ae0d38 100644
--- a/plugins/features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts
+++ b/plugins/features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts
@@ -11,7 +11,7 @@ export interface MediumZoomPluginOptions {
   /**
    * Selector of zoomable images
    *
-   * @default ':not(a) > img'
+   * @default '[vp-content] :not(a) > img'
    */
   selector?: string
 
@@ -31,7 +31,7 @@ export interface MediumZoomPluginOptions {
 }
 
 export const mediumZoomPlugin = ({
-  selector = ':not(a) > img',
+  selector = '[vp-content] :not(a) > img',
   zoomOptions = {},
   delay = 500,
 }: MediumZoomPluginOptions = {}): Plugin => ({
diff --git a/plugins/features/plugin-photo-swipe/src/node/options.ts b/plugins/features/plugin-photo-swipe/src/node/options.ts
index 516d624c20..50bda3f6ed 100644
--- a/plugins/features/plugin-photo-swipe/src/node/options.ts
+++ b/plugins/features/plugin-photo-swipe/src/node/options.ts
@@ -7,7 +7,7 @@ export interface PhotoSwipePluginOptions {
    *
    * 图片选择器
    *
-   * @default ".theme-default-content :not(a) > img:not([no-view])"
+   * @default "[vp-content] :not(a) > img:not([no-view])"
    */
   selector?: string | string[]
 
diff --git a/plugins/features/plugin-photo-swipe/src/node/photoSwipePlugin.ts b/plugins/features/plugin-photo-swipe/src/node/photoSwipePlugin.ts
index f311b5d89b..bc29f227b7 100644
--- a/plugins/features/plugin-photo-swipe/src/node/photoSwipePlugin.ts
+++ b/plugins/features/plugin-photo-swipe/src/node/photoSwipePlugin.ts
@@ -23,8 +23,7 @@ export const photoSwipePlugin =
 
       define: (app): Record<string, unknown> => ({
         __PS_SELECTOR__:
-          options.selector ||
-          '.theme-default-content :not(a) > img:not([no-view])',
+          options.selector || '[vp-content] :not(a) > img:not([no-view])',
         __PS_DELAY__: options.delay || 800,
         __PS_DOWNLOAD__: options.download ?? true,
         __PS_FULLSCREEN__: options.fullscreen ?? true,
diff --git a/plugins/markdown/plugin-markdown-image/src/node/options.ts b/plugins/markdown/plugin-markdown-image/src/node/options.ts
index 00561c3592..bb037648cb 100644
--- a/plugins/markdown/plugin-markdown-image/src/node/options.ts
+++ b/plugins/markdown/plugin-markdown-image/src/node/options.ts
@@ -48,12 +48,12 @@ export interface MarkdownImagePluginOptions {
   obsidianSize?: boolean
 
   /**
-   * @default 'html:not(.dark)'
+   * @default 'html[data-theme="light"]'
    */
   lightmodeSelector?: string
 
   /**
-   * @default 'html.dark'
+   * @default 'html[data-theme="dark"]'
    */
   darkmodeSelector?: string
 }
diff --git a/plugins/markdown/plugin-markdown-image/src/node/prepare/prepareClientConfigFile.ts b/plugins/markdown/plugin-markdown-image/src/node/prepare/prepareClientConfigFile.ts
index 27f007cadb..af623e82db 100644
--- a/plugins/markdown/plugin-markdown-image/src/node/prepare/prepareClientConfigFile.ts
+++ b/plugins/markdown/plugin-markdown-image/src/node/prepare/prepareClientConfigFile.ts
@@ -7,8 +7,8 @@ import { prepareMarkStyleFile } from './prepareMarkStyleFile.js'
 export const prepareClientConfigFile = async (
   app: App,
   {
-    lightmodeSelector = 'html:not(.dark)',
-    darkmodeSelector = 'html.dark',
+    lightmodeSelector = 'html[data-theme="light"]',
+    darkmodeSelector = 'html[data-theme="dark"]',
     figure,
     mark,
   }: MarkdownImagePluginOptions,
diff --git a/themes/theme-default/src/client/components/VPHome.vue b/themes/theme-default/src/client/components/VPHome.vue
index a133df75cf..c3689d0dc1 100644
--- a/themes/theme-default/src/client/components/VPHome.vue
+++ b/themes/theme-default/src/client/components/VPHome.vue
@@ -9,7 +9,7 @@ import { Content } from 'vuepress/client'
   <main class="vp-home">
     <VPHomeHero />
     <VPHomeFeatures />
-    <div class="theme-default-content">
+    <div class="theme-default-content" vp-content>
       <Content />
     </div>
     <VPHomeFooter />
diff --git a/themes/theme-default/src/client/components/VPHomeFooter.vue b/themes/theme-default/src/client/components/VPHomeFooter.vue
index e6757f754d..b5eb769115 100644
--- a/themes/theme-default/src/client/components/VPHomeFooter.vue
+++ b/themes/theme-default/src/client/components/VPHomeFooter.vue
@@ -12,8 +12,8 @@ const footerHtml = computed(() => frontmatter.value.footerHtml)
 <template>
   <template v-if="footer">
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <div v-if="footerHtml" class="vp-footer" v-html="footer" />
-    <div v-else class="vp-footer" v-text="footer" />
+    <div v-if="footerHtml" class="vp-footer" vp-footer v-html="footer" />
+    <div v-else class="vp-footer" vp-footer v-text="footer" />
   </template>
 </template>
 
diff --git a/themes/theme-default/src/client/components/VPNavbar.vue b/themes/theme-default/src/client/components/VPNavbar.vue
index a80bcf9306..17d511dfbb 100644
--- a/themes/theme-default/src/client/components/VPNavbar.vue
+++ b/themes/theme-default/src/client/components/VPNavbar.vue
@@ -59,7 +59,7 @@ useUpdateDeviceStatus(
 </script>
 
 <template>
-  <header ref="navbar" class="vp-navbar">
+  <header ref="navbar" class="vp-navbar" vp-navbar>
     <VPToggleSidebarButton @toggle="$emit('toggle-sidebar')" />
 
     <span ref="navbarBrand">
diff --git a/themes/theme-default/src/client/components/VPPage.vue b/themes/theme-default/src/client/components/VPPage.vue
index 89773236e8..4cf63322af 100644
--- a/themes/theme-default/src/client/components/VPPage.vue
+++ b/themes/theme-default/src/client/components/VPPage.vue
@@ -18,7 +18,7 @@ setupHeaders()
   <main class="vp-page">
     <slot name="top" />
 
-    <div class="theme-default-content">
+    <div class="theme-default-content" vp-content>
       <slot name="content-top" />
 
       <Content />
diff --git a/themes/theme-default/src/client/components/VPSidebar.vue b/themes/theme-default/src/client/components/VPSidebar.vue
index 094b5129d9..03186c2098 100644
--- a/themes/theme-default/src/client/components/VPSidebar.vue
+++ b/themes/theme-default/src/client/components/VPSidebar.vue
@@ -9,7 +9,7 @@ defineSlots<{
 </script>
 
 <template>
-  <aside class="vp-sidebar">
+  <aside class="vp-sidebar" vp-sidebar>
     <VPNavbarItems />
     <slot name="top" />
     <VPSidebarItems />
diff --git a/themes/theme-default/src/client/composables/useDarkMode.ts b/themes/theme-default/src/client/composables/useDarkMode.ts
index d58ce414d1..2afb06ea6c 100644
--- a/themes/theme-default/src/client/composables/useDarkMode.ts
+++ b/themes/theme-default/src/client/composables/useDarkMode.ts
@@ -59,9 +59,10 @@ export const setupDarkMode = (): void => {
 
 export const updateHtmlDarkClass = (isDarkMode: DarkModeRef): void => {
   const update = (value = isDarkMode.value): void => {
-    // set `class="dark"` on `<html>` element
-    const htmlEl = window?.document.querySelector('html')
-    htmlEl?.classList.toggle('dark', value)
+    const htmlEl = document.querySelector('html')!
+
+    // set `data-theme="light|dark"` on `<html>` element
+    htmlEl.dataset.theme = value ? 'dark' : 'light'
   }
 
   onMounted(() => {
diff --git a/themes/theme-default/src/client/layouts/Layout.vue b/themes/theme-default/src/client/layouts/Layout.vue
index 3ccba2f367..87c6d2a7e6 100644
--- a/themes/theme-default/src/client/layouts/Layout.vue
+++ b/themes/theme-default/src/client/layouts/Layout.vue
@@ -98,6 +98,7 @@ const onBeforeLeave = scrollPromise.pending
   <div
     class="vp-theme-container"
     :class="containerClass"
+    vp-container
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
diff --git a/themes/theme-default/src/client/layouts/NotFound.vue b/themes/theme-default/src/client/layouts/NotFound.vue
index c9fb8a0ba6..2ae941f8ea 100644
--- a/themes/theme-default/src/client/layouts/NotFound.vue
+++ b/themes/theme-default/src/client/layouts/NotFound.vue
@@ -13,9 +13,9 @@ const homeText = themeLocale.value.backToHome ?? 'Back to home'
 </script>
 
 <template>
-  <div class="theme-container">
+  <div class="vp-theme-container" vp-container>
     <main class="page">
-      <div class="theme-default-content">
+      <div class="theme-default-content" vp-content>
         <h1>404</h1>
 
         <blockquote>{{ getMsg() }}</blockquote>
diff --git a/themes/theme-default/src/client/styles/arrow.scss b/themes/theme-default/src/client/styles/arrow.scss
index 8a5e5e05e7..731b25af5d 100644
--- a/themes/theme-default/src/client/styles/arrow.scss
+++ b/themes/theme-default/src/client/styles/arrow.scss
@@ -13,7 +13,7 @@
 
   transition: all 0.3s;
 
-  html.dark & {
+  html[data-theme='dark'] & {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
   }
 
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index 9af0e46929..bc3401fe13 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -4,7 +4,7 @@ body {
   transition: background-color var(--t-color);
 }
 
-html.dark {
+html[data-theme='dark'] {
   color-scheme: dark;
 }
 
diff --git a/themes/theme-default/src/client/styles/plugins.scss b/themes/theme-default/src/client/styles/plugins.scss
index be5738ff3d..11fbe5a224 100644
--- a/themes/theme-default/src/client/styles/plugins.scss
+++ b/themes/theme-default/src/client/styles/plugins.scss
@@ -1,7 +1,7 @@
 @use 'mixins';
 
 // plugin-comment
-#vp-comment {
+.vp-comment {
   @include mixins.content-wrapper;
 }
 
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 6a7703d4fe..5789cc4643 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -1,4 +1,4 @@
-html.dark {
+html[data-theme='dark'] {
   // brand colors
   --c-brand: #3aa675;
   --c-brand-light: #349469;
diff --git a/themes/theme-default/templates/build.html b/themes/theme-default/templates/build.html
index 334179b2cf..0ebb800b81 100644
--- a/themes/theme-default/templates/build.html
+++ b/themes/theme-default/templates/build.html
@@ -9,7 +9,7 @@
         --c-bg: #fff;
       }
 
-      html.dark {
+      html[data-theme='dark'] {
         --c-bg: #22272e;
       }
 
@@ -21,10 +21,14 @@
     <script>
       const userMode = localStorage.getItem('vuepress-color-scheme')
       const systemDarkMode =
-        window.matchMedia &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches
-      if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
-        document.documentElement.classList.toggle('dark', true)
+        'matchMedia' in window
+          ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          : false
+
+      if (userMode === 'light') {
+        document.documentElement.dataset.theme = 'light'
+      } else if (userMode === 'dark' || systemDarkMode) {
+        document.documentElement.dataset.theme = 'dark'
       }
     </script>
     <!--vuepress-ssr-head-->
diff --git a/tools/helper/src/client/utils/getHeaders.ts b/tools/helper/src/client/utils/getHeaders.ts
index 88b7eb5ce3..a8a37b7225 100644
--- a/tools/helper/src/client/utils/getHeaders.ts
+++ b/tools/helper/src/client/utils/getHeaders.ts
@@ -41,7 +41,7 @@ export interface GetHeadersOptions {
    * It will be passed as an argument to `document.querySelectorAll(selector)`,
    * so you should pass a `CSS Selector` string.
    *
-   * @default '#vp-content h1, #vp-content h2, #vp-content h3, #vp-content h4, #vp-content h5, #vp-content h6'
+   * @default '[vp-content] h1, [vp-content] h2, [vp-content] h3, [vp-content] h4, [vp-content] h5, [vp-content] h6'
    */
   selector?: string
   /**
@@ -68,7 +68,9 @@ export interface GetHeadersOptions {
 }
 
 export const getHeaders = ({
-  selector = [...new Array(6)].map((_, i) => `#vp-content h${i + 1}`).join(','),
+  selector = [...new Array(6)]
+    .map((_, i) => `[vp-content] h${i + 1}`)
+    .join(','),
   levels = 2,
   ignore = [],
 }: GetHeadersOptions = {}): MenuItem[] => {

From 51ba1547c34d57904ec99c5319934f4d1f341d80 Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Wed, 5 Jun 2024 20:09:32 +0800
Subject: [PATCH 02/63] chore: update some colors

---
 docs/themes/guidelines.md                     |  48 +++++---
 e2e/docs/.vuepress/components/ArticleList.vue |   7 +-
 e2e/docs/.vuepress/layouts/Category.vue       |   7 +-
 e2e/docs/.vuepress/layouts/Tag.vue            |   7 +-
 .../styles/default/palette.scss               |  13 +--
 .../src/client/components/VPHomeHero.vue      |  18 +--
 .../src/client/components/VPNavbarBrand.vue   |   2 +-
 .../client/components/VPNavbarDropdown.vue    |   4 +-
 .../src/client/components/VPNavbarItems.vue   |   2 +-
 .../src/client/components/VPSidebar.vue       |   4 +-
 .../src/client/components/VPSidebarItem.vue   |   2 +-
 .../components/VPToggleColorModeButton.vue    |   2 +-
 .../components/VPToggleSidebarButton.vue      |   2 +-
 .../src/client/components/global/Badge.vue    |   2 +-
 .../src/client/styles/normalize.scss          |   4 +-
 .../src/client/styles/vars-dark.scss          |  10 +-
 .../theme-default/src/client/styles/vars.scss | 104 +++++++++---------
 themes/theme-default/templates/build.html     |   6 +-
 .../blog/.vuepress/components/ArticleList.vue |   7 +-
 .../blog/.vuepress/layouts/Category.vue       |   6 +-
 .../template/blog/.vuepress/layouts/Tag.vue   |   7 +-
 tools/helper/src/client/styles/normalize.scss |   4 +-
 22 files changed, 137 insertions(+), 131 deletions(-)

diff --git a/docs/themes/guidelines.md b/docs/themes/guidelines.md
index 3cd2ab863d..1da4cb7ef2 100644
--- a/docs/themes/guidelines.md
+++ b/docs/themes/guidelines.md
@@ -6,16 +6,16 @@ To avoid theme developers and users setting unneeded options, we have a set of g
 
 A theme must implement the following DOM structure:
 
-- Container: An element which contains the entire theme. This element should have the id and the same attribute `vp-container`.
-- Content: An element which holds markdown render results. This element should have the id and the same attribute `vp-content`.
+- Container: An element which contains the entire theme. This element should have an attribute `vp-container`.
+- Content: An element which holds markdown render results. This element should have an attribute `vp-content`.
 
 A theme may have the following optional elements:
 
-- Navbar: Navbar of the site. This element should have the id and the same attribute `vp-navbar`.
-- Sidebar: Sidebar of the site. This element should have the id and the same attribute `vp-sidebar`.
-- Outline: Headings or outline of the main content. This element should have the id and the same attribute `vp-outline`.
-- Comment: Comment service (comment box and comment list). This element should have the id and the same attribute `vp-comment`.
-- Footer: Footer of the site. This element should have the id and the same attribute `vp-footer`.
+- Navbar: Navbar of the site. This element should have an attribute `vp-navbar`.
+- Sidebar: Sidebar of the site. This element should have an attribute `vp-sidebar`.
+- Outline: Headings or outline of the main content. This element should have an attribute `vp-outline`.
+- Comment: Comment service (comment box and comment list). This element should have an attribute `vp-comment`.
+- Footer: Footer of the site. This element should have an attribute `vp-footer`.
 
 A theme must:
 
@@ -28,11 +28,31 @@ If it only have one color scheme, it still needs to set `data-theme` to `light`
 
 A theme must implement the following color variables:
 
-TODO
+### Text
 
-<!--
-- `--vp-bg-color`: Background color of the theme.
-- `--vp-text-color`: Text color of the theme.
-- `--vp-brand-color`: Theme color of the theme.
-- `--vp-brand-hover`: Theme color used hover state.
-- `--vp-brand-bg`: Theme color used in bg, must have enough contrast. -->
+- `--vp-c-text`: Default text color.
+- `--vp-c-text-mute`: Colors for muted texts, such as "inactive menu" or "info texts".
+
+### Background
+
+- `--vp-c-bg`: The bg color used for main screen.
+- `--vp-c-bg-alt`: The alternative bg color used in places such as "sidebar", or "code block".
+- `--vp-c-bg-elv`: The elevated bg color. This is used at parts where it "floats", such as "dialog".
+- `--vp-c-bg-soft`: The bg color to slightly distinguish some components from the page. Used for things like "carbon ads" or "table".
+
+### Accent
+
+Accent color and brand colors which used for interactive components.
+
+- `--vp-c-accent`: The most solid color used mainly for colored text. It must satisfy the contrast ratio against when used on top of `--vp-c-accent-soft`.
+- `--vp-c-accent-hover`: Color used for hover state.
+- `--vp-c-accent-bg`: Color used for solid background. It must satisfy the contrast ratio with pure white (#ffffff) text on top of it.
+- `--vp-c-accent-soft`: The color used for subtle background such as custom container or badges. It must satisfy the contrast ratio when putting `--vp-c-accent` colors on top of it.
+
+  The soft color must be semi transparent alpha channel. This is crucial because it allows adding multiple "soft" colors on top of each other to create a accent, such as when having inline code block inside custom containers.
+
+## Borders
+
+- `--vp-c-border`: Border color for interactive components. For example this should be used for a button outline.
+- `--vp-c-divider`: Color for separators, used to divide sections within the same components, such as having separator on "h2" heading.
+- `--vp-c-gutter`: Colors for gutter, used to divide components in the page. For example the header and the lest of the page.
diff --git a/e2e/docs/.vuepress/components/ArticleList.vue b/e2e/docs/.vuepress/components/ArticleList.vue
index 2223431311..309205f35e 100644
--- a/e2e/docs/.vuepress/components/ArticleList.vue
+++ b/e2e/docs/.vuepress/components/ArticleList.vue
@@ -76,7 +76,8 @@ defineProps<{
   padding: 1rem 1.25rem;
   border: 1px solid var(--c-border);
   border-radius: 0.4rem;
-  color: var(--c-text);
+
+  color: var(--vp-c-text);
 
   text-align: start;
 
@@ -90,9 +91,7 @@ defineProps<{
 
   .title {
     position: relative;
-
     display: inline-block;
-
     font-size: 1.28rem;
     line-height: 2rem;
 
@@ -106,7 +105,7 @@ defineProps<{
       width: 100%;
       height: 2px;
 
-      background: var(--c-brand);
+      background: var(--vp-c-accent);
 
       visibility: hidden;
 
diff --git a/e2e/docs/.vuepress/layouts/Category.vue b/e2e/docs/.vuepress/layouts/Category.vue
index 3939731365..6380803d2c 100644
--- a/e2e/docs/.vuepress/layouts/Category.vue
+++ b/e2e/docs/.vuepress/layouts/Category.vue
@@ -42,7 +42,6 @@ const categoryMap = useBlogCategory('category')
 
   padding-top: 1rem !important;
   padding-bottom: 0 !important;
-
   font-size: 14px;
 
   a {
@@ -84,11 +83,11 @@ const categoryMap = useBlogCategory('category')
     }
 
     &.route-link-active {
-      background: var(--c-brand);
-      color: var(--c-bg);
+      background: var(--vp-c-accent);
+      color: #fff;
 
       .category-num {
-        color: var(--c-bg);
+        color: #fff;
       }
     }
   }
diff --git a/e2e/docs/.vuepress/layouts/Tag.vue b/e2e/docs/.vuepress/layouts/Tag.vue
index a724bb8e40..b9a356f537 100644
--- a/e2e/docs/.vuepress/layouts/Tag.vue
+++ b/e2e/docs/.vuepress/layouts/Tag.vue
@@ -42,7 +42,6 @@ const tagMap = useBlogCategory('tag')
 
   padding-top: 1rem !important;
   padding-bottom: 0 !important;
-
   font-size: 14px;
 
   a {
@@ -84,11 +83,11 @@ const tagMap = useBlogCategory('tag')
     }
 
     &.route-link-active {
-      background: var(--c-brand);
-      color: var(--c-bg);
+      background: var(--vp-c-accent);
+      color: #fff;
 
       .tag-num {
-        color: var(--c-bg);
+        color: #fff;
       }
     }
   }
diff --git a/plugins/development/plugin-sass-palette/styles/default/palette.scss b/plugins/development/plugin-sass-palette/styles/default/palette.scss
index 7f423767ea..391dd1fc02 100644
--- a/plugins/development/plugin-sass-palette/styles/default/palette.scss
+++ b/plugins/development/plugin-sass-palette/styles/default/palette.scss
@@ -13,15 +13,6 @@ $vp-bgl: 'var(--c-bg-light, #f3f4f5)';
 // background lighter
 $vp-bglt: 'var(--c-bg-lighter, #eeeeee)';
 
-// color
-$vp-c: 'var(--c-text, #2c3e50)';
-
-// color
-$vp-cl: 'var(--c-text-light, #3a5169)';
-
-// color lighter
-$vp-clt: 'var(--c-text-lighter, #4e6e8e)';
-
 // border-color
 $vp-brc: 'var(--c-border, #eaecef)';
 
@@ -29,8 +20,8 @@ $vp-brc: 'var(--c-border, #eaecef)';
 $vp-brcd: 'var(--c-border-dark, #dfe2e5)';
 
 // theme color
-$vp-tc: 'var(--c-brand, #3eaf7c)';
-$vp-tcl: 'var(--c-brand-light, #4abf8a)';
+$vp-tc: 'var(--vp-c-accent, #3eaf7c)';
+$vp-tcl: 'var(--vp-c-accent-hover, #4abf8a)';
 
 // color transition
 $vp-ct: 'var(--t-color, 0.3s ease)';
diff --git a/themes/theme-default/src/client/components/VPHomeHero.vue b/themes/theme-default/src/client/components/VPHomeHero.vue
index afee8bf427..7e64b199f5 100644
--- a/themes/theme-default/src/client/components/VPHomeHero.vue
+++ b/themes/theme-default/src/client/components/VPHomeHero.vue
@@ -176,23 +176,23 @@ const HomeHeroImage: FunctionalComponent = () => {
   }
 
   &.primary {
-    border-color: var(--c-brand);
-    background-color: var(--c-brand);
-    color: var(--c-bg);
+    border-color: var(--vp-c-accent);
+    background-color: var(--vp-c-accent);
+    color: #fff;
 
     &:hover {
-      background-color: var(--c-brand-light);
+      background-color: var(--vp-c-accent-hover);
     }
   }
 
   &.secondary {
-    border-color: var(--c-brand);
-    background-color: var(--c-bg);
-    color: var(--c-brand);
+    border-color: var(--vp-c-accent);
+    background-color: var(--vp-c-bg);
+    color: var(--vp-c-accent);
 
     &:hover {
-      background-color: var(--c-brand-light);
-      color: var(--c-bg);
+      background-color: var(--vp-c-accent-hover);
+      color: #fff;
     }
   }
 }
diff --git a/themes/theme-default/src/client/components/VPNavbarBrand.vue b/themes/theme-default/src/client/components/VPNavbarBrand.vue
index 92c62c27f3..7645873663 100644
--- a/themes/theme-default/src/client/components/VPNavbarBrand.vue
+++ b/themes/theme-default/src/client/components/VPNavbarBrand.vue
@@ -76,7 +76,7 @@ const NavbarBrandLogo: FunctionalComponent = () => {
 
 .vp-site-name {
   position: relative;
-  color: var(--c-text);
+  color: var(--vp-c-text);
   font-weight: 600;
   font-size: 1.3rem;
 
diff --git a/themes/theme-default/src/client/components/VPNavbarDropdown.vue b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
index 971f8ba1fe..164c246be0 100644
--- a/themes/theme-default/src/client/components/VPNavbarDropdown.vue
+++ b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
@@ -178,7 +178,7 @@ watch(
   border: none;
 
   background: transparent;
-  color: var(--c-text);
+  color: var(--vp-c-text);
 
   font-weight: 500;
   font-size: 0.9rem;
@@ -203,7 +203,7 @@ watch(
   border: none;
 
   background: transparent;
-  color: var(--c-text);
+  color: var(--vp-c-text);
 
   font-weight: 600;
   font-size: inherit;
diff --git a/themes/theme-default/src/client/components/VPNavbarItems.vue b/themes/theme-default/src/client/components/VPNavbarItems.vue
index ef87d4ba9b..da57eaa441 100644
--- a/themes/theme-default/src/client/components/VPNavbarItems.vue
+++ b/themes/theme-default/src/client/components/VPNavbarItems.vue
@@ -68,7 +68,7 @@ useUpdateDeviceStatus(
 
     &:hover,
     &.route-link-active {
-      color: var(--c-text);
+      color: var(--vp-c-text);
     }
   }
 }
diff --git a/themes/theme-default/src/client/components/VPSidebar.vue b/themes/theme-default/src/client/components/VPSidebar.vue
index 03186c2098..854469b0b7 100644
--- a/themes/theme-default/src/client/components/VPSidebar.vue
+++ b/themes/theme-default/src/client/components/VPSidebar.vue
@@ -45,7 +45,7 @@ defineSlots<{
     background-color var(--t-color),
     border-color var(--t-color);
 
-  scrollbar-color: var(--c-brand) var(--c-border);
+  scrollbar-color: var(--vp-c-accent) var(--c-border);
   scrollbar-width: thin;
 
   // narrow desktop / iPad
@@ -72,7 +72,7 @@ defineSlots<{
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: var(--c-brand);
+    background-color: var(--vp-c-accent);
   }
 
   // override styles
diff --git a/themes/theme-default/src/client/components/VPSidebarItem.vue b/themes/theme-default/src/client/components/VPSidebarItem.vue
index 2f049164f8..d2b6b1b2be 100644
--- a/themes/theme-default/src/client/components/VPSidebarItem.vue
+++ b/themes/theme-default/src/client/components/VPSidebarItem.vue
@@ -89,7 +89,7 @@ onBeforeUnmount(() => {
 
 .vp-sidebar-item {
   border-left: 0.25rem solid transparent;
-  color: var(--c-text);
+  color: var(--vp-c-text);
   cursor: default;
 
   &:focus-visible {
diff --git a/themes/theme-default/src/client/components/VPToggleColorModeButton.vue b/themes/theme-default/src/client/components/VPToggleColorModeButton.vue
index bef0d34b43..28582922bc 100644
--- a/themes/theme-default/src/client/components/VPToggleColorModeButton.vue
+++ b/themes/theme-default/src/client/components/VPToggleColorModeButton.vue
@@ -32,7 +32,7 @@ const toggleColorMode = (): void => {
   border: 0;
 
   background: none;
-  color: var(--c-text);
+  color: var(--vp-c-text);
 
   opacity: 0.8;
   cursor: pointer;
diff --git a/themes/theme-default/src/client/components/VPToggleSidebarButton.vue b/themes/theme-default/src/client/components/VPToggleSidebarButton.vue
index df42a306c9..3d2bc09811 100644
--- a/themes/theme-default/src/client/components/VPToggleSidebarButton.vue
+++ b/themes/theme-default/src/client/components/VPToggleSidebarButton.vue
@@ -60,7 +60,7 @@ const themeLocale = useThemeLocaleData()
       height: 2px;
       border-radius: 2px;
 
-      background-color: var(--c-text);
+      background-color: var(--vp-c-text);
 
       transition: transform var(--t-transform);
 
diff --git a/themes/theme-default/src/client/components/global/Badge.vue b/themes/theme-default/src/client/components/global/Badge.vue
index c5cd15ce4b..65cd9d8dcd 100644
--- a/themes/theme-default/src/client/components/global/Badge.vue
+++ b/themes/theme-default/src/client/components/global/Badge.vue
@@ -40,7 +40,7 @@ defineSlots<{
   padding: 0 6px;
   border-radius: 3px;
 
-  color: var(--c-bg);
+  color: #fff;
 
   font-weight: 600;
   font-size: 14px;
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index bc3401fe13..ba2bb1c525 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -1,6 +1,6 @@
 html,
 body {
-  background-color: var(--c-bg);
+  background-color: var(--vp-c-bg);
   transition: background-color var(--t-color);
 }
 
@@ -9,7 +9,7 @@ html[data-theme='dark'] {
 }
 
 body {
-  color: var(--c-text);
+  color: var(--vp-c-text);
   font-size: 1rem;
   font-family: var(--font-family);
 }
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 5789cc4643..83f33aa64f 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -1,17 +1,17 @@
 html[data-theme='dark'] {
   // brand colors
-  --c-brand: #3aa675;
-  --c-brand-light: #349469;
+  --vp-c-accent: #3aa675;
+  --vp-c-accent-hover: #349469;
 
   // background colors
-  --c-bg: #22272e;
+  --vp-c-bg: #22272e;
   --c-bg-light: #2b313a;
   --c-bg-lighter: #262c34;
   --c-bg-dark: #343b44;
   --c-bg-darker: #37404c;
 
   // text colors
-  --c-text: #adbac7;
+  --vp-c-text: #adbac7;
   --c-text-light: #96a7b7;
   --c-text-lighter: #8b9eb0;
   --c-text-lightest: #8094a8;
@@ -58,7 +58,7 @@ html[data-theme='dark'] {
   // plugin-docsearch
   /* stylelint-disable-next-line selector-class-pattern */
   .DocSearch {
-    --docsearch-logo-color: var(--c-text);
+    --docsearch-logo-color: var(--vp-c-text);
     --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
     --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
       0 2px 2px 0 rgb(3 4 9 / 30%);
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 115d1ac7e4..ec1f55bcac 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -1,21 +1,21 @@
 :root {
   // brand colors
-  --c-brand: #3eaf7c;
-  --c-brand-light: #4abf8a;
+  --vp-c-accent: #3eaf7c;
+  --vp-c-accent-hover: #4abf8a;
 
   // background colors
-  --c-bg: #fff;
+  --vp-c-bg: #fff;
   --c-bg-light: #f3f4f5;
   --c-bg-lighter: #eee;
   --c-bg-dark: #ebebec;
   --c-bg-darker: #e6e6e6;
-  --c-bg-navbar: var(--c-bg);
-  --c-bg-sidebar: var(--c-bg);
+  --c-bg-navbar: var(--vp-c-bg);
+  --c-bg-sidebar: var(--vp-c-bg);
   --c-bg-arrow: #ccc;
 
   // text colors
-  --c-text: #2c3e50;
-  --c-text-accent: var(--c-brand);
+  --vp-c-text: #2c3e50;
+  --c-text-accent: var(--vp-c-accent);
   --c-text-light: #3a5169;
   --c-text-lighter: #4e6e8e;
   --c-text-lightest: #6a8bad;
@@ -28,8 +28,8 @@
   // custom container colors
   --c-tip: #42b983;
   --c-tip-bg: var(--c-bg-light);
-  --c-tip-title: var(--c-text);
-  --c-tip-text: var(--c-text);
+  --c-tip-title: var(--vp-c-text);
+  --c-tip-text: var(--vp-c-text);
   --c-tip-text-accent: var(--c-text-accent);
   --c-warning: #ffc310;
   --c-warning-bg: #fffae3;
@@ -58,15 +58,15 @@
   // badge component colors
   --c-badge-tip: var(--c-tip);
   --c-badge-warning: #ecc808;
-  --c-badge-warning-text: var(--c-bg);
+  --c-badge-warning-text: var(--vp-c-bg);
   --c-badge-danger: #dc2626;
-  --c-badge-danger-text: var(--c-bg);
+  --c-badge-danger-text: var(--vp-c-bg);
 
   // code group colors
   --c-code-group-tab-title: rgb(255 255 255 / 90%);
   --c-code-group-tab-bg: var(--code-bg-color);
   --c-code-group-tab-outline: var(var(--c-code-group-tab-title));
-  --c-code-group-tab-active-border: var(--c-brand);
+  --c-code-group-tab-active-border: var(--vp-c-accent);
 
   // transition vars
   --t-color: 0.3s ease;
@@ -105,101 +105,101 @@
 
 // plugin-back-to-top
 .vp-back-to-top-button {
-  --back-to-top-color: var(--c-brand);
-  --back-to-top-color-hover: var(--c-brand-light);
-  --back-to-top-bg-color: var(--c-bg);
+  --back-to-top-color: var(--vp-c-accent);
+  --back-to-top-color-hover: var(--vp-c-accent-hover);
+  --back-to-top-bg-color: var(--vp-c-bg);
 }
 
 // plugin-catalog
 .vp-catalog-wrapper {
-  --catalog-bg-color: var(--c-bg);
+  --catalog-bg-color: var(--vp-c-bg);
   --catalog-bg-secondary-color: var(--c-bg-dark);
   --catalog-border-color: var(--c-border);
-  --catalog-active-color: var(--c-brand);
-  --catalog-hover-color: var(--c-brand-light);
+  --catalog-active-color: var(--vp-c-accent);
+  --catalog-hover-color: var(--vp-c-accent-hover);
 }
 
 // plugin-comment
 .waline-wrapper {
-  --waline-bg-color: var(--c-bg);
+  --waline-bg-color: var(--vp-c-bg);
   --waline-bg-color-light: var(--c-bg-light);
   --waline-text-color: var(--c-color);
   --waline-border: 1px solid var(--c-border);
   --waline-border-color: var(--c-border);
-  --waline-theme-color: var(--c-brand);
-  --waline-active-color: var(--c-brand-light);
+  --waline-theme-color: var(--vp-c-accent);
+  --waline-active-color: var(--vp-c-accent-hover);
 }
 
 // plugin-docsearch
 /* stylelint-disable-next-line selector-class-pattern */
 .DocSearch {
-  --docsearch-primary-color: var(--c-brand);
-  --docsearch-text-color: var(--c-text);
-  --docsearch-highlight-color: var(--c-brand);
+  --docsearch-primary-color: var(--vp-c-accent);
+  --docsearch-text-color: var(--vp-c-text);
+  --docsearch-highlight-color: var(--vp-c-accent);
   --docsearch-muted-color: var(--c-text-quote);
   --docsearch-container-background: rgb(9 10 17 / 80%);
   --docsearch-modal-background: var(--c-bg-light);
   --docsearch-searchbox-background: var(--c-bg-lighter);
-  --docsearch-searchbox-focus-background: var(--c-bg);
-  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
+  --docsearch-searchbox-focus-background: var(--vp-c-bg);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--vp-c-accent);
   --docsearch-hit-color: var(--c-text-light);
-  --docsearch-hit-active-color: var(--c-bg);
-  --docsearch-hit-background: var(--c-bg);
+  --docsearch-hit-active-color: var(--vp-c-bg);
+  --docsearch-hit-background: var(--vp-c-bg);
   --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
-  --docsearch-footer-background: var(--c-bg);
+  --docsearch-footer-background: var(--vp-c-bg);
 }
 
 // plugin-medium-zoom
 .medium-zoom-overlay {
-  --medium-zoom-bg-color: var(--c-bg);
+  --medium-zoom-bg-color: var(--vp-c-bg);
 }
 
 // plugin-notice
 .vp-notice-wrapper {
-  --notice-color: var(--c-text);
-  --notice-bg-color: var(--c-bg);
-  --notice-primary-color: var(--c-brand);
-  --notice-primary-text-color: var(--c-bg);
-  --notice-primary-hover-color: var(--c-brand-light);
+  --notice-color: var(--vp-c-text);
+  --notice-bg-color: var(--vp-c-bg);
+  --notice-primary-color: var(--vp-c-accent);
+  --notice-primary-text-color: var(--vp-c-bg);
+  --notice-primary-hover-color: var(--vp-c-accent-hover);
   --notice-button-color: var(--c-bg-light);
   --notice-button-hover-color: var(--c-bg-lighter);
 }
 
 // plugin-nprogress
 #nprogress {
-  --nprogress-color: var(--c-brand);
+  --nprogress-color: var(--vp-c-accent);
 }
 
 body {
   // plugin-photo-swipe
-  --photo-swipe-bullet: var(--c-bg);
-  --photo-swipe-bullet-active: var(--c-brand);
+  --photo-swipe-bullet: var(--vp-c-bg);
+  --photo-swipe-bullet-active: var(--vp-c-accent);
 
   // plugin-pwa-popup
-  --pwa-text-color: var(--c-text);
-  --pwa-bg-color: var(--c-bg);
-  --pwa-border-color: var(--c-brand);
-  --pwa-btn-text-color: var(--c-bg);
-  --pwa-btn-bg-color: var(--c-brand);
-  --pwa-btn-hover-bg-color: var(--c-brand-light);
+  --pwa-text-color: var(--vp-c-text);
+  --pwa-bg-color: var(--vp-c-bg);
+  --pwa-border-color: var(--vp-c-accent);
+  --pwa-btn-text-color: var(--vp-c-bg);
+  --pwa-btn-bg-color: var(--vp-c-accent);
+  --pwa-btn-hover-bg-color: var(--vp-c-accent-hover);
 }
 
 // plugin-redirect
 .redirect-modal-mask {
-  --redirect-bg-color: var(--c-bg);
+  --redirect-bg-color: var(--vp-c-bg);
   --redirect-bg-color-light: var(--c-bg-light);
   --redirect-bg-color-lighter: var(--c-bg-lighter);
-  --redirect-text-color: var(--c-text);
-  --redirect-primary-color: var(--c-brand);
-  --redirect-primary-hover-color: var(--c-brand-light);
-  --redirect-primary-text-color: var(--c-bg);
+  --redirect-text-color: var(--vp-c-text);
+  --redirect-primary-color: var(--vp-c-accent);
+  --redirect-primary-hover-color: var(--vp-c-accent-hover);
+  --redirect-primary-text-color: var(--vp-c-bg);
 }
 
 // plugin-search
 .search-box {
-  --search-bg-color: var(--c-bg);
-  --search-accent-color: var(--c-brand);
-  --search-text-color: var(--c-text);
+  --search-bg-color: var(--vp-c-bg);
+  --search-accent-color: var(--vp-c-accent);
+  --search-text-color: var(--vp-c-text);
   --search-border-color: var(--c-border);
   --search-item-text-color: var(--c-text-lighter);
   --search-item-focus-bg-color: var(--c-bg-light);
diff --git a/themes/theme-default/templates/build.html b/themes/theme-default/templates/build.html
index 0ebb800b81..88d4f346fd 100644
--- a/themes/theme-default/templates/build.html
+++ b/themes/theme-default/templates/build.html
@@ -6,16 +6,16 @@
     <meta name="generator" content="VuePress {{ version }}" />
     <style>
       :root {
-        --c-bg: #fff;
+        --vp-c-bg: #fff;
       }
 
       html[data-theme='dark'] {
-        --c-bg: #22272e;
+        --vp-c-bg: #22272e;
       }
 
       html,
       body {
-        background-color: var(--c-bg);
+        background-color: var(--vp-c-bg);
       }
     </style>
     <script>
diff --git a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
index 315db319cb..8e52652bf3 100644
--- a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
@@ -66,7 +66,8 @@ defineProps({
   padding: 1rem 1.25rem;
   border: 1px solid var(--c-border);
   border-radius: 0.4rem;
-  color: var(--c-text);
+
+  color: var(--vp-c-text);
 
   text-align: start;
 
@@ -80,9 +81,7 @@ defineProps({
 
   .title {
     position: relative;
-
     display: inline-block;
-
     font-size: 1.28rem;
     line-height: 2rem;
 
@@ -96,7 +95,7 @@ defineProps({
       width: 100%;
       height: 2px;
 
-      background: var(--c-brand);
+      background: var(--vp-c-accent);
 
       visibility: hidden;
 
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
index 393ead14b6..ff3d14f251 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
@@ -83,11 +83,11 @@ const categoryMap = useBlogCategory('category')
     }
 
     &.route-link-active {
-      background: var(--c-brand);
-      color: var(--c-bg);
+      background: var(--vp-c-accent);
+      color: #fff;
 
       .category-num {
-        color: var(--c-bg);
+        color: #fff;
       }
     }
   }
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
index 424e964d91..8273468c13 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
@@ -41,7 +41,6 @@ const tagMap = useBlogCategory('tag')
 
   padding-top: 1rem !important;
   padding-bottom: 0 !important;
-
   font-size: 14px;
 
   a {
@@ -83,11 +82,11 @@ const tagMap = useBlogCategory('tag')
     }
 
     &.route-link-active {
-      background: var(--c-brand);
-      color: var(--c-bg);
+      background: var(--vp-c-accent);
+      color: #fff;
 
       .tag-num {
-        color: var(--c-bg);
+        color: #fff;
       }
     }
   }
diff --git a/tools/helper/src/client/styles/normalize.scss b/tools/helper/src/client/styles/normalize.scss
index e4abfb2142..42786a9c51 100644
--- a/tools/helper/src/client/styles/normalize.scss
+++ b/tools/helper/src/client/styles/normalize.scss
@@ -125,7 +125,7 @@ a.header-anchor {
       top: 0.4167em;
       left: -0.75em;
 
-      color: var(--c-brand);
+      color: var(--vp-c-accent);
 
       font-size: 0.75em;
     }
@@ -140,7 +140,7 @@ a.header-anchor {
       position: absolute;
       left: -0.75em;
 
-      color: var(--c-brand);
+      color: var(--vp-c-accent);
       outline: auto;
     }
   }

From 451cd0c9318f47151105da38226f725d4db86ec9 Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Wed, 5 Jun 2024 21:10:43 +0800
Subject: [PATCH 03/63] chore: tweaks

---
 .../src/client/styles/waline.scss             | 10 +++++++++
 .../src/client/styles/back-to-top.scss        | 10 ++++-----
 .../src/client/styles/vars.css                | 10 ++++-----
 .../src/client/styles/catalog.scss            |  8 +++----
 .../plugin-catalog/src/client/styles/vars.css |  4 ----
 .../theme-default/src/client/styles/vars.scss | 22 -------------------
 6 files changed, 24 insertions(+), 40 deletions(-)
 create mode 100644 plugins/blog/plugin-comment/src/client/styles/waline.scss

diff --git a/plugins/blog/plugin-comment/src/client/styles/waline.scss b/plugins/blog/plugin-comment/src/client/styles/waline.scss
new file mode 100644
index 0000000000..853a8940c4
--- /dev/null
+++ b/plugins/blog/plugin-comment/src/client/styles/waline.scss
@@ -0,0 +1,10 @@
+// plugin-comment
+.waline-wrapper {
+  --waline-bg-color: var(--vp-c-bg);
+  --waline-bg-color-light: var(--v-c-bg-alt);
+  --waline-text-color: var(--vp-c-text);
+  --waline-border: 1px solid var(--vp-c-border);
+  --waline-border-color: var(--vp-c-border);
+  --waline-theme-color: var(--vp-c-accent);
+  --waline-active-color: var(--vp-c-accent-hover);
+}
diff --git a/plugins/features/plugin-back-to-top/src/client/styles/back-to-top.scss b/plugins/features/plugin-back-to-top/src/client/styles/back-to-top.scss
index 56a3b3ed7a..3e25e2408f 100644
--- a/plugins/features/plugin-back-to-top/src/client/styles/back-to-top.scss
+++ b/plugins/features/plugin-back-to-top/src/client/styles/back-to-top.scss
@@ -10,9 +10,9 @@
   border-width: 0;
   border-radius: 50%;
 
-  background: var(--back-to-top-bg-color);
-  color: var(--back-to-top-color);
-  box-shadow: 2px 2px 10px 4px var(--back-to-top-shadow);
+  background: var(--back-to-top-c-bg);
+  color: var(--back-to-top-c-accent);
+  box-shadow: 2px 2px 10px 4px var(--back-to-top-c-shadow);
 
   cursor: pointer;
 
@@ -26,7 +26,7 @@
   }
 
   &:hover {
-    color: var(--back-to-top-color-hover);
+    color: var(--back-to-top-c-accent-hover);
   }
 
   .back-to-top-icon {
@@ -36,7 +36,7 @@
     height: 24px;
     margin: 0 auto;
 
-    background: var(--back-to-top-icon-color);
+    background: var(--back-to-top-c-icon);
 
     -webkit-mask-image: var(--back-to-top-icon);
     mask-image: var(--back-to-top-icon);
diff --git a/plugins/features/plugin-back-to-top/src/client/styles/vars.css b/plugins/features/plugin-back-to-top/src/client/styles/vars.css
index 8251a2bd1a..709a3fb0fe 100644
--- a/plugins/features/plugin-back-to-top/src/client/styles/vars.css
+++ b/plugins/features/plugin-back-to-top/src/client/styles/vars.css
@@ -1,9 +1,9 @@
 :root {
   --back-to-top-z-index: 5;
   --back-to-top-icon: url('back-to-top.svg');
-  --back-to-top-bg-color: #fff;
-  --back-to-top-color: #3eaf7c;
-  --back-to-top-icon-color: currentcolor;
-  --back-to-top-color-hover: #71cda3;
-  --back-to-top-shadow: rgb(0 0 0 / 20%);
+  --back-to-top-c-bg: var(--vp-c-bg);
+  --back-to-top-c-accent: var(--vp-c-accent);
+  --back-to-top-c-accent-hover: var(--vp-c-accent-hover);
+  --back-to-top-c-shadow: rgb(0 0 0 / 20%);
+  --back-to-top-c-icon: currentcolor;
 }
diff --git a/plugins/features/plugin-catalog/src/client/styles/catalog.scss b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
index 6729aaf1d1..e23b754941 100644
--- a/plugins/features/plugin-catalog/src/client/styles/catalog.scss
+++ b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
@@ -120,7 +120,7 @@
     text-decoration: none;
 
     &:hover {
-      color: var(--catalog-active-color);
+      color: var(--vp-c-accent);
     }
   }
 }
@@ -158,7 +158,7 @@
   padding: 4px 8px;
   border-radius: 6px;
 
-  background-color: var(--catalog-bg-secondary-color);
+  background-color: var(--vp-c-bg-elv);
 
   line-height: 1.5;
   overflow-wrap: break-word;
@@ -168,8 +168,8 @@
     color 0.3s;
 
   &:hover {
-    background-color: var(--catalog-hover-color);
-    color: var(--catalog-bg-color);
+    background-color: var(--vp-c-accent-hover);
+    color: var(--vp-c-bg);
     text-decoration: none !important;
   }
 }
diff --git a/plugins/features/plugin-catalog/src/client/styles/vars.css b/plugins/features/plugin-catalog/src/client/styles/vars.css
index d6ff7be91b..e497c83079 100644
--- a/plugins/features/plugin-catalog/src/client/styles/vars.css
+++ b/plugins/features/plugin-catalog/src/client/styles/vars.css
@@ -1,7 +1,3 @@
 :root {
-  --catalog-bg-color: #fff;
-  --catalog-bg-secondary-color: #f8f8f8;
   --catalog-border-color: #e5e5e5;
-  --catalog-active-color: #3eaf7c;
-  --catalog-hover-color: #71cda3;
 }
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index ec1f55bcac..4c3662299a 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -103,31 +103,9 @@
   --external-link-icon-color: var(--c-text-quote);
 }
 
-// plugin-back-to-top
-.vp-back-to-top-button {
-  --back-to-top-color: var(--vp-c-accent);
-  --back-to-top-color-hover: var(--vp-c-accent-hover);
-  --back-to-top-bg-color: var(--vp-c-bg);
-}
-
 // plugin-catalog
 .vp-catalog-wrapper {
-  --catalog-bg-color: var(--vp-c-bg);
-  --catalog-bg-secondary-color: var(--c-bg-dark);
   --catalog-border-color: var(--c-border);
-  --catalog-active-color: var(--vp-c-accent);
-  --catalog-hover-color: var(--vp-c-accent-hover);
-}
-
-// plugin-comment
-.waline-wrapper {
-  --waline-bg-color: var(--vp-c-bg);
-  --waline-bg-color-light: var(--c-bg-light);
-  --waline-text-color: var(--c-color);
-  --waline-border: 1px solid var(--c-border);
-  --waline-border-color: var(--c-border);
-  --waline-theme-color: var(--vp-c-accent);
-  --waline-active-color: var(--vp-c-accent-hover);
 }
 
 // plugin-docsearch

From 8a7477a6cab7592e3bd0de6fc56e18a2cb714998 Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Thu, 6 Jun 2024 13:32:48 +0800
Subject: [PATCH 04/63] feat: add colors

---
 package.json                                  |  5 +-
 .../src/client/components/VPPageMeta.vue      |  2 +-
 .../src/client/components/VPPageNav.vue       |  4 +-
 themes/theme-default/src/client/config.ts     |  1 -
 .../src/client/styles/index.scss              |  2 +
 .../src/client/styles/normalize.scss          |  3 +-
 .../theme-default/src/client/styles/vars.scss | 20 +++--
 tools/helper/package.json                     |  1 +
 tools/helper/src/client/styles/colors.scss    | 77 +++++++++++++++++++
 9 files changed, 100 insertions(+), 15 deletions(-)
 create mode 100644 tools/helper/src/client/styles/colors.scss

diff --git a/package.json b/package.json
index e3f9db484f..7b8efd9ffa 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,9 @@
     "build:tsc": "tsc -b tsconfig.build.json",
     "clean": "pnpm --parallel --stream clean",
     "format": "prettier --write .",
-    "lint": "eslint --ext .cjs,.js,.ts,.vue . && prettier --check . && stylelint **/*.{css,html,scss,vue}",
-    "lint:fix": "eslint --fix --ext .cjs,.js,.ts,.vue . && prettier --write . && stylelint **/*.{css,html,scss,vue} --fix",
+    "lint": "eslint --ext .cjs,.js,.ts,.vue . && prettier --check . && pnpm stylelint",
+    "lint:fix": "eslint --fix --ext .cjs,.js,.ts,.vue . && prettier --check --write . && pnpm lint:stylelint --fix",
+    "lint:stylelint": "stylelint **/*.{css,html,scss,vue}",
     "prepare": "husky",
     "release": "pnpm release:check && pnpm release:version && pnpm release:publish",
     "release:check": "pnpm lint && pnpm clean && pnpm build && pnpm test",
diff --git a/themes/theme-default/src/client/components/VPPageMeta.vue b/themes/theme-default/src/client/components/VPPageMeta.vue
index e7f30e0264..6d8376a345 100644
--- a/themes/theme-default/src/client/components/VPPageMeta.vue
+++ b/themes/theme-default/src/client/components/VPPageMeta.vue
@@ -88,7 +88,7 @@ const contributors = useContributors()
     }
 
     .vp-meta-info {
-      color: var(--c-text-quote);
+      color: var(--vp-c-text-mute);
       font-weight: 400;
     }
   }
diff --git a/themes/theme-default/src/client/components/VPPageNav.vue b/themes/theme-default/src/client/components/VPPageNav.vue
index cde27a3ef8..de71279f28 100644
--- a/themes/theme-default/src/client/components/VPPageNav.vue
+++ b/themes/theme-default/src/client/components/VPPageNav.vue
@@ -97,11 +97,11 @@ useEventListener('keydown', (event): void => {
     border-radius: 0.25rem;
 
     &:hover {
-      background: var(--c-bg-light);
+      background: var(--c-bg-soft);
     }
 
     .hint {
-      color: var(--c-text-quote);
+      color: var(--vp-c-text-mute);
       font-size: 0.875rem;
       line-height: 2;
     }
diff --git a/themes/theme-default/src/client/config.ts b/themes/theme-default/src/client/config.ts
index f5e6e74a46..7c3a090020 100644
--- a/themes/theme-default/src/client/config.ts
+++ b/themes/theme-default/src/client/config.ts
@@ -9,7 +9,6 @@ import { Badge, CodeGroup, CodeGroupItem } from './components/global/index.js'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
 
-import '@vuepress/helper/normalize.css'
 import './styles/index.scss'
 
 export default defineClientConfig({
diff --git a/themes/theme-default/src/client/styles/index.scss b/themes/theme-default/src/client/styles/index.scss
index 7e07476300..649255b666 100644
--- a/themes/theme-default/src/client/styles/index.scss
+++ b/themes/theme-default/src/client/styles/index.scss
@@ -1,3 +1,5 @@
+@use '@vuepress/helper/color.css';
+@use '@vuepress/helper/normalize.css';
 @use 'vars';
 @use 'vars-dark';
 @use 'normalize';
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index ba2bb1c525..4e21975fca 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -2,6 +2,7 @@ html,
 body {
   background-color: var(--vp-c-bg);
   transition: background-color var(--t-color);
+  accent-color: var(--vp-c-accent);
 }
 
 html[data-theme='dark'] {
@@ -40,7 +41,7 @@ kbd {
 
 blockquote {
   border-color: var(--c-border-dark);
-  color: var(--c-text-quote);
+  color: var(--vp-c-text-mute);
 }
 
 hr {
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 4c3662299a..680b2b289b 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -1,25 +1,29 @@
 :root {
-  // brand colors
+  // accent colors
   --vp-c-accent: #3eaf7c;
   --vp-c-accent-hover: #4abf8a;
 
   // background colors
   --vp-c-bg: #fff;
+  --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-hover: #f6f6f7;
+
+  // text colors
+  --vp-c-text: rgba(60 60 67);
+  --vp-c-text-mute: rgb(60 60 67 / 78%);
+  --vp-c-text-subtle: rgb(60 60 67 / 56%);
+
+  // original ones
   --c-bg-light: #f3f4f5;
   --c-bg-lighter: #eee;
   --c-bg-dark: #ebebec;
   --c-bg-darker: #e6e6e6;
   --c-bg-navbar: var(--vp-c-bg);
   --c-bg-sidebar: var(--vp-c-bg);
-  --c-bg-arrow: #ccc;
-
-  // text colors
-  --vp-c-text: #2c3e50;
   --c-text-accent: var(--vp-c-accent);
   --c-text-light: #3a5169;
   --c-text-lighter: #4e6e8e;
   --c-text-lightest: #6a8bad;
-  --c-text-quote: #999;
 
   // border colors
   --c-border: #eaecef;
@@ -100,7 +104,7 @@
 
   // external-link-icon
   --external-link-icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
-  --external-link-icon-color: var(--c-text-quote);
+  --external-link-icon-color: var(--vp-c-text-mute);
 }
 
 // plugin-catalog
@@ -114,7 +118,7 @@
   --docsearch-primary-color: var(--vp-c-accent);
   --docsearch-text-color: var(--vp-c-text);
   --docsearch-highlight-color: var(--vp-c-accent);
-  --docsearch-muted-color: var(--c-text-quote);
+  --docsearch-muted-color: var(--vp-c-text-mute);
   --docsearch-container-background: rgb(9 10 17 / 80%);
   --docsearch-modal-background: var(--c-bg-light);
   --docsearch-searchbox-background: var(--c-bg-lighter);
diff --git a/tools/helper/package.json b/tools/helper/package.json
index facd8e741b..b7d9d4ccd2 100644
--- a/tools/helper/package.json
+++ b/tools/helper/package.json
@@ -31,6 +31,7 @@
     "./shared": "./lib/shared/index.js",
     "./noopComponent": "./lib/client/noopComponent.js",
     "./noopModule": "./lib/client/noopModule.js",
+    "./colors.css": "./lib/client/styles/colors.css",
     "./normalize.css": "./lib/client/styles/normalize.css",
     "./package.json": "./package.json"
   },
diff --git a/tools/helper/src/client/styles/colors.scss b/tools/helper/src/client/styles/colors.scss
new file mode 100644
index 0000000000..4a8fda8763
--- /dev/null
+++ b/tools/helper/src/client/styles/colors.scss
@@ -0,0 +1,77 @@
+:root {
+  // ========== common colors ==========
+
+  // grey
+  --vp-c-grey-text: #dddde3;
+  --vp-c-grey-hover: #e4e4e9;
+  --vp-c-grey-bg: #ebebef;
+  --vp-c-grey-soft: rgb(142 150 170 / 14%);
+
+  // indigo
+  --vp-c-indigo-text: #3451b2;
+  --vp-c-indigo-hover: #3a5ccc;
+  --vp-c-indigo-bg: #5672cd;
+  --vp-c-indigo-soft: rgb(100 108 255 / 14%);
+
+  // purple
+  --vp-c-purple-text: #6f42c1;
+  --vp-c-purple-hover: #7e4cc9;
+  --vp-c-purple-bg: #8e5cd9;
+  --vp-c-purple-soft: rgb(159 122 234 / 14%);
+
+  // green
+  --vp-c-green-text: #18794e;
+  --vp-c-green-hover: #299764;
+  --vp-c-green-bg: #30a46c;
+  --vp-c-green-soft: rgb(16 185 129 / 14%);
+
+  // yellow
+  --vp-c-yellow-text: #915930;
+  --vp-c-yellow-hover: #946300;
+  --vp-c-yellow-bg: #9f6a00;
+  --vp-c-yellow-soft: rgb(234 179 8 / 14%);
+
+  // red
+  --vp-c-red-text: #b8272c;
+  --vp-c-red-hover: #d5393e;
+  --vp-c-red-bg: #e0575b;
+  --vp-c-red-soft: rgb(244 63 94 / 14%);
+}
+
+[data-theme='dark'] {
+  // grey
+  --vp-c-grey-text: #515c67;
+  --vp-c-grey-hover: #414853;
+  --vp-c-grey-bg: #32363f;
+  --vp-c-grey-soft: rgb(101 117 133 / 16%);
+
+  // indigo
+  --vp-c-indigo-text: #a8b1ff;
+  --vp-c-indigo-hover: #5c73e7;
+  --vp-c-indigo-bg: #3e63dd;
+  --vp-c-indigo-soft: rgb(100 108 255 / 16%);
+
+  // purple
+  --vp-c-purple-text: #c8abfa;
+  --vp-c-purple-hover: #a879e6;
+  --vp-c-purple-bg: #8e5cd9;
+  --vp-c-purple-soft: rgb(159 122 234 / 16%);
+
+  // green
+  --vp-c-green-text: #3dd68c;
+  --vp-c-green-hover: #30a46c;
+  --vp-c-green-bg: #298459;
+  --vp-c-green-soft: rgb(16 185 129 / 16%);
+
+  // yellow
+  --vp-c-yellow-text: #f9b44e;
+  --vp-c-yellow-hover: #da8b17;
+  --vp-c-yellow-bg: #a46a0a;
+  --vp-c-yellow-soft: rgb(234 179 8 / 16%);
+
+  // red
+  --vp-c-red-text: #f66f81;
+  --vp-c-red-hover: #f14158;
+  --vp-c-red-bg: #b62a3c;
+  --vp-c-red-soft: rgb(244 63 94 / 16%);
+}

From 5674da8b2a72ab75551486c5c1018b8334d3ea1d Mon Sep 17 00:00:00 2001
From: Mister-Hope <mister-hope@outlook.com>
Date: Thu, 6 Jun 2024 15:28:52 +0800
Subject: [PATCH 05/63] chore: tweaks

---
 tools/helper/src/client/styles/colors.scss    |  2 ++
 tools/helper/src/client/styles/normalize.scss | 34 ++++++++++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/tools/helper/src/client/styles/colors.scss b/tools/helper/src/client/styles/colors.scss
index 4a8fda8763..10bc17cc6a 100644
--- a/tools/helper/src/client/styles/colors.scss
+++ b/tools/helper/src/client/styles/colors.scss
@@ -1,5 +1,7 @@
 :root {
   // ========== common colors ==========
+  --vp-c-white: #fff;
+  --vp-c-black: #000;
 
   // grey
   --vp-c-grey-text: #dddde3;
diff --git a/tools/helper/src/client/styles/normalize.scss b/tools/helper/src/client/styles/normalize.scss
index 42786a9c51..57730660ad 100644
--- a/tools/helper/src/client/styles/normalize.scss
+++ b/tools/helper/src/client/styles/normalize.scss
@@ -1,8 +1,6 @@
 html,
 body {
-  margin: 0;
-  padding: 0;
-  background: #fff;
+  background: var(--vp-c-black);
 }
 
 html {
@@ -13,19 +11,29 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
+  text-size-adjust: none;
 
   @media print {
     font-size: 12pt;
   }
+
+  &[data-theme='dark'] {
+    color-scheme: dark;
+  }
 }
 
 body {
   min-height: 100vh;
+  margin: 0;
+  padding: 0;
+
   color: #2c3e50;
+
+  font-synthesis: style;
 }
 
 a {
-  color: #3eaf7c;
+  color: var(--vp-c-accent);
   font-weight: 500;
   text-decoration: none;
   overflow-wrap: break-word;
@@ -62,7 +70,7 @@ code {
   }
 
   p a & {
-    color: #3eaf7c;
+    color: var(--vp-c-accent);
     font-weight: 400;
   }
 }
@@ -291,3 +299,19 @@ pre {
     page-break-inside: avoid;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    background-attachment: initial !important;
+
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+    animation-duration: 1ms !important;
+    animation-delay: -1ms !important;
+    animation-iteration-count: 1 !important;
+
+    scroll-behavior: auto !important;
+  }
+}

From 83958ef46e4a6201fcd4263cbc594f95d7eedb9b Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 07:03:05 +0800
Subject: [PATCH 06/63] feat: make styles built-in for highlighter

---
 docs/.vuepress/theme.ts                       |   5 +
 docs/plugins/markdown/prismjs.md              |  83 +++++-
 docs/plugins/markdown/shiki.md                |  10 -
 docs/zh/plugins/markdown/prismjs.md           |  83 +++++-
 docs/zh/plugins/markdown/shiki.md             |  10 -
 .../src/client/styles/copy-code.scss          |   4 +-
 plugins/markdown/plugin-prismjs/package.json  |   5 +-
 .../scripts/generateThemeFiles.ts             |  52 ++++
 .../src/client/styles/_mixins.scss            |  17 ++
 .../themes/ateliersulphurpool-light.scss      | 113 ++++++++
 .../src/client/styles/themes/atom-dark.scss   | 110 ++++++++
 .../src/client/styles/themes/cb.scss          |  87 ++++++
 .../client/styles/themes/coldark-cold.scss    | 162 ++++++++++++
 .../client/styles/themes/coldark-dark.scss    | 164 ++++++++++++
 .../src/client/styles/themes/coy.scss         |  97 +++++++
 .../src/client/styles/themes/dark.scss        |  96 +++++++
 .../src/client/styles/themes/dracula.scss     |  97 +++++++
 .../client/styles/themes/duotone-dark.scss    | 108 ++++++++
 .../client/styles/themes/duotone-earth.scss   | 108 ++++++++
 .../client/styles/themes/duotone-forest.scss  | 108 ++++++++
 .../client/styles/themes/duotone-light.scss   | 108 ++++++++
 .../src/client/styles/themes/duotone-sea.scss | 108 ++++++++
 .../client/styles/themes/duotone-space.scss   | 108 ++++++++
 .../src/client/styles/themes/ghcolors.scss    |  93 +++++++
 .../client/styles/themes/gruvbox-dark.scss    | 103 ++++++++
 .../client/styles/themes/gruvbox-light.scss   | 103 ++++++++
 .../src/client/styles/themes/holi.scss        |  81 ++++++
 .../src/client/styles/themes/hopscotch.scss   |  92 +++++++
 .../src/client/styles/themes/lucario.scss     |  93 +++++++
 .../client/styles/themes/material-dark.scss   | 172 ++++++++++++
 .../client/styles/themes/material-light.scss  | 173 ++++++++++++
 .../styles/themes/material-oceanic.scss       | 177 +++++++++++++
 .../src/client/styles/themes/night-owl.scss   | 108 ++++++++
 .../src/client/styles/themes/nord.scss        |  92 +++++++
 .../src/client/styles/themes/one-dark.scss    | 194 ++++++++++++++
 .../src/client/styles/themes/one-light.scss   | 186 +++++++++++++
 .../src/client/styles/themes/pojoaque.scss    | 101 +++++++
 .../styles/themes/shades-of-purple.scss       | 144 ++++++++++
 .../styles/themes/solarized-dark-atom.scss    | 119 +++++++++
 .../src/client/styles/themes/tomorrow.scss    |  87 ++++++
 .../src/client/styles/themes/vs.scss          | 130 +++++++++
 .../client/styles/themes/vsc-dark-plus.scss   | 221 ++++++++++++++++
 .../src/client/styles/themes/xonokai.scss     | 119 +++++++++
 .../src/client/styles/themes/z-touch.scss     | 114 ++++++++
 .../plugin-prismjs/src/node/getTheme.ts       |  58 ++++
 .../markdown/plugin-prismjs/src/node/index.ts |   1 +
 .../plugin-prismjs/src/node/options.ts        |  76 ++++++
 .../src/node/prepareConfigFile.ts             |  62 +++++
 .../plugin-prismjs/src/node/prismjsPlugin.ts  |  23 +-
 .../plugin-prismjs/tsconfig.build.json        |   3 +-
 plugins/markdown/plugin-shiki/package.json    |   4 +-
 .../plugin-shiki/src/client/styles/shiki.scss |  24 ++
 .../src/node/prepareConfigFile.ts             |  54 ++++
 .../plugin-shiki/src/node/shikiPlugin.ts      |   4 +
 pnpm-lock.yaml                                |   3 +
 .../src/client/composables/useDarkMode.ts     |  32 +--
 .../client/styles/content/code-notation.scss  | 125 ---------
 .../src/client/styles/content/code.scss       | 250 +-----------------
 .../src/client/styles/content/index.scss      |   1 -
 .../src/client/styles/normalize.scss          |   2 +-
 .../src/client/styles/vars-dark.scss          |   3 -
 .../theme-default/src/client/styles/vars.scss |  15 --
 themes/theme-default/templates/build.html     |   1 +
 tools/helper/src/client/styles/normalize.scss |  14 +-
 tools/highlighter-helper/package.json         |   1 +
 .../src/client/styles/base.scss               |  60 +++++
 .../src/client/styles/line-number.scss        |  64 +++++
 .../src/client/styles/notation-diff.scss      |  46 ++++
 .../client/styles/notation-error-level.scss   |  16 ++
 .../src/client/styles/notation-focus.scss     |  17 ++
 .../src/client/styles/notation-highlight.scss |  17 ++
 .../styles/notation-word-highlight.scss       |  18 ++
 .../src/client/styles/whitespace.scss         |  21 ++
 73 files changed, 5087 insertions(+), 473 deletions(-)
 create mode 100644 plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
 create mode 100644 plugins/markdown/plugin-prismjs/src/node/getTheme.ts
 create mode 100644 plugins/markdown/plugin-prismjs/src/node/options.ts
 create mode 100644 plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts
 create mode 100644 plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
 create mode 100644 plugins/markdown/plugin-shiki/src/node/prepareConfigFile.ts
 delete mode 100644 themes/theme-default/src/client/styles/content/code-notation.scss
 create mode 100644 tools/highlighter-helper/src/client/styles/base.scss
 create mode 100644 tools/highlighter-helper/src/client/styles/line-number.scss
 create mode 100644 tools/highlighter-helper/src/client/styles/notation-diff.scss
 create mode 100644 tools/highlighter-helper/src/client/styles/notation-error-level.scss
 create mode 100644 tools/highlighter-helper/src/client/styles/notation-focus.scss
 create mode 100644 tools/highlighter-helper/src/client/styles/notation-highlight.scss
 create mode 100644 tools/highlighter-helper/src/client/styles/notation-word-highlight.scss
 create mode 100644 tools/highlighter-helper/src/client/styles/whitespace.scss

diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts
index d0f7e2bc5b..066f539e29 100644
--- a/docs/.vuepress/theme.ts
+++ b/docs/.vuepress/theme.ts
@@ -74,6 +74,11 @@ export default defaultTheme({
           notationFocus: true,
           notationHighlight: true,
           notationWordHighlight: true,
+          whitespace: true,
+          themes: {
+            light: 'one-light',
+            dark: 'one-dark',
+          },
         },
   },
 }) as Theme
diff --git a/docs/plugins/markdown/prismjs.md b/docs/plugins/markdown/prismjs.md
index f368087706..a9a1e0de5d 100644
--- a/docs/plugins/markdown/prismjs.md
+++ b/docs/plugins/markdown/prismjs.md
@@ -28,19 +28,68 @@ export default {
 
 ## Options
 
-### preloadLanguages
+### theme
 
-- Type: `string[]`
+- Type: `PrismjsTheme`
 
-- Default: `['markdown', 'jsdoc', 'yaml']`
+- Default: `'nord'`
+
+- Details: Theme of Prismjs, will be applied to code blocks.
+
+### themes
+
+- Type: `{ light: PrismjsTheme; dark: PrismjsTheme }`
 
 - Details:
 
-  Languages to preload.
+  Apply Light / Dark Dual themes.
 
-  By default, languages will be loaded on demand when parsing markdown files.
+  Note: To use this, your theme must set `data-theme="dark"` attribute on the `<html>` tag when dark mode is enabled.
 
-  However, Prism.js has [some potential issues](https://github.com/PrismJS/prism/issues/2716) about loading languages dynamically. To avoid them, you can preload languages via this option.
+::: tip Available Prism.js Light themes
+
+- ateliersulphurpool-light
+- coldark-cold
+- coy
+- duotone-light
+- ghcolors
+- gruvbox-light
+- material-light
+- one-light
+- vs
+
+:::
+
+::: tip Available Prism.js Dark themes
+
+- atom-dark
+- cb
+- coldark-dark
+- dark
+- dracula
+- duotone-dark
+- duotone-earth
+- duotone-forest
+- duotone-sea
+- duotone-space
+- gruvbox-dark
+- holi
+- hopscotch
+- lucario
+- material-dark
+- material-oceanic
+- night-owl
+- nord
+- one-dark
+- pojoaque
+- shades-of-purple
+- solarized-dark-atom
+- tomorrow
+- vsc-dark-plus
+- xonokai
+- z-touch
+
+:::
 
 ### lineNumbers
 
@@ -145,18 +194,12 @@ export default defineUserConfig({
 })
 ```
 
-:::: tip
+::: tip
 
 In the new version, some functionalities similar to [shiki](https://shiki.style/packages/transformers) have been implemented, allowing you to style code blocks using the same syntax.
 
-The following features requires additional style to work, which should be handled by themes or users.
-
-::: details View Styles Example
-@[code](@vuepress/theme-default/src/client/styles/content/code-notation.scss)
 :::
 
-::::
-
 ### notationDiff
 
 - Type: `boolean`
@@ -426,6 +469,20 @@ The following features requires additional style to work, which should be handle
 - Also see：
   - [Shiki > Render Whitespace](https://shiki.style/packages/transformers#transformerrenderwhitespace)
 
+### preloadLanguages
+
+- Type: `string[]`
+
+- Default: `['markdown', 'jsdoc', 'yaml']`
+
+- Details:
+
+  Languages to preload.
+
+  By default, languages will be loaded on demand when parsing markdown files.
+
+  However, Prism.js has [some potential issues](https://github.com/PrismJS/prism/issues/2716) about loading languages dynamically. To avoid them, you can preload languages via this option.
+
 ### preWrapper
 
 - Type: `boolean`
diff --git a/docs/plugins/markdown/shiki.md b/docs/plugins/markdown/shiki.md
index af8596eede..880813e181 100644
--- a/docs/plugins/markdown/shiki.md
+++ b/docs/plugins/markdown/shiki.md
@@ -190,16 +190,6 @@ export default defineUserConfig({
 })
 ```
 
-:::: tip
-
-The following features requires additional style to work, which should be handled by themes or users.
-
-::: details View Styles Example
-@[code](@vuepress/theme-default/src/client/styles/content/code-notation.scss)
-:::
-
-::::
-
 ### notationDiff
 
 - Type: `boolean`
diff --git a/docs/zh/plugins/markdown/prismjs.md b/docs/zh/plugins/markdown/prismjs.md
index 395ce2cb89..96cf88e451 100644
--- a/docs/zh/plugins/markdown/prismjs.md
+++ b/docs/zh/plugins/markdown/prismjs.md
@@ -28,19 +28,68 @@ export default {
 
 ## 配置项
 
-### preloadLanguages
+### theme
 
-- 类型： `string[]`
+- 类型：`PrismjsTheme`
 
-- 默认值： `['markdown', 'jsdoc', 'yaml']`
+- 默认值：`'nord'`
+
+- 详情：Prismjs 的主题。该主题会应用到代码块上。
+
+### themes
+
+- 类型：`{ light: PrismjsTheme; dark: PrismjsTheme }`
 
 - 详情：
 
-  需要预加载的语言。
+  使用暗黑和明亮模式双主题。
 
-  默认情况下，语言会在解析 Markdown 文件时按需加载。
+  注意：想使用这个功能，你的主题必须在夜间模式下在 `<html>` 标签上 `data-theme="dark"` 属性。
 
-  然而， Prism.js 在动态加载语言时可能会遇到 [一些潜在的问题](https://github.com/PrismJS/prism/issues/2716) 。为了避免这些问题，你可以使用该配置项来预加载一些语言。
+::: tip 可用的 Prism.js 浅色主题
+
+- ateliersulphurpool-light
+- coldark-cold
+- coy
+- duotone-light
+- ghcolors
+- gruvbox-light
+- material-light
+- one-light
+- vs
+
+:::
+
+::: tip 可用的 Prism.js 深色主题
+
+- atom-dark
+- cb
+- coldark-dark
+- dark
+- dracula
+- duotone-dark
+- duotone-earth
+- duotone-forest
+- duotone-sea
+- duotone-space
+- gruvbox-dark
+- holi
+- hopscotch
+- lucario
+- material-dark
+- material-oceanic
+- night-owl
+- nord
+- one-dark
+- pojoaque
+- shades-of-purple
+- solarized-dark-atom
+- tomorrow
+- vsc-dark-plus
+- xonokai
+- z-touch
+
+:::
 
 ### lineNumbers
 
@@ -145,19 +194,13 @@ export default defineUserConfig({
 })
 ```
 
-:::: tip
+::: tip
 
 在新的版本中，实现了类似于 [shiki](https://shiki.style/packages/transformers) 的部分功能，
 你可以使用与其相同的语法来为代码块添加样式。
 
-以下功能需要额外的样式才能正常工作，这应该由主题或用户来处理。
-
-::: details 查看样式示例
-@[code](@vuepress/theme-default/src/client/styles/content/code-notation.scss)
 :::
 
-::::
-
 ### notationDiff
 
 - 类型：`boolean`
@@ -427,6 +470,20 @@ export default defineUserConfig({
 - 参考：
   - [Shiki > 空白符渲染](https://shiki.tmrs.site/packages/transformers#transformerrenderwhitespace)
 
+### preloadLanguages
+
+- 类型： `string[]`
+
+- 默认值： `['markdown', 'jsdoc', 'yaml']`
+
+- 详情：
+
+  需要预加载的语言。
+
+  默认情况下，语言会在解析 Markdown 文件时按需加载。
+
+  然而， Prism.js 在动态加载语言时可能会遇到 [一些潜在的问题](https://github.com/PrismJS/prism/issues/2716) 。为了避免这些问题，你可以使用该配置项来预加载一些语言。
+
 ### preWrapper
 
 - 类型： `boolean`
diff --git a/docs/zh/plugins/markdown/shiki.md b/docs/zh/plugins/markdown/shiki.md
index 16ea4ab27b..f7e17ccdbb 100644
--- a/docs/zh/plugins/markdown/shiki.md
+++ b/docs/zh/plugins/markdown/shiki.md
@@ -192,16 +192,6 @@ export default defineUserConfig({
 })
 ```
 
-:::: tip
-
-以下功能需要额外的样式才能正常工作，这应该由主题或用户来处理。
-
-::: details 查看样式示例
-@[code](@vuepress/theme-default/src/client/styles/content/code-notation.scss)
-:::
-
-::::
-
 ### notationDiff
 
 - 类型：`boolean`
diff --git a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
index f9c71c3b19..f420afc5c1 100644
--- a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
+++ b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
@@ -1,8 +1,8 @@
 :root {
   --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
   --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
-  --copy-code-color: #9e9e9e;
-  --copy-code-hover: rgb(0 0 0 / 50%);
+  --copy-code-color: var(--code-line-number-color, #9e9e9e);
+  --copy-code-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
 }
 
 .vp-copy-code-button {
diff --git a/plugins/markdown/plugin-prismjs/package.json b/plugins/markdown/plugin-prismjs/package.json
index edc01ece62..763080e6c1 100644
--- a/plugins/markdown/plugin-prismjs/package.json
+++ b/plugins/markdown/plugin-prismjs/package.json
@@ -23,6 +23,7 @@
   "type": "module",
   "exports": {
     ".": "./lib/node/index.js",
+    "./styles/*": "./lib/client/styles/*",
     "./package.json": "./package.json"
   },
   "main": "./lib/node/index.js",
@@ -32,9 +33,11 @@
   ],
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
-    "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
+    "style": "tsx scripts/generateThemeFiles.ts"
   },
   "dependencies": {
+    "@vuepress/helper": "workspace:*",
     "@vuepress/highlighter-helper": "workspace:*",
     "prismjs": "^1.29.0"
   },
diff --git a/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts b/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
new file mode 100644
index 0000000000..42861330f0
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
@@ -0,0 +1,52 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { compileString } from 'sass'
+import { fs, getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+const styleDir = path.resolve(__dirname, '../src/client/styles')
+const themeDir = path.resolve(styleDir, 'themes')
+const outputDir = path.resolve(__dirname, '../lib/client/styles')
+
+const themeFiles = fs.readdirSync(themeDir)
+
+fs.ensureDirSync(outputDir)
+
+themeFiles.forEach((file) => {
+  const filename = path.basename(file, '.scss')
+  const lightThemeContent = `
+@use 'mixins';
+@use 'themes/${filename}';
+
+:root {
+  @include mixins.color($code-color: ${filename}.$code-color, $code-bg-color: ${filename}.$code-bg-color);
+}
+
+@include ${filename}.style;
+`
+
+  const darkThemeContent = `
+@use 'mixins';
+@use 'themes/${filename}';
+
+[data-theme='dark'] {
+  @include mixins.color($code-color: ${filename}.$code-color, $code-bg-color: ${filename}.$code-bg-color);
+  @include ${filename}.style;
+}
+`
+
+  const lightThemeCss = compileString(lightThemeContent, {
+    loadPaths: [styleDir],
+  }).css
+
+  const darkThemeCss = compileString(darkThemeContent, {
+    loadPaths: [styleDir],
+  }).css
+
+  fs.writeFileSync(path.resolve(outputDir, `${filename}.css`), lightThemeCss)
+
+  fs.writeFileSync(
+    path.resolve(outputDir, `${filename}.dark.css`),
+    darkThemeCss,
+  )
+})
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss b/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss
new file mode 100644
index 0000000000..9404dce2bb
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss
@@ -0,0 +1,17 @@
+@use 'sass:color';
+
+@mixin color($code-color, $code-bg-color) {
+  // base
+  --code-color: #{$code-color};
+  --code-bg-color: #{$code-bg-color};
+
+  // highlight
+  --code-highlight-bg-color: #{color.scale(
+      $code-bg-color,
+      $saturation: if(color.whiteness($code-bg-color) < 50%, 5%, 10%),
+      $lightness: if(color.whiteness($code-bg-color) < 50%, 5%, -5%)
+    )};
+
+  // line-number
+  --code-line-number-color: #{color.scale($code-color, $alpha: -33%)};
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
new file mode 100644
index 0000000000..4a9942da74
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
@@ -0,0 +1,113 @@
+/*
+ * Name: Base16 Atelier Sulphurpool Light
+ * Author: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
+ * Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+ * Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-base16-ateliersulphurpool.light.css
+ */
+
+@use '../mixins';
+
+$code-color: #5e6687;
+$code-bg-color: #f5f7ff;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #dfe2f1;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #898ea4;
+  }
+
+  .token.punctuation {
+    color: #5e6687;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.operator,
+  .token.boolean,
+  .token.number {
+    color: #c76b29;
+  }
+
+  .token.property {
+    color: #c08b30;
+  }
+
+  .token.tag {
+    color: #3d8fd1;
+  }
+
+  .token.string {
+    color: #22a2c9;
+  }
+
+  .token.selector {
+    color: #6679cc;
+  }
+
+  .token.attr-name {
+    color: #c76b29;
+  }
+
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: #22a2c9;
+  }
+
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit {
+    color: #ac9739;
+  }
+
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #22a2c9;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #3d8fd1;
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted #202746;
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #c94922;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
new file mode 100644
index 0000000000..3564ffeb82
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
@@ -0,0 +1,110 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-atom-dark.css
+ */
+
+@use '../mixins';
+
+$code-color: #c5c8c6;
+$code-bg-color: #1d1f21;
+
+@mixin style {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #7c7c7c;
+  }
+
+  .token.punctuation {
+    color: #c5c8c6;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.keyword,
+  .token.tag {
+    color: #96cbfe;
+  }
+
+  .token.class-name {
+    color: #ffffb6;
+    text-decoration: underline;
+  }
+
+  .token.boolean,
+  .token.constant {
+    color: #9c9;
+  }
+
+  .token.symbol,
+  .token.deleted {
+    color: #f92672;
+  }
+
+  .token.number {
+    color: #ff73fd;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a8ff60;
+  }
+
+  .token.variable {
+    color: #c6c5fe;
+  }
+
+  .token.operator {
+    color: #ededed;
+  }
+
+  .token.entity {
+    color: #ffffb6;
+    cursor: help;
+  }
+
+  .token.url {
+    color: #96cbfe;
+  }
+
+  .language-css .token.string,
+  .style .token.string {
+    color: #87c38a;
+  }
+
+  .token.atrule,
+  .token.attr-value {
+    color: #f9ee98;
+  }
+
+  .token.function {
+    color: #dad085;
+  }
+
+  .token.regex {
+    color: #e9c062;
+  }
+
+  .token.important {
+    color: #fd971f;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
new file mode 100644
index 0000000000..bd6a7f8426
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
@@ -0,0 +1,87 @@
+/*
+ * Based on Plugin: Syntax Highlighter CB
+ * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js
+ * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js.
+ * Version: 1.0.0
+ * Author: c.bavota
+ * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-night-owl.css
+ */
+
+/* http://cbavota.bitbucket.org/syntax-highlighter/  */
+
+@use '../mixins';
+
+$code-color: #fff;
+$code-bg-color: #222;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: rgb(29 59 83 / 99%);
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #797979;
+  }
+
+  .token.selector,
+  .token.operator,
+  .token.punctuation {
+    color: #fff;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.tag,
+  .token.boolean {
+    color: #ffd893;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.hex,
+  .token.string {
+    color: #b0c975;
+  }
+
+  .token.property,
+  .token.entity,
+  .token.url,
+  .token.attr-name,
+  .token.keyword {
+    color: #c27628;
+  }
+
+  .token.regex {
+    color: #9b71c6;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.function,
+  .token.constant {
+    color: #e5a638;
+  }
+
+  .token.variable {
+    color: #fdfba8;
+  }
+
+  .token.number {
+    color: #8799b0;
+  }
+
+  .token.important,
+  .token.deliminator {
+    color: #e45734;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
new file mode 100644
index 0000000000..12115b7ccb
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
@@ -0,0 +1,162 @@
+/**
+ * Coldark Theme for Prism.js
+ * Theme variation: Cold
+ * Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
+ * @author Armand Philippot <contact@armandphilippot.com>
+ * @homepage https://github.com/ArmandPhilippot/coldark-prism
+ * @license MIT
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-coldark-cold.css
+ */
+
+@use '../mixins';
+
+$code-color: #111b27;
+$code-bg-color: #e3eaf2;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #8da1b9;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #3c526d;
+  }
+
+  .token.punctuation {
+    color: #111b27;
+  }
+
+  .token.delimiter.important,
+  .token.selector .parent,
+  .token.tag,
+  .token.tag .token.punctuation {
+    color: #006d6d;
+  }
+
+  .token.attr-name,
+  .token.boolean,
+  .token.boolean.important,
+  .token.number,
+  .token.constant,
+  .token.selector .token.attribute {
+    color: #755f00;
+  }
+
+  .token.class-name,
+  .token.key,
+  .token.parameter,
+  .token.property,
+  .token.property-access,
+  .token.variable {
+    color: #005a8e;
+  }
+
+  .token.attr-value,
+  .token.inserted,
+  .token.color,
+  .token.selector .token.value,
+  .token.string,
+  .token.string .token.url-link {
+    color: #116b00;
+  }
+
+  .token.builtin,
+  .token.keyword-array,
+  .token.package,
+  .token.regex {
+    color: #af00af;
+  }
+
+  .token.function,
+  .token.selector .token.class,
+  .token.selector .token.id {
+    color: #7c00aa;
+  }
+
+  .token.atrule .token.rule,
+  .token.combinator,
+  .token.keyword,
+  .token.operator,
+  .token.pseudo-class,
+  .token.pseudo-element,
+  .token.selector,
+  .token.unit {
+    color: #a04900;
+  }
+
+  .token.deleted,
+  .token.important {
+    color: #c22f2e;
+  }
+
+  .token.keyword-this,
+  .token.this {
+    color: #005a8e;
+  }
+
+  .token.important,
+  .token.keyword-this,
+  .token.this,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.delimiter.important {
+    font-weight: inherit;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .language-markdown .token.title,
+  .language-markdown .token.title .token.punctuation {
+    color: #005a8e;
+    font-weight: bold;
+  }
+
+  .language-markdown .token.blockquote.punctuation {
+    color: #af00af;
+  }
+
+  .language-markdown .token.code {
+    color: #006d6d;
+  }
+
+  .language-markdown .token.hr.punctuation {
+    color: #005a8e;
+  }
+
+  .language-markdown .token.url > .token.content {
+    color: #116b00;
+  }
+
+  .language-markdown .token.url-link {
+    color: #755f00;
+  }
+
+  .language-markdown .token.list.punctuation {
+    color: #af00af;
+  }
+
+  .language-markdown .token.table-header {
+    color: #111b27;
+  }
+
+  .language-json .token.operator {
+    color: #111b27;
+  }
+
+  .language-scss .token.variable {
+    color: #006d6d;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
new file mode 100644
index 0000000000..e396af4ff7
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
@@ -0,0 +1,164 @@
+/**
+ * Coldark Theme for Prism.js
+ * Theme variation: Dark
+ * Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
+ * @author Armand Philippot <contact@armandphilippot.com>
+ * @homepage https://github.com/ArmandPhilippot/coldark-prism
+ * @license MIT
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-coldark-dark.css
+ */
+
+@use '../mixins';
+
+$code-color: #e3eaf2;
+$code-bg-color: #111b27;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #3c526d;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #8da1b9;
+  }
+
+  .token.punctuation {
+    color: #e3eaf2;
+  }
+
+  .token.delimiter.important,
+  .token.selector .parent,
+  .token.tag,
+  .token.tag .token.punctuation {
+    color: #6cc;
+  }
+
+  .token.attr-name,
+  .token.boolean,
+  .token.boolean.important,
+  .token.number,
+  .token.constant,
+  .token.selector .token.attribute {
+    color: #e6d37a;
+  }
+
+  .token.class-name,
+  .token.key,
+  .token.parameter,
+  .token.property,
+  .token.property-access,
+  .token.variable {
+    color: #6cb8e6;
+  }
+
+  .token.attr-value,
+  .token.inserted,
+  .token.color,
+  .token.selector .token.value,
+  .token.string,
+  .token.string .token.url-link {
+    color: #91d076;
+  }
+
+  .token.builtin,
+  .token.keyword-array,
+  .token.package,
+  .token.regex {
+    color: #f4adf4;
+  }
+
+  .token.function,
+  .token.selector .token.class,
+  .token.selector .token.id {
+    color: #c699e3;
+  }
+
+  .token.atrule .token.rule,
+  .token.combinator,
+  .token.keyword,
+  .token.operator,
+  .token.pseudo-class,
+  .token.pseudo-element,
+  .token.selector,
+  .token.unit {
+    color: #e9ae7e;
+  }
+
+  .token.deleted,
+  .token.important {
+    color: #cd6660;
+  }
+
+  .token.keyword-this,
+  .token.this {
+    color: #6cb8e6;
+  }
+
+  .token.important,
+  .token.keyword-this,
+  .token.this,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.delimiter.important {
+    font-weight: inherit;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .language-markdown {
+    .token.title,
+    .token.title .token.punctuation {
+      color: #6cb8e6;
+      font-weight: bold;
+    }
+
+    .token.code {
+      color: #6cc;
+    }
+
+    .token.url-link {
+      color: #e6d37a;
+    }
+
+    .token.table-header {
+      color: #e3eaf2;
+    }
+
+    .token.blockquote.punctuation {
+      color: #f4adf4;
+    }
+
+    .token.hr.punctuation {
+      color: #6cb8e6;
+    }
+
+    .token.list.punctuation {
+      color: #f4adf4;
+    }
+
+    .token.url .token.content {
+      color: #91d076;
+    }
+  }
+
+  .language-json .token.operator {
+    color: #e3eaf2;
+  }
+
+  .language-scss .token.variable {
+    color: #6cc;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
new file mode 100644
index 0000000000..4e60ef6acd
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
@@ -0,0 +1,97 @@
+/**
+ * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or  http://workshop.timshedor.com/category/sessions/basics);
+ * @author Tim  Shedor
+ */
+
+@use '../mixins';
+
+$code-color: #000;
+$code-bg-color: #fdfdfd;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #b3d4fc;
+    }
+  }
+
+  .token.comment,
+  .token.block-comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #7d8b99;
+  }
+
+  .token.punctuation {
+    color: #5f6364;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.function-name,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #c92c2c;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.function,
+  .token.builtin,
+  .token.inserted {
+    color: #2f9c0a;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    background: rgb(255 255 255 / 50%);
+    color: #a67f59;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword,
+  .token.class-name {
+    color: #1990b8;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .language-css .token.string,
+  .style .token.string {
+    background: rgb(255 255 255 / 50%);
+    color: #a67f59;
+  }
+
+  .token.important {
+    font-weight: normal;
+  }
+
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
new file mode 100644
index 0000000000..0b9ec473b3
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
@@ -0,0 +1,96 @@
+/**
+ * prism.js Dark theme for JavaScript, CSS and HTML
+ * Based on the slides of the talk “/Reg(exp){2}lained/”
+ * @author Lea Verou
+ * Copied from https://github.com/PrismJS/prism/blob/master/themes/prism-dark.css
+ */
+
+@use '../mixins';
+
+$code-color: #fff;
+$code-bg-color: #4d4033;
+
+@mixin style {
+  pre[class*='language-'] {
+    text-shadow: 0 -0.1em 0.2em #000;
+
+    @media print {
+      text-shadow: none;
+    }
+
+    ::selection {
+      background: rgb(29 59 83 / 99%);
+      text-shadow: none;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30deg 20% 50%);
+  }
+
+  .token.punctuation {
+    opacity: 0.7;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: hsl(350deg 40% 70%);
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: hsl(75deg 70% 60%);
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: hsl(40deg 90% 60%);
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: hsl(350deg 40% 70%);
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.deleted {
+    color: #f00;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
new file mode 100644
index 0000000000..18211a7385
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
@@ -0,0 +1,97 @@
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-dracula.css
+ */
+
+@use '../mixins';
+
+$code-color: #f8f8f2;
+$code-bg-color: #282a36;
+
+@mixin style {
+  pre[class*='language-'] {
+    text-shadow: 0 1px rgb(0 0 0 / 30%);
+
+    @media print {
+      text-shadow: none;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #6272a4;
+  }
+
+  .token.punctuation {
+    color: #f8f8f2;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #ff79c6;
+  }
+
+  .token.boolean,
+  .token.number {
+    color: #bd93f9;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #50fa7b;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: #f8f8f2;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.class-name {
+    color: #f1fa8c;
+  }
+
+  .token.keyword {
+    color: #8be9fd;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #ffb86c;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
new file mode 100644
index 0000000000..492a09f3fb
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
@@ -0,0 +1,108 @@
+/*
+ * Name:   Duotone Forest
+ * Author: by Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+ * Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-forest-dark.css)
+ * Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-dark.css
+ */
+
+@use '../mixins';
+
+$code-color: #9a86fd;
+$code-bg-color: #2a2734;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #6a51e6;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #6c6783;
+  }
+
+  .token.punctuation {
+    color: #6c6783;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.number {
+    color: #e09142;
+  }
+
+  .token.property,
+  .token.function {
+    color: #9a86fd;
+  }
+
+  .token.tag-id,
+  .token.selector,
+  .token.atrule-id {
+    color: #eeebff;
+  }
+
+  .language-javascript,
+  .token.attr-name {
+    color: #c4b9fe;
+  }
+
+  .language-css,
+  .language-scss,
+  .token.boolean,
+  .token.string,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .language-scss .token.string,
+  .style .token.string,
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit,
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #fc9;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #fc9;
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted #eeebff;
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #c4b9fe;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
new file mode 100644
index 0000000000..02d7546703
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
@@ -0,0 +1,108 @@
+/*
+ * Name:   Duotone Forest
+ * Author: by Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+ * Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-forest-dark.css)
+ * Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-earth.css
+ */
+
+@use '../mixins';
+
+$code-color: #88786d;
+$code-bg-color: #322d29;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #6f5849;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #6a5f58;
+  }
+
+  .token.punctuation {
+    color: #6a5f58;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.number {
+    color: #bfa05a;
+  }
+
+  .token.property,
+  .token.function {
+    color: #88786d;
+  }
+
+  .token.tag-id,
+  .token.selector,
+  .token.atrule-id {
+    color: #fff3eb;
+  }
+
+  .language-javascript,
+  .token.attr-name {
+    color: #a48774;
+  }
+
+  .language-css,
+  .language-scss,
+  .token.boolean,
+  .token.string,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .language-scss .token.string,
+  .style .token.string,
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit,
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #fcc440;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #fcc440;
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted #fff3eb;
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #a48774;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
new file mode 100644
index 0000000000..88e2340b4e
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
@@ -0,0 +1,108 @@
+/*
+ * Name: Duotone Forest
+ * Author: by Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+ * Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-forest-dark.css)
+ * Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-forest.css
+ */
+
+@use '../mixins';
+
+$code-color: #687d68;
+$code-bg-color: #2a2d2a;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #435643;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #535f53;
+  }
+
+  .token.punctuation {
+    color: #535f53;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.number {
+    color: #a2b34d;
+  }
+
+  .token.property,
+  .token.function {
+    color: #687d68;
+  }
+
+  .token.tag-id,
+  .token.selector,
+  .token.atrule-id {
+    color: #f0fff0;
+  }
+
+  .language-javascript,
+  .token.attr-name {
+    color: #b3d6b3;
+  }
+
+  .language-css,
+  .language-scss,
+  .token.boolean,
+  .token.string,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .language-scss .token.string,
+  .style .token.string,
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit,
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #e5fb79;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #e5fb79;
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted #f0fff0;
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #b3d6b3;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
new file mode 100644
index 0000000000..5a065c316c
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
@@ -0,0 +1,108 @@
+/*
+ * Name:   Duotone Light
+ * Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+ * Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css)
+ * Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-light.css
+*/
+
+@use '../mixins';
+
+$code-color: #728fcb;
+$code-bg-color: #faf8f5;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #faf8f5;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #b6ad9a;
+  }
+
+  .token.punctuation {
+    color: #b6ad9a;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.number {
+    color: #063289;
+  }
+
+  .token.property,
+  .token.function {
+    color: #b29762;
+  }
+
+  .token.tag-id,
+  .token.selector,
+  .token.atrule-id {
+    color: #2d2006;
+  }
+
+  .language-javascript,
+  .token.attr-name {
+    color: #896724;
+  }
+
+  .language-css,
+  .language-scss,
+  .token.boolean,
+  .token.string,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .language-scss .token.string,
+  .style .token.string,
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit,
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #728fcb;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #93abdc;
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted #2d2006;
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #896724;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
new file mode 100644
index 0000000000..6eacb35fb6
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
@@ -0,0 +1,108 @@
+/*
+ * Name:   Duotone Forest
+ * Author: by Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+ * Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-forest-dark.css)
+ * Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-sea.css
+ */
+
+@use '../mixins';
+
+$code-color: #57718e;
+$code-bg-color: #1d262f;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #004a9e;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #4a5f78;
+  }
+
+  .token.punctuation {
+    color: #4a5f78;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.number {
+    color: #0aa370;
+  }
+
+  .token.property,
+  .token.function {
+    color: #57718e;
+  }
+
+  .token.tag-id,
+  .token.selector,
+  .token.atrule-id {
+    color: #ebf4ff;
+  }
+
+  .language-javascript,
+  .token.attr-name {
+    color: #7eb6f6;
+  }
+
+  .language-css,
+  .language-scss,
+  .token.boolean,
+  .token.string,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .language-scss .token.string,
+  .style .token.string,
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit,
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #47ebb4;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #47ebb4;
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted #ebf4ff;
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #7eb6f6;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
new file mode 100644
index 0000000000..9c9ce6dff5
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
@@ -0,0 +1,108 @@
+/*
+ * Name:   Duotone Forest
+ * Author: by Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+ * Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-forest-dark.css)
+ * Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-space.css
+ */
+
+@use '../mixins';
+
+$code-color: #767693;
+$code-bg-color: #24242e;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #5151e6;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #5b5b76;
+  }
+
+  .token.punctuation {
+    color: #5b5b76;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.number {
+    color: #dd672c;
+  }
+
+  .token.property,
+  .token.function {
+    color: #767693;
+  }
+
+  .token.tag-id,
+  .token.selector,
+  .token.atrule-id {
+    color: #ebebff;
+  }
+
+  .language-javascript,
+  .token.attr-name {
+    color: #aaaaca;
+  }
+
+  .language-css,
+  .language-scss,
+  .token.boolean,
+  .token.string,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .language-scss .token.string,
+  .style .token.string,
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit,
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #fe8c52;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #fe8c52;
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted #ebebff;
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #aaaaca;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
new file mode 100644
index 0000000000..64c34370e8
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
@@ -0,0 +1,93 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by GitHub syntax coloring
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-ghcolors.css
+ */
+
+@use '../mixins';
+
+$code-color: #393a34;
+$code-bg-color: #f8f8f8;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #b3d4fc;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #998;
+    font-style: italic;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.string,
+  .token.attr-value {
+    color: #e3116c;
+  }
+
+  .token.punctuation,
+  .token.operator {
+    color: #393a34; /* no highlight */
+  }
+
+  .token.entity,
+  .token.url,
+  .token.symbol,
+  .token.number,
+  .token.boolean,
+  .token.variable,
+  .token.constant,
+  .token.property,
+  .token.regex,
+  .token.inserted {
+    color: #36acaa;
+  }
+
+  .token.atrule,
+  .token.keyword,
+  .token.attr-name {
+    color: #00a4db;
+  }
+
+  .token.function,
+  .token.deleted {
+    color: #9a050f;
+  }
+
+  .token.tag,
+  .token.selector {
+    color: #00009f;
+  }
+
+  .token.important,
+  .token.function,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .language-autohotkey {
+    .token.selector {
+      color: #00a4db;
+    }
+
+    .token.tag {
+      color: #9a050f;
+    }
+
+    .token.keyword {
+      color: #00009f;
+    }
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
new file mode 100644
index 0000000000..c61d341199
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
@@ -0,0 +1,103 @@
+/**
+ * Gruvbox dark theme
+ *
+ * Adapted from a theme based on:
+ * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox)
+ *
+ * @author Azat S. <to@azat.io>
+ * @version 1.0
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-gruvbox-dark.css
+ */
+
+@use '../mixins';
+
+$code-color: #ebdbb2;
+$code-bg-color: #1d2021;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #7c6f64;
+      color: #fbf1c7;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: #a89984;
+  }
+
+  .token.delimiter,
+  .token.boolean,
+  .token.keyword,
+  .token.selector,
+  .token.important,
+  .token.atrule {
+    color: #fb4934;
+  }
+
+  .token.operator,
+  .token.punctuation,
+  .token.attr-name {
+    color: #a89984;
+  }
+
+  .token.tag,
+  .token.tag .punctuation,
+  .token.doctype,
+  .token.builtin {
+    color: #fabd2f;
+  }
+
+  .token.entity,
+  .token.number,
+  .token.symbol {
+    color: #d3869b;
+  }
+
+  .token.property,
+  .token.constant,
+  .token.variable {
+    color: #fb4934;
+  }
+
+  .token.string,
+  .token.char {
+    color: #b8bb26;
+  }
+
+  .token.attr-value,
+  .token.attr-value .punctuation {
+    color: #a89984;
+  }
+
+  .token.url {
+    color: #b8bb26;
+    text-decoration: underline;
+  }
+
+  .token.function {
+    color: #fabd2f;
+  }
+
+  .token.regex {
+    background: #b8bb26;
+  }
+
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.inserted {
+    background: #a89984;
+  }
+
+  .token.deleted {
+    background: #fb4934;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
new file mode 100644
index 0000000000..c5aa28e302
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
@@ -0,0 +1,103 @@
+/**
+ * Gruvbox light theme
+ *
+ * Based on Gruvbox: https://github.com/morhetz/gruvbox
+ * Adapted from PrismJS gruvbox-dark theme: https://github.com/schnerring/prism-themes/blob/master/themes/prism-gruvbox-dark.css
+ *
+ * @author Michael Schnerring (https://schnerring.net)
+ * @version 1.0
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-gruvbox-light.css
+ */
+
+@use '../mixins';
+
+$code-color: #3c3836;
+$code-bg-color: #f9f5d7;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #a89984;
+      color: #282828;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: #7c6f64;
+  }
+
+  .token.delimiter,
+  .token.boolean,
+  .token.keyword,
+  .token.selector,
+  .token.important,
+  .token.atrule {
+    color: #9d0006;
+  }
+
+  .token.operator,
+  .token.punctuation,
+  .token.attr-name {
+    color: #7c6f64;
+  }
+
+  .token.tag,
+  .token.tag .punctuation,
+  .token.doctype,
+  .token.builtin {
+    color: #b57614;
+  }
+
+  .token.entity,
+  .token.number,
+  .token.symbol {
+    color: #8f3f71;
+  }
+
+  .token.property,
+  .token.constant,
+  .token.variable {
+    color: #9d0006;
+  }
+
+  .token.string,
+  .token.char {
+    color: #797403;
+  }
+
+  .token.attr-value,
+  .token.attr-value .punctuation {
+    color: #7c6f64;
+  }
+
+  .token.url {
+    color: #797403;
+    text-decoration: underline;
+  }
+
+  .token.function {
+    color: #b57614;
+  }
+
+  .token.regex {
+    background: #797403;
+  }
+
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.inserted {
+    background: #7c6f64;
+  }
+
+  .token.deleted {
+    background: #9d0006;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
new file mode 100644
index 0000000000..e0f1db7379
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
@@ -0,0 +1,81 @@
+/**
+ * MIT License
+ * Copyright (c) 2021 Ayush Saini
+ * Holi Theme for prism.js
+ * @author Ayush Saini <@AyushCodes on Twitter>
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-holi-theme.css
+ */
+
+@use '../mixins';
+
+$code-color: #d6e7ff;
+$code-bg-color: #2a4555;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #1d3b54;
+      color: inherit;
+      text-shadow: none;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #446e69;
+  }
+
+  .token.punctuation {
+    color: #d6b007;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #d6e7ff;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.builtin,
+  .token.inserted {
+    color: #e60067;
+  }
+
+  .token.string,
+  .token.char {
+    color: #49c6ec;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    background: transparent;
+    color: #ec8e01;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #0fe468;
+  }
+
+  .token.function,
+  .token.class-name {
+    color: #78f3e9;
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: #d6e7ff;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
new file mode 100644
index 0000000000..8869c247c4
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
@@ -0,0 +1,92 @@
+/*
+ * Hopscotch
+ * by Jan T. Sott
+ * https://github.com/idleberg/Hopscotch
+ *
+ * This work is licensed under the Creative Commons CC0 1.0 Universal License
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-hopscotch.css
+ */
+
+@use '../mixins';
+
+$code-color: #b9b5b8;
+$code-bg-color: #322931;
+
+@mixin style {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #797379;
+  }
+
+  .token.punctuation {
+    color: #b9b5b8;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.null,
+  .token.operator,
+  .token.boolean,
+  .token.number {
+    color: #fd8b19;
+  }
+
+  .token.property {
+    color: #fdcc59;
+  }
+
+  .token.tag {
+    color: #1290bf;
+  }
+
+  .token.string {
+    color: #149b93;
+  }
+
+  .token.selector {
+    color: #c85e7c;
+  }
+
+  .token.attr-name {
+    color: #fd8b19;
+  }
+
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: #149b93;
+  }
+
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit {
+    color: #8fc13e;
+  }
+
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #149b93;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #1290bf;
+  }
+
+  .token.important {
+    color: #dd464c;
+    font-weight: bold;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
new file mode 100644
index 0000000000..92de0827a4
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
@@ -0,0 +1,93 @@
+/**
+ * Lucario Theme originally by Raphael Amorim [@raphamorim]
+ * https://github.com/raphamorim/lucario
+ *
+ * Ported for PrismJS by Christopher Kapic [@christopher-kapic]
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-lucario.css
+ */
+
+@use '../mixins';
+
+$code-color: #f8f8f2;
+$code-bg-color: #263e52;
+
+@mixin style {
+  pre[class*='language-'] {
+    text-shadow: 0 1px rgb(0 0 0 / 30%);
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #5c98cd;
+  }
+
+  .token.punctuation {
+    color: #f8f8f2;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #f05e5d;
+  }
+
+  .token.boolean,
+  .token.number {
+    color: #bc94f9;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #fcfcd6;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: #f8f8f2;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.class-name {
+    color: #66d8ef;
+  }
+
+  .token.keyword {
+    color: #6eb26e;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #f05e5d;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
new file mode 100644
index 0000000000..a83d1ac644
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
@@ -0,0 +1,172 @@
+/**
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-dark.css
+ */
+
+@use '../mixins';
+
+$code-color: #eee;
+$code-bg-color: #2f2f2f;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #363636;
+    }
+  }
+
+  .language-css > code,
+  .language-sass > code,
+  .language-scss > code {
+    color: #fd9170;
+  }
+
+  [class*='language-'] .namespace {
+    opacity: 0.7;
+  }
+
+  .token.atrule {
+    color: #c792ea;
+  }
+
+  .token.attr-name {
+    color: #ffcb6b;
+  }
+
+  .token.attr-value {
+    color: #a5e844;
+  }
+
+  .token.attribute {
+    color: #a5e844;
+  }
+
+  .token.boolean {
+    color: #c792ea;
+  }
+
+  .token.builtin {
+    color: #ffcb6b;
+  }
+
+  .token.cdata {
+    color: #80cbc4;
+  }
+
+  .token.char {
+    color: #80cbc4;
+  }
+
+  .token.class {
+    color: #ffcb6b;
+  }
+
+  .token.class-name {
+    color: #f2ff00;
+  }
+
+  .token.comment {
+    color: #616161;
+  }
+
+  .token.constant {
+    color: #c792ea;
+  }
+
+  .token.deleted {
+    color: #f66;
+  }
+
+  .token.doctype {
+    color: #616161;
+  }
+
+  .token.entity {
+    color: #f66;
+  }
+
+  .token.function {
+    color: #c792ea;
+  }
+
+  .token.hexcode {
+    color: #f2ff00;
+  }
+
+  .token.id {
+    color: #c792ea;
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #c792ea;
+    font-weight: bold;
+  }
+
+  .token.inserted {
+    color: #80cbc4;
+  }
+
+  .token.keyword {
+    color: #c792ea;
+  }
+
+  .token.number {
+    color: #fd9170;
+  }
+
+  .token.operator {
+    color: #89ddff;
+  }
+
+  .token.prolog {
+    color: #616161;
+  }
+
+  .token.property {
+    color: #80cbc4;
+  }
+
+  .token.pseudo-class {
+    color: #a5e844;
+  }
+
+  .token.pseudo-element {
+    color: #a5e844;
+  }
+
+  .token.punctuation {
+    color: #89ddff;
+  }
+
+  .token.regex {
+    color: #f2ff00;
+  }
+
+  .token.selector {
+    color: #f66;
+  }
+
+  .token.string {
+    color: #a5e844;
+  }
+
+  .token.symbol {
+    color: #c792ea;
+  }
+
+  .token.tag {
+    color: #f66;
+  }
+
+  .token.unit {
+    color: #fd9170;
+  }
+
+  .token.url {
+    color: #f66;
+  }
+
+  .token.variable {
+    color: #f66;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
new file mode 100644
index 0000000000..b53e09d5c5
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
@@ -0,0 +1,173 @@
+/**
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-light.css
+ */
+
+@use '../mixins';
+
+$code-color: #90a4ae;
+$code-bg-color: #fafafa;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #cceae7;
+      color: #263238;
+    }
+  }
+
+  .language-css > code,
+  .language-sass > code,
+  .language-scss > code {
+    color: #f76d47;
+  }
+
+  [class*='language-'] .namespace {
+    opacity: 0.7;
+  }
+
+  .token.atrule {
+    color: #7c4dff;
+  }
+
+  .token.attr-name {
+    color: #39adb5;
+  }
+
+  .token.attr-value {
+    color: #f6a434;
+  }
+
+  .token.attribute {
+    color: #f6a434;
+  }
+
+  .token.boolean {
+    color: #7c4dff;
+  }
+
+  .token.builtin {
+    color: #39adb5;
+  }
+
+  .token.cdata {
+    color: #39adb5;
+  }
+
+  .token.char {
+    color: #39adb5;
+  }
+
+  .token.class {
+    color: #39adb5;
+  }
+
+  .token.class-name {
+    color: #6182b8;
+  }
+
+  .token.comment {
+    color: #aabfc9;
+  }
+
+  .token.constant {
+    color: #7c4dff;
+  }
+
+  .token.deleted {
+    color: #e53935;
+  }
+
+  .token.doctype {
+    color: #aabfc9;
+  }
+
+  .token.entity {
+    color: #e53935;
+  }
+
+  .token.function {
+    color: #7c4dff;
+  }
+
+  .token.hexcode {
+    color: #f76d47;
+  }
+
+  .token.id {
+    color: #7c4dff;
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #7c4dff;
+    font-weight: bold;
+  }
+
+  .token.inserted {
+    color: #39adb5;
+  }
+
+  .token.keyword {
+    color: #7c4dff;
+  }
+
+  .token.number {
+    color: #f76d47;
+  }
+
+  .token.operator {
+    color: #39adb5;
+  }
+
+  .token.prolog {
+    color: #aabfc9;
+  }
+
+  .token.property {
+    color: #39adb5;
+  }
+
+  .token.pseudo-class {
+    color: #f6a434;
+  }
+
+  .token.pseudo-element {
+    color: #f6a434;
+  }
+
+  .token.punctuation {
+    color: #39adb5;
+  }
+
+  .token.regex {
+    color: #6182b8;
+  }
+
+  .token.selector {
+    color: #e53935;
+  }
+
+  .token.string {
+    color: #f6a434;
+  }
+
+  .token.symbol {
+    color: #7c4dff;
+  }
+
+  .token.tag {
+    color: #e53935;
+  }
+
+  .token.unit {
+    color: #f76d47;
+  }
+
+  .token.url {
+    color: #e53935;
+  }
+
+  .token.variable {
+    color: #e53935;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
new file mode 100644
index 0000000000..788fbf14f0
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
@@ -0,0 +1,177 @@
+/**
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-oceanic.css
+ */
+
+@use '../mixins';
+
+$code-color: #c3cee3;
+$code-bg-color: #263238;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #363636;
+    }
+  }
+
+  .language-css > code,
+  .language-sass > code,
+  .language-scss > code {
+    color: #fd9170;
+  }
+
+  [class*='language-'] .namespace {
+    opacity: 0.7;
+  }
+
+  .token.atrule {
+    color: #c792ea;
+  }
+
+  .token.attr-name {
+    color: #ffcb6b;
+  }
+
+  .token.attr-value {
+    color: #c3e88d;
+  }
+
+  .token.attribute {
+    color: #c3e88d;
+  }
+
+  .token.boolean {
+    color: #c792ea;
+  }
+
+  .token.builtin {
+    color: #ffcb6b;
+  }
+
+  .token.cdata {
+    color: #80cbc4;
+  }
+
+  .token.char {
+    color: #80cbc4;
+  }
+
+  .token.class {
+    color: #ffcb6b;
+  }
+
+  .token.class-name {
+    color: #f2ff00;
+  }
+
+  .token.color {
+    color: #f2ff00;
+  }
+
+  .token.comment {
+    color: #546e7a;
+  }
+
+  .token.constant {
+    color: #c792ea;
+  }
+
+  .token.deleted {
+    color: #f07178;
+  }
+
+  .token.doctype {
+    color: #546e7a;
+  }
+
+  .token.entity {
+    color: #f07178;
+  }
+
+  .token.function {
+    color: #c792ea;
+  }
+
+  .token.hexcode {
+    color: #f2ff00;
+  }
+
+  .token.id {
+    color: #c792ea;
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #c792ea;
+    font-weight: bold;
+  }
+
+  .token.inserted {
+    color: #80cbc4;
+  }
+
+  .token.keyword {
+    color: #c792ea;
+    font-style: italic;
+  }
+
+  .token.number {
+    color: #fd9170;
+  }
+
+  .token.operator {
+    color: #89ddff;
+  }
+
+  .token.prolog {
+    color: #546e7a;
+  }
+
+  .token.property {
+    color: #80cbc4;
+  }
+
+  .token.pseudo-class {
+    color: #c3e88d;
+  }
+
+  .token.pseudo-element {
+    color: #c3e88d;
+  }
+
+  .token.punctuation {
+    color: #89ddff;
+  }
+
+  .token.regex {
+    color: #f2ff00;
+  }
+
+  .token.selector {
+    color: #f07178;
+  }
+
+  .token.string {
+    color: #c3e88d;
+  }
+
+  .token.symbol {
+    color: #c792ea;
+  }
+
+  .token.tag {
+    color: #f07178;
+  }
+
+  .token.unit {
+    color: #f07178;
+  }
+
+  .token.url {
+    color: #fd9170;
+  }
+
+  .token.variable {
+    color: #f07;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
new file mode 100644
index 0000000000..289f29cd2c
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
@@ -0,0 +1,108 @@
+/**
+ * MIT License
+ * Copyright (c) 2018 Sarah Drasner
+ * Sarah Drasner's[@sdras] Night Owl
+ * Ported by Sara vieria [@SaraVieira]
+ * Added by Souvik Mandal [@SimpleIndian]
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-night-owl.css
+ */
+
+@use '../mixins';
+
+$code-color: #fff;
+$code-bg-color: #011627;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: rgb(29 59 83 / 99%);
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: rgb(99 119 119);
+    font-style: italic;
+  }
+
+  .token.punctuation {
+    color: rgb(199 146 234);
+  }
+
+  .namespace {
+    color: rgb(178 204 214);
+  }
+
+  .token.deleted {
+    color: rgb(239 83 80 / 56%);
+    font-style: italic;
+  }
+
+  .token.symbol,
+  .token.property {
+    color: rgb(128 203 196);
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.keyword {
+    color: rgb(127 219 202);
+  }
+
+  .token.boolean {
+    color: rgb(255 88 116);
+  }
+
+  .token.number {
+    color: rgb(247 140 108);
+  }
+
+  .token.constant,
+  .token.function,
+  .token.builtin,
+  .token.char {
+    color: rgb(130 170 255);
+  }
+
+  .token.selector,
+  .token.doctype {
+    color: rgb(199 146 234);
+    font-style: italic;
+  }
+
+  .token.attr-name,
+  .token.inserted {
+    color: rgb(173 219 103);
+    font-style: italic;
+  }
+
+  .token.string,
+  .token.url,
+  .token.entity,
+  .language-css .token.string,
+  .style .token.string {
+    color: rgb(173 219 103);
+  }
+
+  .token.class-name,
+  .token.atrule,
+  .token.attr-value {
+    color: rgb(255 203 139);
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: rgb(214 222 235);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
new file mode 100644
index 0000000000..397cad62f9
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
@@ -0,0 +1,92 @@
+/**
+ * Nord Theme Originally by Arctic Ice Studio
+ * https://nordtheme.com
+ *
+ * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-nord.css
+ */
+
+@use '../mixins';
+
+$code-color: #f8f8f2;
+$code-bg-color: #2e3440;
+
+@mixin style {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #636f88;
+  }
+
+  .token.punctuation {
+    color: #81a1c1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #81a1c1;
+  }
+
+  .token.number {
+    color: #b48ead;
+  }
+
+  .token.boolean {
+    color: #81a1c1;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a3be8c;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: #81a1c1;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.class-name {
+    color: #88c0d0;
+  }
+
+  .token.keyword {
+    color: #81a1c1;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #ebcb8b;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
new file mode 100644
index 0000000000..afbff4ddf0
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
@@ -0,0 +1,194 @@
+/**
+ * One Light theme for prism.js
+ * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css
+ */
+
+@use '../mixins';
+
+$code-color: #abb2bf;
+$code-bg-color: #282c34;
+
+@mixin style {
+  pre[class*='language-'] {
+    text-shadow: 0 1px rgb(0 0 0 / 30%);
+
+    // tab size
+    tab-size: 2;
+
+    /* Print */
+    @media print {
+      text-shadow: none;
+    }
+
+    ::selection {
+      background: #3e4451;
+      color: inherit;
+      text-shadow: none;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: #5c6370;
+  }
+
+  .token.doctype,
+  .token.punctuation,
+  .token.entity {
+    color: #abb2bf;
+  }
+
+  .token.attr-name,
+  .token.class-name,
+  .token.boolean,
+  .token.constant,
+  .token.number,
+  .token.atrule {
+    color: #d19a66;
+  }
+
+  .token.keyword {
+    color: #c678dd;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.symbol,
+  .token.deleted,
+  .token.important {
+    color: #e06c75;
+  }
+
+  .token.selector,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted,
+  .token.regex,
+  .token.attr-value,
+  .token.attr-value > .token.punctuation {
+    color: #98c379;
+  }
+
+  .token.variable,
+  .token.operator,
+  .token.function {
+    color: #61afef;
+  }
+
+  .token.url {
+    color: #56b6c2;
+  }
+
+  /* HTML overrides */
+  .token.attr-value > .token.punctuation.attr-equals,
+  .token.special-attr > .token.attr-value > .token.value.css {
+    color: #abb2bf;
+  }
+
+  /* CSS overrides */
+  .language-css .token.selector {
+    color: #e06c75;
+  }
+
+  .language-css .token.property {
+    color: #abb2bf;
+  }
+
+  .language-css .token.function,
+  .language-css .token.url > .token.function {
+    color: #56b6c2;
+  }
+
+  .language-css .token.url > .token.string.url {
+    color: #98c379;
+  }
+
+  .language-css .token.important,
+  .language-css .token.atrule .token.rule {
+    color: #c678dd;
+  }
+
+  /* JS overrides */
+  .language-javascript .token.operator {
+    color: #c678dd;
+  }
+
+  // stylelint-disable-next-line selector-max-compound-selectors
+  .language-javascript
+    .token.template-string
+    > .token.interpolation
+    > .token.interpolation-punctuation.punctuation {
+    color: #be5046;
+  }
+
+  /* JSON overrides */
+  .language-json .token.operator {
+    color: #abb2bf;
+  }
+
+  .language-json .token.null.keyword {
+    color: #d19a66;
+  }
+
+  /* MD overrides */
+  .language-markdown .token.url,
+  .language-markdown .token.url > .token.operator,
+  .language-markdown .token.url-reference.url > .token.string {
+    color: #abb2bf;
+  }
+
+  .language-markdown .token.url > .token.content {
+    color: #61afef;
+  }
+
+  .language-markdown .token.url > .token.url,
+  .language-markdown .token.url-reference.url {
+    color: #56b6c2;
+  }
+
+  .language-markdown .token.blockquote.punctuation,
+  .language-markdown .token.hr.punctuation {
+    color: #5c6370;
+    font-style: italic;
+  }
+
+  .language-markdown .token.code-snippet {
+    color: #98c379;
+  }
+
+  .language-markdown .token.bold .token.content {
+    color: #d19a66;
+  }
+
+  .language-markdown .token.italic .token.content {
+    color: #c678dd;
+  }
+
+  .language-markdown .token.strike .token.content,
+  .language-markdown .token.strike .token.punctuation,
+  .language-markdown .token.list.punctuation,
+  .language-markdown .token.title.important > .token.punctuation {
+    color: #e06c75;
+  }
+
+  /* General */
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.comment,
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.namespace {
+    opacity: 0.8;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
new file mode 100644
index 0000000000..4cccb4c6ab
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
@@ -0,0 +1,186 @@
+/**
+ * One Light theme for prism.js
+ * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css
+ */
+
+@use '../mixins';
+
+$code-color: #383a42;
+$code-bg-color: #ecf4fa;
+
+@mixin style {
+  pre[class*='language-'] {
+    // tab size
+    tab-size: 2;
+
+    ::selection {
+      background: #e5e5e6;
+      color: inherit;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: #a0a1a7;
+  }
+
+  .token.doctype,
+  .token.punctuation,
+  .token.entity {
+    color: #383a42;
+  }
+
+  .token.attr-name,
+  .token.class-name,
+  .token.boolean,
+  .token.constant,
+  .token.number,
+  .token.atrule {
+    color: #b76b01;
+  }
+
+  .token.keyword {
+    color: #a626a4;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.symbol,
+  .token.deleted,
+  .token.important {
+    color: #e45649;
+  }
+
+  .token.selector,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted,
+  .token.regex,
+  .token.attr-value,
+  .token.attr-value > .token.punctuation {
+    color: #50a14f;
+  }
+
+  .token.variable,
+  .token.operator,
+  .token.function {
+    color: #4078f2;
+  }
+
+  .token.url {
+    color: #0184bc;
+  }
+
+  /* HTML overrides */
+  .token.attr-value > .token.punctuation.attr-equals,
+  .token.special-attr > .token.attr-value > .token.value.css {
+    color: #383a42;
+  }
+
+  /* CSS overrides */
+  .language-css .token.selector {
+    color: #e45649;
+  }
+
+  .language-css .token.property {
+    color: #383a42;
+  }
+
+  .language-css .token.function,
+  .language-css .token.url > .token.function {
+    color: #0184bc;
+  }
+
+  .language-css .token.url > .token.string.url {
+    color: #50a14f;
+  }
+
+  .language-css .token.important,
+  .language-css .token.atrule .token.rule {
+    color: #a626a4;
+  }
+
+  /* JS overrides */
+  .language-javascript .token.operator {
+    color: #a626a4;
+  }
+
+  // stylelint-disable-next-line selector-max-compound-selectors
+  .language-javascript
+    .token.template-string
+    > .token.interpolation
+    > .token.interpolation-punctuation.punctuation {
+    color: #ca1243;
+  }
+
+  /* JSON overrides */
+  .language-json .token.operator {
+    color: #383a42;
+  }
+
+  .language-json .token.null.keyword {
+    color: #b76b01;
+  }
+
+  /* MD overrides */
+  .language-markdown .token.url,
+  .language-markdown .token.url > .token.operator,
+  .language-markdown .token.url-reference.url > .token.string {
+    color: #383a42;
+  }
+
+  .language-markdown .token.url > .token.content {
+    color: #4078f2;
+  }
+
+  .language-markdown .token.url > .token.url,
+  .language-markdown .token.url-reference.url {
+    color: #0184bc;
+  }
+
+  .language-markdown .token.blockquote.punctuation,
+  .language-markdown .token.hr.punctuation {
+    color: #a0a1a7;
+    font-style: italic;
+  }
+
+  .language-markdown .token.code-snippet {
+    color: #50a14f;
+  }
+
+  .language-markdown .token.bold .token.content {
+    color: #b76b01;
+  }
+
+  .language-markdown .token.italic .token.content {
+    color: #a626a4;
+  }
+
+  .language-markdown .token.strike .token.content,
+  .language-markdown .token.strike .token.punctuation,
+  .language-markdown .token.list.punctuation,
+  .language-markdown .token.title.important > .token.punctuation {
+    color: #e45649;
+  }
+
+  /* General */
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.comment,
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.namespace {
+    opacity: 0.8;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
new file mode 100644
index 0000000000..da432b3a49
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
@@ -0,0 +1,101 @@
+/**
+ * Pojoaque Style by Jason Tate
+ * http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
+ * Based on Solarized Style from http://ethanschoonover.com/solarized
+ * http://softwaremaniacs.org/media/soft/highlight/test.html
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-pojoaque.css
+ */
+
+@use '../mixins';
+
+$code-color: #dccf8f;
+$code-bg-color: #181914;
+
+@mixin style {
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #586e75;
+    font-style: italic;
+  }
+
+  .token.number,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #468966;
+  }
+
+  .token.attr-name {
+    color: #b89859;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: #dccf8f;
+  }
+
+  .token.selector,
+  .token.regex {
+    color: #859900;
+  }
+
+  .token.atrule,
+  .token.keyword {
+    color: #cb4b16;
+  }
+
+  .token.attr-value {
+    color: #468966;
+  }
+
+  .token.function,
+  .token.variable,
+  .token.placeholder {
+    color: #b58900;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: #b89859;
+  }
+
+  .token.tag {
+    color: #ffb03b;
+  }
+
+  .token.important,
+  .token.statement,
+  .token.deleted {
+    color: #dc322f;
+  }
+
+  .token.punctuation {
+    color: #dccf8f;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
new file mode 100644
index 0000000000..2feb55dfa5
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
@@ -0,0 +1,144 @@
+/**
+ * Shades of Purple Theme for Prism.js
+ *
+ * @author Ahmad Awais <https://twitter.com/MrAhmadAwais/>
+ * @support Follow/tweet at https://twitter.com/MrAhmadAwais/
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-shades-of-purple.css
+ */
+
+@use '../mixins';
+
+$code-color: #9efeff;
+$code-bg-color: #1e1e3f;
+
+@mixin style {
+  pre[class*='language-'] {
+    letter-spacing: 0.5px;
+    text-shadow: 0 1px #222245;
+
+    ::selection {
+      background: #a599e9;
+      color: inherit;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: #b362ff;
+  }
+
+  .token.delimiter,
+  .token.keyword,
+  .token.selector,
+  .token.important,
+  .token.atrule {
+    color: #ff9d00;
+  }
+
+  .token.operator,
+  .token.attr-name {
+    color: rgb(255 180 84);
+  }
+
+  .token.punctuation {
+    color: #fff;
+  }
+
+  .token.boolean {
+    color: rgb(255 98 140);
+  }
+
+  .token.tag,
+  .token.tag .punctuation,
+  .token.doctype,
+  .token.builtin {
+    color: rgb(255 157 0);
+  }
+
+  .token.entity,
+  .token.symbol {
+    color: #6897bb;
+  }
+
+  .token.number {
+    color: #ff628c;
+  }
+
+  .token.property,
+  .token.constant,
+  .token.variable {
+    color: #ff628c;
+  }
+
+  .token.string,
+  .token.char {
+    color: #a5ff90;
+  }
+
+  .token.attr-value,
+  .token.attr-value .punctuation {
+    color: #a5c261;
+  }
+
+  .token.attr-value .punctuation:first-child {
+    color: #a9b7c6;
+  }
+
+  .token.url {
+    color: #287bde;
+    text-decoration: underline;
+  }
+
+  .token.function {
+    color: rgb(250 208 0);
+  }
+
+  .token.regex {
+    background: #364135;
+  }
+
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.inserted {
+    background: #0f0;
+  }
+
+  .token.deleted {
+    background: #ff000d;
+  }
+
+  .language-css .token.property,
+  .language-css .token.property + .token.punctuation {
+    color: #a9b7c6;
+  }
+
+  .language-css .token.id {
+    color: #ffc66d;
+  }
+
+  .language-css .token.selector > .token.class,
+  .language-css .token.selector > .token.attribute,
+  .language-css .token.selector > .token.pseudo-class,
+  .language-css .token.selector > .token.pseudo-element {
+    color: #ffc66d;
+  }
+
+  .token.class-name {
+    color: #fb94ff;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    background: none;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
new file mode 100644
index 0000000000..bb23d6ed71
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
@@ -0,0 +1,119 @@
+/**
+ * Solarized dark atom theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Pranay Chauhan (@PranayChauhan2516)
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-solarized-dark-atom.css
+ */
+
+@use '../mixins';
+
+$code-color: #839496;
+$code-bg-color: #002b36;
+
+@mixin style {
+  pre[class*='language-'] {
+    text-shadow: 0 1px rgb(0 0 0 / 30%);
+
+    /* Print */
+    @media print {
+      text-shadow: none;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #586e75;
+  }
+
+  .token.punctuation {
+    color: #93a1a1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.keyword,
+  .token.tag {
+    color: #268bd2;
+  }
+
+  .token.class-name {
+    color: #ffffb6;
+    text-decoration: underline;
+  }
+
+  .token.boolean,
+  .token.constant {
+    color: #b58900;
+  }
+
+  .token.symbol,
+  .token.deleted {
+    color: #dc322f;
+  }
+
+  .token.number {
+    color: #859900;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #859900;
+  }
+
+  .token.variable {
+    color: #268bd2;
+  }
+
+  .token.operator {
+    color: #ededed;
+  }
+
+  .token.function {
+    color: #268bd2;
+  }
+
+  .token.regex {
+    color: #e9c062;
+  }
+
+  .token.important {
+    color: #fd971f;
+  }
+
+  .token.entity {
+    color: #ffffb6;
+    cursor: help;
+  }
+
+  .token.url {
+    color: #96cbfe;
+  }
+
+  .language-css .token.string,
+  .style .token.string {
+    color: #87c38a;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.atrule,
+  .token.attr-value {
+    color: #f9ee98;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
new file mode 100644
index 0000000000..a811fb3cd8
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
@@ -0,0 +1,87 @@
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+@use '../mixins';
+
+$code-color: #ccc;
+$code-bg-color: #2d2d2d;
+
+@mixin style {
+  .token.comment,
+  .token.block-comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #999;
+  }
+
+  .token.punctuation {
+    color: #ccc;
+  }
+
+  .token.tag,
+  .token.attr-name,
+  .token.namespace,
+  .token.deleted {
+    color: #e2777a;
+  }
+
+  .token.function-name {
+    color: #6196cc;
+  }
+
+  .token.boolean,
+  .token.number,
+  .token.function {
+    color: #f08d49;
+  }
+
+  .token.property,
+  .token.class-name,
+  .token.constant,
+  .token.symbol {
+    color: #f8c555;
+  }
+
+  .token.selector,
+  .token.important,
+  .token.atrule,
+  .token.keyword,
+  .token.builtin {
+    color: #cc99cd;
+  }
+
+  .token.string,
+  .token.char,
+  .token.attr-value,
+  .token.regex,
+  .token.variable {
+    color: #7ec699;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url {
+    color: #67cdcc;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.inserted {
+    color: #008000;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
new file mode 100644
index 0000000000..4c614496b5
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
@@ -0,0 +1,130 @@
+/**
+ * VS theme by Andrew Lock (https://andrewlock.net)
+ * Inspired by Visual Studio syntax coloring
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
+ */
+
+@use '../mixins';
+
+$code-color: #393a34;
+$code-bg-color: #fff;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #c1def1;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #008000;
+    font-style: italic;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.string {
+    color: #a31515;
+  }
+
+  .token.punctuation,
+  .token.operator {
+    color: #393a34; /* no highlight */
+  }
+
+  .token.url,
+  .token.symbol,
+  .token.number,
+  .token.boolean,
+  .token.variable,
+  .token.constant,
+  .token.inserted {
+    color: #36acaa;
+  }
+
+  .token.atrule,
+  .token.keyword,
+  .token.attr-value {
+    color: #00f;
+  }
+
+  .token.function {
+    color: #393a34;
+  }
+
+  .token.deleted {
+    color: #9a050f;
+  }
+
+  .token.selector {
+    color: #00009f;
+  }
+
+  .token.important {
+    color: #e90;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.class-name {
+    color: #2b91af;
+  }
+
+  .token.tag,
+  .token.selector {
+    color: #800000;
+  }
+
+  .token.attr-name,
+  .token.property,
+  .token.regex,
+  .token.entity {
+    color: #f00;
+  }
+
+  .token.directive.tag .tag {
+    background: #ff0;
+    color: #393a34;
+  }
+
+  code[class*='language-css'] {
+    color: #00f;
+  }
+
+  .language-autohotkey {
+    .token.tag {
+      color: #9a050f;
+    }
+
+    .token.keyword {
+      color: #00009f;
+    }
+
+    .token.selector {
+      color: #00f;
+    }
+  }
+
+  .language-json {
+    .token.boolean,
+    .token.number {
+      color: #00f;
+    }
+
+    .token.property {
+      color: #2b91af;
+    }
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
new file mode 100644
index 0000000000..2e0357d139
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
@@ -0,0 +1,221 @@
+/*
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css
+ */
+
+@use '../mixins';
+
+$code-color: #d4d4d4;
+$code-bg-color: #1e1e1e;
+
+@mixin style {
+  pre[class*='language-'] {
+    ::selection {
+      background: #264f78;
+    }
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.doctype {
+    .token.doctype-tag {
+      color: #569cd6;
+    }
+
+    .token.name {
+      color: #9cdcfe;
+    }
+  }
+
+  .token.comment,
+  .token.prolog {
+    color: #6a9955;
+  }
+
+  .token.punctuation {
+    &,
+    .language-html .language-css &,
+    .language-html .language-javascript & {
+      color: #d4d4d4;
+    }
+
+    &.interpolation-punctuation {
+      color: #569cd6;
+    }
+  }
+
+  .token.number,
+  .token.symbol,
+  .token.inserted,
+  .token.unit {
+    color: #b5cea8;
+  }
+
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.deleted {
+    color: #ce9178;
+  }
+
+  .token.operator {
+    color: #d4d4d4;
+
+    &.arrow {
+      color: #569cd6;
+    }
+  }
+
+  .token.atrule {
+    color: #ce9178;
+
+    .token.rule {
+      color: #c586c0;
+    }
+
+    .token.url {
+      color: #9cdcfe;
+
+      .token.function {
+        color: #dcdcaa;
+      }
+
+      .token.punctuation {
+        color: #d4d4d4;
+      }
+    }
+  }
+
+  .token.keyword {
+    color: #569cd6;
+
+    &.module,
+    &.control-flow {
+      color: #c586c0;
+    }
+  }
+
+  .token.function,
+  .token.function .token.maybe-class-name {
+    color: #dcdcaa;
+  }
+
+  .token.regex {
+    color: #d16969;
+  }
+
+  .token.important {
+    color: #569cd6;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.constant {
+    color: #9cdcfe;
+  }
+
+  .token.class-name,
+  .token.maybe-class-name {
+    color: #4ec9b0;
+  }
+
+  .token.console {
+    color: #9cdcfe;
+  }
+
+  .token.parameter {
+    color: #9cdcfe;
+  }
+
+  .token.interpolation {
+    color: #9cdcfe;
+  }
+
+  .token.boolean {
+    color: #569cd6;
+  }
+
+  .token.property,
+  .token.variable,
+  .token.imports .token.maybe-class-name,
+  .token.exports .token.maybe-class-name {
+    color: #9cdcfe;
+  }
+
+  .token.selector {
+    color: #d7ba7d;
+  }
+
+  .token.escape {
+    color: #d7ba7d;
+  }
+
+  .token.tag {
+    color: #569cd6;
+
+    .token.punctuation {
+      color: #808080;
+    }
+  }
+
+  .token.cdata {
+    color: #808080;
+  }
+
+  .token.attr-name {
+    color: #9cdcfe;
+  }
+
+  .token.attr-value,
+  .token.attr-value .token.punctuation {
+    color: #ce9178;
+  }
+
+  .token.attr-value .token.punctuation.attr-equals {
+    color: #d4d4d4;
+  }
+
+  .token.entity {
+    color: #569cd6;
+  }
+
+  .token.namespace {
+    color: #4ec9b0;
+  }
+
+  pre[class*='language-javascript'],
+  code[class*='language-javascript'],
+  pre[class*='language-jsx'],
+  code[class*='language-jsx'],
+  pre[class*='language-typescript'],
+  code[class*='language-typescript'],
+  pre[class*='language-tsx'],
+  code[class*='language-tsx'] {
+    color: #9cdcfe;
+  }
+
+  pre[class*='language-css'],
+  code[class*='language-css'] {
+    color: #ce9178;
+  }
+
+  pre[class*='language-html'],
+  code[class*='language-html'] {
+    color: #d4d4d4;
+  }
+
+  .language-regex .token.anchor {
+    color: #dcdcaa;
+  }
+
+  .language-html .token.punctuation {
+    color: #808080;
+  }
+
+  .language-css .token.string.url {
+    text-decoration: underline;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
new file mode 100644
index 0000000000..dcf276fc6c
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
@@ -0,0 +1,119 @@
+/**
+ * xonokai theme for JavaScript, CSS and HTML
+ * based on: https://github.com/MoOx/sass-prism-theme-base by Maxime Thirouin ~ MoOx --> http://moox.fr/ , which is Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * license: MIT; http://moox.mit-license.org/
+ * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-forest.css
+ */
+
+@use '../mixins';
+
+$code-color: #76d9e6;
+$code-bg-color: #2a2a2a;
+
+@mixin style {
+  pre[class*='language-'] {
+    box-shadow: 1px 1px 0.3em -0.1em #000 inset;
+
+    // tab size
+    tab-size: 2;
+
+    ::selection {
+      background: #435643;
+    }
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #6f705e;
+  }
+
+  .token.operator,
+  .token.boolean,
+  .token.number {
+    color: #a77afe;
+  }
+
+  .token.attr-name,
+  .token.string {
+    color: #e6d06c;
+  }
+
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: #e6d06c;
+  }
+
+  .token.selector,
+  .token.inserted {
+    color: #a6e22d;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword,
+  .token.important,
+  .token.deleted {
+    color: #ef3b7d;
+  }
+
+  .token.regex,
+  .token.statement {
+    color: #76d9e6;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #fff;
+  }
+
+  .token.important,
+  .token.statement,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.punctuation {
+    color: #bebec5;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .language-markup {
+    color: #f9f9f9;
+  }
+
+  .language-markup .token.tag {
+    color: #ef3b7d;
+  }
+
+  .language-markup .token.attr-name {
+    color: #a6e22d;
+  }
+
+  .language-markup .token.attr-value {
+    color: #e6d06c;
+  }
+
+  .language-markup .token.style,
+  .language-markup .token.script {
+    color: #76d9e6;
+  }
+
+  .language-markup .token.script .token.keyword {
+    color: #76d9e6;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
new file mode 100644
index 0000000000..a58394a262
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
@@ -0,0 +1,114 @@
+/*
+ * Z-Touch
+ * by Zeel Codder
+ * https://github.com/zeel-codder
+ * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-solarized-dark-atom.css
+ */
+
+@use '../mixins';
+
+$code-color: #fff;
+$code-bg-color: #0a143c;
+
+@mixin style {
+  pre[class*='language-'] {
+    text-shadow: 0 1px rgb(0 0 0 / 30%);
+
+    /* Print */
+    @media print {
+      text-shadow: none;
+    }
+
+    ::selection {
+      background: rgb(29 59 83 / 99%);
+      text-shadow: none;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: #637777;
+    font-style: italic;
+  }
+
+  .token.punctuation {
+    color: #c792ea;
+  }
+
+  .namespace {
+    color: #b2ccd6;
+  }
+
+  .token.deleted {
+    color: rgb(239 83 80 / 56%);
+    font-style: italic;
+  }
+
+  .token.symbol,
+  .token.property {
+    color: #80cbc4;
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.keyword {
+    color: #7fdbca;
+  }
+
+  .token.boolean {
+    color: #ff5874;
+  }
+
+  .token.number {
+    color: #f78c6c;
+  }
+
+  .token.constant,
+  .token.function,
+  .token.builtin,
+  .token.char {
+    color: #22b7c7;
+  }
+
+  .token.selector,
+  .token.doctype {
+    color: #c792ea;
+    font-style: italic;
+  }
+
+  .token.attr-name,
+  .token.inserted {
+    color: #addb67;
+    font-style: italic;
+  }
+
+  .token.string,
+  .token.url,
+  .token.entity,
+  .language-css .token.string,
+  .style .token.string {
+    color: #addb67;
+  }
+
+  .token.class-name,
+  .token.atrule,
+  .token.attr-value {
+    color: #ffcb8b;
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: #d6deeb;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+}
diff --git a/plugins/markdown/plugin-prismjs/src/node/getTheme.ts b/plugins/markdown/plugin-prismjs/src/node/getTheme.ts
new file mode 100644
index 0000000000..463815a4ab
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/node/getTheme.ts
@@ -0,0 +1,58 @@
+import type { PrismjsPluginOptions, PrismjsTheme } from './options.js'
+
+const PRISMJS_THEMES: PrismjsTheme[] = [
+  'ateliersulphurpool-light',
+  'coldark-cold',
+  'coy',
+  'duotone-light',
+  'ghcolors',
+  'gruvbox-light',
+  'material-light',
+  'one-light',
+  'vs',
+  'atom-dark',
+  'cb',
+  'coldark-dark',
+  'dark',
+  'dracula',
+  'duotone-dark',
+  'duotone-earth',
+  'duotone-forest',
+  'duotone-sea',
+  'duotone-space',
+  'gruvbox-dark',
+  'holi',
+  'hopscotch',
+  'lucario',
+  'material-dark',
+  'material-oceanic',
+  'night-owl',
+  'nord',
+  'one-dark',
+  'pojoaque',
+  'shades-of-purple',
+  'solarized-dark-atom',
+  'tomorrow',
+  'vsc-dark-plus',
+  'xonokai',
+  'z-touch',
+]
+
+const isValidTheme = (theme?: string): theme is PrismjsTheme =>
+  // @ts-expect-error: Actual assertion here
+  PRISMJS_THEMES.includes(theme)
+
+export const getTheme = (
+  options: PrismjsPluginOptions,
+): { light: PrismjsTheme; dark: PrismjsTheme } => ({
+  light: isValidTheme(options.themes?.light)
+    ? options.themes?.light
+    : isValidTheme(options.theme)
+      ? options.theme
+      : 'nord',
+  dark: isValidTheme(options.themes?.dark)
+    ? options.themes?.dark
+    : isValidTheme(options.theme)
+      ? options.theme
+      : 'nord',
+})
diff --git a/plugins/markdown/plugin-prismjs/src/node/index.ts b/plugins/markdown/plugin-prismjs/src/node/index.ts
index be9b98d491..8145d1f16e 100644
--- a/plugins/markdown/plugin-prismjs/src/node/index.ts
+++ b/plugins/markdown/plugin-prismjs/src/node/index.ts
@@ -1,6 +1,7 @@
 import { prismjsPlugin } from './prismjsPlugin.js'
 
 export * from './loadLanguages.js'
+export * from './options.js'
 export * from './prismjsPlugin.js'
 export * from './resolveHighlighter.js'
 export * from './markdown/index.js'
diff --git a/plugins/markdown/plugin-prismjs/src/node/options.ts b/plugins/markdown/plugin-prismjs/src/node/options.ts
new file mode 100644
index 0000000000..cf1f5d05b9
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/node/options.ts
@@ -0,0 +1,76 @@
+import type { MarkdownItLineNumbersOptions } from '@vuepress/highlighter-helper'
+import type { HighlightOptions, PreWrapperOptions } from './types.js'
+
+export type PrismjsLightTheme =
+  | 'ateliersulphurpool-light'
+  | 'coldark-cold'
+  | 'coy'
+  | 'duotone-light'
+  | 'ghcolors'
+  | 'gruvbox-light'
+  | 'material-light'
+  | 'one-light'
+  | 'vs'
+
+export type PrismjsDarkTheme =
+  | 'atom-dark'
+  | 'cb'
+  | 'coldark-dark'
+  | 'dark'
+  | 'dracula'
+  | 'duotone-dark'
+  | 'duotone-earth'
+  | 'duotone-forest'
+  | 'duotone-sea'
+  | 'duotone-space'
+  | 'gruvbox-dark'
+  | 'holi'
+  | 'hopscotch'
+  | 'lucario'
+  | 'material-dark'
+  | 'material-oceanic'
+  | 'night-owl'
+  | 'nord'
+  | 'one-dark'
+  | 'pojoaque'
+  | 'shades-of-purple'
+  | 'solarized-dark-atom'
+  | 'tomorrow'
+  | 'vsc-dark-plus'
+  | 'xonokai'
+  | 'z-touch'
+
+export type PrismjsTheme = PrismjsDarkTheme | PrismjsLightTheme
+
+/**
+ * Options of @vuepress/plugin-prismjs
+ */
+export interface PrismjsPluginOptions
+  extends Pick<MarkdownItLineNumbersOptions, 'lineNumbers'>,
+    PreWrapperOptions,
+    HighlightOptions {
+  /**
+   * Single theme
+   *
+   * @default 'nord'
+   */
+  theme?: PrismjsTheme
+
+  /**
+   * Dual themes
+   */
+  themes?: {
+    light: PrismjsTheme
+    dark: PrismjsTheme
+  }
+
+  /**
+   * Languages to preload
+   *
+   * Workaround for prismjs language reloading issue
+   *
+   * @default ['markdown', 'jsdoc', 'yaml']
+   * @see https://github.com/PrismJS/prism/issues/2716
+   */
+  preloadLanguages?: string[]
+}
diff --git a/plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts b/plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts
new file mode 100644
index 0000000000..c057c52dcb
--- /dev/null
+++ b/plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts
@@ -0,0 +1,62 @@
+import { getRealPath } from '@vuepress/helper'
+import type { App } from 'vuepress'
+import { getTheme } from './getTheme.js'
+import type { PrismjsPluginOptions } from './options.js'
+
+const { url } = import.meta
+
+export const prepareConfigFile = (
+  app: App,
+  options: PrismjsPluginOptions,
+): Promise<string> => {
+  const { light, dark } = getTheme(options)
+
+  const imports: string[] = [
+    `import "${getRealPath('@vuepress/highlighter-helper/styles/base.css', url)}"`,
+    `import "${getRealPath(`@vuepress/plugin-prismjs/styles/${light}.css`, url)}"`,
+  ]
+
+  if (light !== dark) {
+    imports.push(
+      `import "${getRealPath(`@vuepress/plugin-prismjs/styles/${dark}.dark.css`, url)}"`,
+    )
+  }
+
+  if (options.notationDiff) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-diff.css', url)}"`,
+    )
+  }
+
+  if (options.notationErrorLevel) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-error-level.css', url)}"`,
+    )
+  }
+
+  if (options.notationFocus) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-focus.css', url)}"`,
+    )
+  }
+
+  if (options.notationHighlight) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-highlight.css', url)}"`,
+    )
+  }
+
+  if (options.notationWordHighlight) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-word-highlight.css', url)}"`,
+    )
+  }
+
+  if (options.whitespace) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/whitespace.css', url)}"`,
+    )
+  }
+
+  return app.writeTemp('prismjs/config.js', imports.join('\n'))
+}
diff --git a/plugins/markdown/plugin-prismjs/src/node/prismjsPlugin.ts b/plugins/markdown/plugin-prismjs/src/node/prismjsPlugin.ts
index 600fead7db..8e84b9da80 100644
--- a/plugins/markdown/plugin-prismjs/src/node/prismjsPlugin.ts
+++ b/plugins/markdown/plugin-prismjs/src/node/prismjsPlugin.ts
@@ -1,29 +1,12 @@
 import { lineNumbers as lineNumbersPlugin } from '@vuepress/highlighter-helper'
-import type { MarkdownItLineNumbersOptions } from '@vuepress/highlighter-helper'
 import type { Plugin } from 'vuepress/core'
 import { loadLanguages } from './loadLanguages.js'
 import { highlightPlugin, preWrapperPlugin } from './markdown/index.js'
+import type { PrismjsPluginOptions } from './options.js'
+import { prepareConfigFile } from './prepareConfigFile.js'
 import { resolveHighlighter } from './resolveHighlighter.js'
 import type { HighlightOptions, PreWrapperOptions } from './types.js'
 
-/**
- * Options of @vuepress/plugin-prismjs
- */
-export interface PrismjsPluginOptions
-  extends Pick<MarkdownItLineNumbersOptions, 'lineNumbers'>,
-    PreWrapperOptions,
-    HighlightOptions {
-  /**
-   * Languages to preload
-   *
-   * Workaround for prismjs language reloading issue
-   *
-   * @default ['markdown', 'jsdoc', 'yaml']
-   * @see https://github.com/PrismJS/prism/issues/2716
-   */
-  preloadLanguages?: string[]
-}
-
 export const prismjsPlugin = ({
   preloadLanguages = ['markdown', 'jsdoc', 'yaml'],
   preWrapper = true,
@@ -48,4 +31,6 @@ export const prismjsPlugin = ({
       md.use(lineNumbersPlugin, { lineNumbers, removeLastLine: true })
     }
   },
+
+  clientConfigFile: (app) => prepareConfigFile(app, options),
 })
diff --git a/plugins/markdown/plugin-prismjs/tsconfig.build.json b/plugins/markdown/plugin-prismjs/tsconfig.build.json
index 5c74848ae5..a99fd7b273 100644
--- a/plugins/markdown/plugin-prismjs/tsconfig.build.json
+++ b/plugins/markdown/plugin-prismjs/tsconfig.build.json
@@ -6,6 +6,7 @@
   },
   "include": ["./src"],
   "references": [
-    { "path": "../../../tools/highlighter-helper/tsconfig.build.json" }
+    { "path": "../../../tools/highlighter-helper/tsconfig.build.json" },
+    { "path": "../../../tools/helper/tsconfig.build.json" }
   ]
 }
diff --git a/plugins/markdown/plugin-shiki/package.json b/plugins/markdown/plugin-shiki/package.json
index a7676d0b06..4e3ab8c312 100644
--- a/plugins/markdown/plugin-shiki/package.json
+++ b/plugins/markdown/plugin-shiki/package.json
@@ -23,6 +23,7 @@
   "type": "module",
   "exports": {
     ".": "./lib/node/index.js",
+    "./styles/*": "./lib/client/styles/*",
     "./package.json": "./package.json"
   },
   "main": "./lib/node/index.js",
@@ -32,7 +33,8 @@
   ],
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
-    "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
+    "style": "sass src:lib --no-source-map"
   },
   "dependencies": {
     "@shikijs/transformers": "^1.10.3",
diff --git a/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss b/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
new file mode 100644
index 0000000000..6b07f352ab
--- /dev/null
+++ b/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
@@ -0,0 +1,24 @@
+:root {
+  // base color
+  --code-color: #9e9e9e;
+  --code-bg-color: #282c34;
+
+  // highlight
+  --code-highlight-bg-color: rgb(0 0 0 / 66%);
+}
+
+.shiki span {
+  color: var(--shiki-light, inherit);
+
+  #vp-dark & {
+    color: var(--shiki-dark, inherit);
+  }
+}
+
+div[data-highlighter='shiki'] {
+  background-color: var(--shiki-light-bg, var(--code-bg-color));
+
+  #vp-dark & {
+    background-color: var(--shiki-dark-bg, var(--code-bg-color));
+  }
+}
diff --git a/plugins/markdown/plugin-shiki/src/node/prepareConfigFile.ts b/plugins/markdown/plugin-shiki/src/node/prepareConfigFile.ts
new file mode 100644
index 0000000000..e8c7ac62aa
--- /dev/null
+++ b/plugins/markdown/plugin-shiki/src/node/prepareConfigFile.ts
@@ -0,0 +1,54 @@
+import { getRealPath } from '@vuepress/helper'
+import type { App } from 'vuepress'
+import type { ShikiPluginOptions } from './options.js'
+import { PLUGIN_NAME } from './utils.js'
+
+const { url } = import.meta
+
+export const prepareConfigFile = (
+  app: App,
+  options: ShikiPluginOptions,
+): Promise<string> => {
+  const imports: string[] = [
+    `import "${getRealPath('@vuepress/highlighter-helper/styles/base.css', url)}"`,
+    `import "${getRealPath(`${PLUGIN_NAME}/styles/shiki.css`, import.meta.url)}"`,
+  ]
+
+  if (options.notationDiff) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-diff.css', url)}"`,
+    )
+  }
+
+  if (options.notationErrorLevel) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-error-level.css', url)}"`,
+    )
+  }
+
+  if (options.notationFocus) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-focus.css', url)}"`,
+    )
+  }
+
+  if (options.notationHighlight) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-highlight.css', url)}"`,
+    )
+  }
+
+  if (options.notationWordHighlight) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/notation-word-highlight.css', url)}"`,
+    )
+  }
+
+  if (options.whitespace) {
+    imports.push(
+      `import "${getRealPath('@vuepress/highlighter-helper/styles/whitespace.css', url)}"`,
+    )
+  }
+
+  return app.writeTemp('shiki/config.js', imports.join('\n'))
+}
diff --git a/plugins/markdown/plugin-shiki/src/node/shikiPlugin.ts b/plugins/markdown/plugin-shiki/src/node/shikiPlugin.ts
index febeb3db26..76d1270e99 100644
--- a/plugins/markdown/plugin-shiki/src/node/shikiPlugin.ts
+++ b/plugins/markdown/plugin-shiki/src/node/shikiPlugin.ts
@@ -7,6 +7,7 @@ import {
   preWrapperPlugin,
 } from './markdown/index.js'
 import type { ShikiPluginOptions } from './options.js'
+import { prepareConfigFile } from './prepareConfigFile.js'
 
 export const shikiPlugin = ({
   preWrapper = true,
@@ -16,6 +17,7 @@ export const shikiPlugin = ({
   name: '@vuepress/plugin-shiki',
 
   extendsMarkdown: async (md, app) => {
+    // FIXME: Remove in stable version
     const { code } = app.options.markdown
 
     await applyHighlighter(md, app, {
@@ -29,4 +31,6 @@ export const shikiPlugin = ({
       md.use(lineNumbersPlugin, { lineNumbers })
     }
   },
+
+  clientConfigFile: (app) => prepareConfigFile(app, options),
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e818f4ec0b..d65421d6c8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -649,6 +649,9 @@ importers:
 
   plugins/markdown/plugin-prismjs:
     dependencies:
+      '@vuepress/helper':
+        specifier: workspace:*
+        version: link:../../../tools/helper
       '@vuepress/highlighter-helper':
         specifier: workspace:*
         version: link:../../../tools/highlighter-helper
diff --git a/themes/theme-default/src/client/composables/useDarkMode.ts b/themes/theme-default/src/client/composables/useDarkMode.ts
index d58ce414d1..7f1735fa09 100644
--- a/themes/theme-default/src/client/composables/useDarkMode.ts
+++ b/themes/theme-default/src/client/composables/useDarkMode.ts
@@ -9,6 +9,22 @@ export const darkModeSymbol: InjectionKey<DarkModeRef> = Symbol(
   __VUEPRESS_DEV__ ? 'darkMode' : '',
 )
 
+const applyDarkmodeToHTML = (isDarkMode: DarkModeRef): void => {
+  const update = (value = isDarkMode.value): void => {
+    // set `class="dark"` on `<html>` element
+    const el = window!.document.documentElement
+
+    el.classList.toggle('dark', value)
+    el.setAttribute('data-theme', value ? 'dark' : 'light')
+  }
+
+  onMounted(() => {
+    watch(isDarkMode, update, { immediate: true })
+  })
+
+  onUnmounted(() => update())
+}
+
 /**
  * Inject dark mode global computed
  */
@@ -54,19 +70,5 @@ export const setupDarkMode = (): void => {
   })
   provide(darkModeSymbol, isDarkMode)
 
-  updateHtmlDarkClass(isDarkMode)
-}
-
-export const updateHtmlDarkClass = (isDarkMode: DarkModeRef): void => {
-  const update = (value = isDarkMode.value): void => {
-    // set `class="dark"` on `<html>` element
-    const htmlEl = window?.document.querySelector('html')
-    htmlEl?.classList.toggle('dark', value)
-  }
-
-  onMounted(() => {
-    watch(isDarkMode, update, { immediate: true })
-  })
-
-  onUnmounted(() => update())
+  applyDarkmodeToHTML(isDarkMode)
 }
diff --git a/themes/theme-default/src/client/styles/content/code-notation.scss b/themes/theme-default/src/client/styles/content/code-notation.scss
deleted file mode 100644
index b31a556d02..0000000000
--- a/themes/theme-default/src/client/styles/content/code-notation.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-// ------------ code notation highlighting ------------
-// matches `<span class="line xxxx" ></span>`
-
-div[class*='language-'] {
-  // highlight lines and  notation highlight
-  // `!code highlight` and `!code hl` are the same:
-  // - `// [\!code highlight]`
-  // - `// [\!code hl]`
-  // - `// [\!code highlight:3]`
-  // - `// [\!code hl:3]`
-  // It also has the style of error level,
-  // covering the background color with 'warning' and 'error' classes.
-  // - `// [\!code warning]`
-  // - `// [\!code error]`
-  // - `// [\!code warning:3]`
-  // - `// [\!code error:3]`
-  .line.highlighted {
-    display: inline-block;
-
-    width: 100%;
-    margin: 0 -24px;
-    padding: 0 24px;
-
-    background-color: var(--code-highlight-bg-color);
-
-    transition: background-color 0.5s;
-
-    &.error {
-      background-color: var(--code-highlight-error-bg-color);
-    }
-
-    &.warning {
-      background-color: var(--code-highlight-warning-bg-color);
-    }
-  }
-
-  // notation diff line
-  // - class="diff add": `// [\!code ++]` or `// [\!code ++:3]`
-  // - class="diff remove":  `// [\!code --]` or `// [\!code --:3]`
-  .line.diff {
-    display: inline-block;
-
-    width: 100%;
-    margin: 0 -24px;
-    padding: 0 24px;
-
-    transition: background-color 0.5s;
-
-    &::before {
-      position: absolute;
-      left: 10px;
-    }
-
-    &.remove {
-      background-color: var(--code-line-diff-remove-color);
-      opacity: 0.7;
-
-      &::before {
-        content: '-';
-        color: var(--code-line-diff-remove-symbol-color);
-      }
-    }
-
-    &.add {
-      background-color: var(--code-line-diff-add-color);
-
-      &::before {
-        content: '+';
-        color: var(--code-line-diff-add-symbol-color);
-      }
-    }
-  }
-
-  &.line-numbers-mode .line.diff::before {
-    left: 4px;
-  }
-
-  // notation focused lines
-  // - `// [\!code focus]`
-  // - `// [\!code focus:3]`
-  .has-focused-lines .line:not(.has-focus) {
-    opacity: 0.7;
-    filter: blur(0.095rem);
-    transition:
-      filter 0.35s,
-      opacity 0.35s;
-  }
-
-  &:hover .has-focused-lines .line:not(.has-focus) {
-    opacity: 1;
-    filter: blur(0);
-  }
-
-  // notation word highlight
-  // - `// [\!code word:xxx]`
-  // - `// [\!code word:xxx:3]`
-  .highlighted-word {
-    margin: -1px -2px;
-    padding: 1px 2px;
-    border: solid 1px var(--code-word-highlight-border);
-    border-radius: 4px;
-
-    background-color: var(--code-word-highlight-bg-color);
-  }
-
-  // whitespace
-  .tab,
-  .space {
-    position: relative;
-  }
-
-  .tab::before,
-  .space::before {
-    position: absolute;
-    opacity: 0.3;
-  }
-
-  .tab::before {
-    content: '⇥';
-  }
-
-  .space::before {
-    content: '·';
-  }
-}
diff --git a/themes/theme-default/src/client/styles/content/code.scss b/themes/theme-default/src/client/styles/content/code.scss
index de33bc73d7..f2c1eaf2c8 100644
--- a/themes/theme-default/src/client/styles/content/code.scss
+++ b/themes/theme-default/src/client/styles/content/code.scss
@@ -1,247 +1,23 @@
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable scss/comment-no-empty */
 @import '../variables';
 
-// the original font-size is 14px, 1.7 will make line-height be 23.8px
-$line-height: 1.7;
-
-pre[class*='language-'] {
-  overflow: auto;
-
-  margin: 0.5em 0;
-
-  font-size: 1em;
-  font-family: var(--font-family-code);
-  line-height: 1.5;
-}
-
-// ===============================
-// Forked and modified from prismjs/themes/prism-tomorrow.css
-
-pre[class*='language-'] {
-  background: #2d2d2d;
-  color: #ccc;
-}
-
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #999;
-}
-
-.token.punctuation {
-  color: #ccc;
-}
-
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #ec5975;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #cc99cd;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #7ec699;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: #3eaf7c;
-}
-
-// ===============================
-
-.theme-default-content {
-  pre,
-  pre[class*='language-'] {
-    overflow: auto;
-    margin: 0.85rem 0;
-    border-radius: 6px;
-    line-height: $line-height;
-
-    code {
-      display: block;
-
-      box-sizing: border-box;
-      width: fit-content;
-      min-width: 100%;
-      padding: 1.3rem 1.5rem;
-      border-radius: 0;
-
-      background-color: transparent !important;
-      color: #fff;
-
-      overflow-wrap: unset;
-
-      -webkit-font-smoothing: auto;
-      -moz-osx-font-smoothing: auto;
-    }
-  }
-
-  .line-number {
-    font-family: var(--font-family-code);
-  }
-}
-
+// code block additional styles
 div[class*='language-'] {
-  position: relative;
-  border-radius: 6px;
-  background-color: var(--code-bg-color);
-
-  &::before {
-    content: attr(data-title);
-
-    position: absolute;
-    top: 0.8em;
-    right: 1em;
-    z-index: 3;
-
-    color: var(--code-line-number-color);
-
-    font-size: 0.75rem;
-  }
-
-  pre,
-  pre[class*='language-'] {
-    position: relative;
-    z-index: 1;
-
-    // force override the background color to be compatible with shiki
-    background: transparent !important;
-  }
-
-  &:not(.line-numbers-mode) {
-    .line-numbers {
-      display: none;
-    }
-  }
-
-  &.line-numbers-mode {
-    pre {
-      vertical-align: middle;
-      margin-left: var(--code-line-number-wrapper-width);
-    }
-
-    code {
-      padding-left: 1rem;
-    }
-
-    .line-numbers {
-      counter-reset: line-number;
-
-      position: absolute;
-      top: 0;
-
-      width: var(--code-line-number-wrapper-width);
-      padding-top: 1.3rem;
-
-      color: var(--code-line-number-color);
-
-      font-size: 0.875em;
-      line-height: $line-height;
-      text-align: center;
-
-      .line-number {
-        position: relative;
-        z-index: 3;
-        user-select: none;
-
-        /* stylelint-disable-next-line max-nesting-depth */
-        &::before {
-          content: counter(line-number);
-          counter-increment: line-number;
-        }
-      }
-    }
-
-    &::after {
-      content: '';
+  margin: 0.75rem 0;
+  transition:
+    background-color var(--t-color),
+    color var(--t-color);
 
-      position: absolute;
-      top: 0;
-      left: 0;
+  @media (max-width: $MQMobileNarrow) {
+    --code-border-radius: 0;
 
-      width: var(--code-line-number-wrapper-width);
-      height: 100%;
-      border-right: 1px solid var(--code-highlight-bg-color);
-      border-radius: 6px 0 0 6px;
-    }
-  }
-}
-
-// ------------ plugin-shiki code highlighting ------------
-div[data-highlighter='shiki'] {
-  background-color: var(--shiki-light-bg, var(--code-bg-color));
-  transition: background-color var(--t-color);
-
-  .dark & {
-    background-color: var(--shiki-dark-bg, var(--code-bg-color));
+    margin: 0.75rem -1.5rem;
   }
-}
-
-.shiki span {
-  color: var(--shiki-light, inherit);
-
-  .dark & {
-    color: var(--shiki-dark, inherit);
-  }
-}
 
-// narrow mobile
-@media (max-width: $MQMobileNarrow) {
-  .theme-default-content {
-    div[class*='language-'] {
-      margin: 0.85rem -1.5rem;
-      border-radius: 0;
+  // transitions for code notation highlighting
+  .line {
+    &.diff,
+    &.highlighted {
+      transition: background-color var(--t-color);
     }
   }
 }
diff --git a/themes/theme-default/src/client/styles/content/index.scss b/themes/theme-default/src/client/styles/content/index.scss
index 7837eabf81..b06391410d 100644
--- a/themes/theme-default/src/client/styles/content/index.scss
+++ b/themes/theme-default/src/client/styles/content/index.scss
@@ -1,5 +1,4 @@
 @use 'normalize';
 @use 'code';
-@use 'code-notation';
 @use 'custom-container';
 @use 'toc';
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index 5b0c256fca..d886b85e49 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -26,7 +26,7 @@ a {
 code {
   background-color: var(--c-bg-light);
   color: var(--c-text-lighter);
-  font-family: var(--font-family-code);
+  font-family: var(--code-font-family);
   transition: background-color var(--t-color);
 
   p a & {
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 3d4d7f0c99..98972e2388 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -52,9 +52,6 @@ html.dark {
   --c-badge-danger: var(--c-danger);
   --c-badge-danger-text: #401416;
 
-  // code blocks vars
-  --code-highlight-bg-color: #363b46;
-
   // plugin-docsearch
   /* stylelint-disable-next-line selector-class-pattern */
   .DocSearch {
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index f9165ad01b..c04318d880 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -72,24 +72,9 @@
   --t-color: 0.3s ease;
   --t-transform: 0.3s ease;
 
-  // code blocks vars
-  --code-bg-color: #282c34;
-  --code-highlight-bg-color: rgb(0 0 0 / 66%);
-  --code-highlight-error-bg-color: rgb(244 63 94 / 16%);
-  --code-highlight-warning-bg-color: rgb(255 193 7 / 16%);
-  --code-line-diff-remove-color: rgb(244 63 94 / 16%);
-  --code-line-diff-remove-symbol-color: #e0575b;
-  --code-line-diff-add-color: rgb(16 185 129 / 16%);
-  --code-line-diff-add-symbol-color: #298459;
-  --code-word-highlight-bg-color: rgb(0 0 0 / 20%);
-  --code-word-highlight-border: #636363;
-  --code-line-number-color: #9e9e9e;
-  --code-line-number-wrapper-width: 3.5rem;
-
   // font vars
   --font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', roboto, oxygen,
     ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  --font-family-code: consolas, monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
   // layout vars
   --navbar-height: 3.6rem;
diff --git a/themes/theme-default/templates/build.html b/themes/theme-default/templates/build.html
index 334179b2cf..bc7258faad 100644
--- a/themes/theme-default/templates/build.html
+++ b/themes/theme-default/templates/build.html
@@ -25,6 +25,7 @@
         window.matchMedia('(prefers-color-scheme: dark)').matches
       if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
         document.documentElement.classList.toggle('dark', true)
+        document.documentElement.setAttribute('data-theme', 'dark')
       }
     </script>
     <!--vuepress-ssr-head-->
diff --git a/tools/helper/src/client/styles/normalize.scss b/tools/helper/src/client/styles/normalize.scss
index 787a2a1e49..dbeef935f2 100644
--- a/tools/helper/src/client/styles/normalize.scss
+++ b/tools/helper/src/client/styles/normalize.scss
@@ -48,14 +48,16 @@ kbd {
 }
 
 code {
-  margin: 0;
-  padding: 3px 6px;
-  border-radius: 4px;
+  :not(pre) > & {
+    margin: 0;
+    padding: 3px 6px;
+    border-radius: 4px;
 
-  background: rgb(127 127 127 / 12%);
+    background: rgb(127 127 127 / 12%);
 
-  font-size: 0.875em;
-  overflow-wrap: break-word;
+    font-size: 0.875em;
+    overflow-wrap: break-word;
+  }
 
   table & {
     padding: 0.1rem 0.4rem;
diff --git a/tools/highlighter-helper/package.json b/tools/highlighter-helper/package.json
index f399699981..dc39683d34 100644
--- a/tools/highlighter-helper/package.json
+++ b/tools/highlighter-helper/package.json
@@ -25,6 +25,7 @@
   "type": "module",
   "exports": {
     ".": "./lib/node/index.js",
+    "./styles/*": "./lib/client/styles/*",
     "./package.json": "./package.json"
   },
   "main": "./lib/node/index.js",
diff --git a/tools/highlighter-helper/src/client/styles/base.scss b/tools/highlighter-helper/src/client/styles/base.scss
new file mode 100644
index 0000000000..021f57dccb
--- /dev/null
+++ b/tools/highlighter-helper/src/client/styles/base.scss
@@ -0,0 +1,60 @@
+:root {
+  // layout
+  --code-padding-x: 1.25rem;
+  --code-padding-y: 1rem;
+  --code-border-radius: 6px;
+  --code-line-height: 1.6;
+  --code-font-family: consolas, monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
+
+pre[class*='language-'] {
+  overflow-x: auto;
+
+  margin: 0.75em 0;
+  border-radius: var(--code-border-radius);
+
+  font-size: 1em;
+  font-family: var(--code-font-family);
+  line-height: var(--code-line-height);
+
+  code {
+    display: block;
+
+    box-sizing: border-box;
+    width: fit-content;
+    min-width: 100%;
+    padding: var(--code-padding-y) var(--code-padding-x);
+
+    background-color: transparent !important;
+
+    overflow-wrap: unset;
+
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
+div[class*='language-'] {
+  position: relative;
+  border-radius: var(--code-border-radius);
+  background-color: var(--code-bg-color);
+
+  &::before {
+    content: attr(data-title);
+
+    position: absolute;
+    top: 0.8em;
+    right: 1em;
+    z-index: 3;
+
+    color: var(--code-color);
+
+    font-size: 0.75rem;
+  }
+
+  pre,
+  pre[class*='language-'] {
+    position: relative;
+    z-index: 1;
+  }
+}
diff --git a/tools/highlighter-helper/src/client/styles/line-number.scss b/tools/highlighter-helper/src/client/styles/line-number.scss
new file mode 100644
index 0000000000..d712c95a02
--- /dev/null
+++ b/tools/highlighter-helper/src/client/styles/line-number.scss
@@ -0,0 +1,64 @@
+:root {
+  // line number
+  --code-line-number-width: 3.5rem;
+}
+
+div[class*='language-'] {
+  &:not(.line-numbers-mode) {
+    .line-numbers {
+      display: none;
+    }
+  }
+
+  &.line-numbers-mode {
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: var(--code-line-number-width);
+      height: 100%;
+      border-right: 1px solid var(--code-highlight-bg-color);
+      border-radius: var(--code-border-radius) 0 0 var(--code-border-radius);
+    }
+
+    pre {
+      vertical-align: middle;
+      margin-left: var(--code-line-number-width);
+    }
+
+    code {
+      padding-left: 1rem;
+    }
+
+    .line-numbers {
+      counter-reset: line-number;
+
+      position: absolute;
+      top: 0;
+
+      width: var(--code-line-number-width);
+      padding-top: var(--code-padding-y);
+
+      color: var(--code-line-number-color, --code-color);
+
+      font-size: 0.875em;
+      line-height: var(--code-line-height);
+      text-align: center;
+    }
+
+    .line-number {
+      position: relative;
+      z-index: 3;
+      font-family: var(--code-font-family);
+      user-select: none;
+
+      &::before {
+        content: counter(line-number);
+        counter-increment: line-number;
+      }
+    }
+  }
+}
diff --git a/tools/highlighter-helper/src/client/styles/notation-diff.scss b/tools/highlighter-helper/src/client/styles/notation-diff.scss
new file mode 100644
index 0000000000..b602063680
--- /dev/null
+++ b/tools/highlighter-helper/src/client/styles/notation-diff.scss
@@ -0,0 +1,46 @@
+:root {
+  --code-diff-remove-color: rgb(244 63 94 / 16%);
+  --code-diff-remove-symbol-color: #e0575b;
+  --code-diff-add-color: rgb(16 185 129 / 16%);
+  --code-diff-add-symbol-color: #298459;
+}
+
+// notation diff line
+// - class="diff add": `// [\!code ++]` or `// [\!code ++:3]`
+// - class="diff remove":  `// [\!code --]` or `// [\!code --:3]`
+div[class*='language-'] {
+  .line.diff {
+    display: inline-block;
+    width: 100%;
+    margin: 0 calc(-1 * var(--code-padding-x));
+    padding: 0 var(--code-padding-x);
+
+    &::before {
+      position: absolute;
+      left: 10px;
+    }
+
+    &.remove {
+      background-color: var(--code-diff-remove-color);
+      opacity: 0.7;
+
+      &::before {
+        content: '-';
+        color: var(--code-diff-remove-symbol-color);
+      }
+    }
+
+    &.add {
+      background-color: var(--code-diff-add-color);
+
+      &::before {
+        content: '+';
+        color: var(--code-diff-add-symbol-color);
+      }
+    }
+  }
+
+  &.line-numbers-mode .line.diff::before {
+    left: 4px;
+  }
+}
diff --git a/tools/highlighter-helper/src/client/styles/notation-error-level.scss b/tools/highlighter-helper/src/client/styles/notation-error-level.scss
new file mode 100644
index 0000000000..1d069962ab
--- /dev/null
+++ b/tools/highlighter-helper/src/client/styles/notation-error-level.scss
@@ -0,0 +1,16 @@
+@use 'notation-highlight';
+
+:root {
+  --code-hl-error-bg-color: rgb(244 63 94 / 16%);
+  --code-hl-warning-bg-color: rgb(255 193 7 / 16%);
+}
+
+div[class*='language-'] .line.highlighted {
+  &.error {
+    background-color: var(--code-hl-error-bg-color);
+  }
+
+  &.warning {
+    background-color: var(--code-hl-warning-bg-color);
+  }
+}
diff --git a/tools/highlighter-helper/src/client/styles/notation-focus.scss b/tools/highlighter-helper/src/client/styles/notation-focus.scss
new file mode 100644
index 0000000000..2f719751f2
--- /dev/null
+++ b/tools/highlighter-helper/src/client/styles/notation-focus.scss
@@ -0,0 +1,17 @@
+// notation focused lines
+// - `// [\!code focus]`
+// - `// [\!code focus:3]`
+div[class*='language-'] {
+  .has-focused-lines .line:not(.has-focus) {
+    opacity: 0.7;
+    filter: blur(0.095rem);
+    transition:
+      filter 0.35s,
+      opacity 0.35s;
+  }
+
+  &:hover .has-focused-lines .line:not(.has-focus) {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
diff --git a/tools/highlighter-helper/src/client/styles/notation-highlight.scss b/tools/highlighter-helper/src/client/styles/notation-highlight.scss
new file mode 100644
index 0000000000..97d671ad04
--- /dev/null
+++ b/tools/highlighter-helper/src/client/styles/notation-highlight.scss
@@ -0,0 +1,17 @@
+// ------------ code notation highlighting ------------
+// matches `<span class="line xxxx" ></span>`
+// highlight lines and notation highlight
+// `!code highlight` and `!code hl` are the same:
+// - `// [\!code highlight]`
+// - `// [\!code hl]`
+// - `// [\!code highlight:3]`
+// - `// [\!code hl:3]`
+div[class*='language-'] .line.highlighted {
+  display: inline-block;
+
+  width: 100%;
+  margin: 0 calc(-1 * var(--code-padding-x));
+  padding: 0 var(--code-padding-x);
+
+  background-color: var(--code-highlight-bg-color);
+}
diff --git a/tools/highlighter-helper/src/client/styles/notation-word-highlight.scss b/tools/highlighter-helper/src/client/styles/notation-word-highlight.scss
new file mode 100644
index 0000000000..f26da99597
--- /dev/null
+++ b/tools/highlighter-helper/src/client/styles/notation-word-highlight.scss
@@ -0,0 +1,18 @@
+:root {
+  --code-word-highlight-bg-color: rgb(0 0 0 / 20%);
+  --code-word-highlight-border: #636363;
+}
+
+div[class*='language-'] {
+  // notation word highlight
+  // - `// [\!code word:xxx]`
+  // - `// [\!code word:xxx:3]`
+  .highlighted-word {
+    margin: -1px -2px;
+    padding: 1px 2px;
+    border: solid 1px var(--code-word-highlight-border);
+    border-radius: 4px;
+
+    background-color: var(--code-word-highlight-bg-color);
+  }
+}
diff --git a/tools/highlighter-helper/src/client/styles/whitespace.scss b/tools/highlighter-helper/src/client/styles/whitespace.scss
new file mode 100644
index 0000000000..bc8737ab32
--- /dev/null
+++ b/tools/highlighter-helper/src/client/styles/whitespace.scss
@@ -0,0 +1,21 @@
+// render whitespace characters
+div[class*='language-'] {
+  .tab,
+  .space {
+    position: relative;
+  }
+
+  .tab::before,
+  .space::before {
+    position: absolute;
+    opacity: 0.3;
+  }
+
+  .tab::before {
+    content: '⇥';
+  }
+
+  .space::before {
+    content: '·';
+  }
+}

From d8448abe78fe82e1720ffde18efc9fb12f294900 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 07:06:04 +0800
Subject: [PATCH 07/63] fix: fix shiki style

---
 docs/.vuepress/config.ts                                   | 5 ++++-
 plugins/markdown/plugin-shiki/src/client/styles/shiki.scss | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 7669e9a94a..62e470ce72 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -105,7 +105,10 @@ export default defineUserConfig({
     isProd
       ? shikiPlugin({
           langs: ['bash', 'diff', 'json', 'md', 'ts', 'vue'],
-          theme: 'dark-plus',
+          themes: {
+            light: 'one-light',
+            dark: 'one-dark-pro',
+          },
           lineNumbers: 10,
           notationDiff: true,
           notationErrorLevel: true,
diff --git a/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss b/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
index 6b07f352ab..d7df95e726 100644
--- a/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
+++ b/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
@@ -10,7 +10,7 @@
 .shiki span {
   color: var(--shiki-light, inherit);
 
-  #vp-dark & {
+  [data-theme='dark'] & {
     color: var(--shiki-dark, inherit);
   }
 }
@@ -18,7 +18,7 @@
 div[data-highlighter='shiki'] {
   background-color: var(--shiki-light-bg, var(--code-bg-color));
 
-  #vp-dark & {
+  [data-theme='dark'] & {
     background-color: var(--shiki-dark-bg, var(--code-bg-color));
   }
 }

From 29e7d5108fcfde3cac717d181f2f9da7d64a1604 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 07:12:11 +0800
Subject: [PATCH 08/63] fix: fix styles for shiki

---
 .../themes/ateliersulphurpool-light.scss      |  2 +-
 .../src/client/styles/themes/cb.scss          |  2 +-
 .../client/styles/themes/coldark-cold.scss    |  2 +-
 .../client/styles/themes/coldark-dark.scss    |  2 +-
 .../src/client/styles/themes/coy.scss         |  2 +-
 .../src/client/styles/themes/dark.scss        |  2 +-
 .../src/client/styles/themes/dracula.scss     |  2 +-
 .../client/styles/themes/duotone-dark.scss    |  2 +-
 .../client/styles/themes/duotone-earth.scss   |  2 +-
 .../client/styles/themes/duotone-forest.scss  |  2 +-
 .../client/styles/themes/duotone-light.scss   |  2 +-
 .../src/client/styles/themes/duotone-sea.scss |  2 +-
 .../client/styles/themes/duotone-space.scss   |  2 +-
 .../src/client/styles/themes/ghcolors.scss    |  2 +-
 .../client/styles/themes/gruvbox-dark.scss    |  2 +-
 .../client/styles/themes/gruvbox-light.scss   |  2 +-
 .../src/client/styles/themes/holi.scss        |  2 +-
 .../src/client/styles/themes/lucario.scss     |  2 +-
 .../client/styles/themes/material-dark.scss   |  2 +-
 .../client/styles/themes/material-light.scss  |  2 +-
 .../styles/themes/material-oceanic.scss       |  2 +-
 .../src/client/styles/themes/night-owl.scss   |  2 +-
 .../src/client/styles/themes/one-dark.scss    |  2 +-
 .../src/client/styles/themes/one-light.scss   |  2 +-
 .../styles/themes/shades-of-purple.scss       |  2 +-
 .../styles/themes/solarized-dark-atom.scss    |  2 +-
 .../src/client/styles/themes/vs.scss          |  2 +-
 .../client/styles/themes/vsc-dark-plus.scss   |  2 +-
 .../src/client/styles/themes/xonokai.scss     |  2 +-
 .../src/client/styles/themes/z-touch.scss     |  2 +-
 .../src/client/styles/base.scss               | 55 +++++++++----------
 31 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
index 4a9942da74..0d5a40eef0 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
@@ -12,7 +12,7 @@ $code-color: #5e6687;
 $code-bg-color: #f5f7ff;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #dfe2f1;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
index bd6a7f8426..714d501bc4 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
@@ -16,7 +16,7 @@ $code-color: #fff;
 $code-bg-color: #222;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: rgb(29 59 83 / 99%);
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
index 12115b7ccb..5de0b25dd4 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
@@ -14,7 +14,7 @@ $code-color: #111b27;
 $code-bg-color: #e3eaf2;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #8da1b9;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
index e396af4ff7..cfaa46cd8b 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
@@ -14,7 +14,7 @@ $code-color: #e3eaf2;
 $code-bg-color: #111b27;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #3c526d;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
index 4e60ef6acd..3591b01223 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
@@ -10,7 +10,7 @@ $code-color: #000;
 $code-bg-color: #fdfdfd;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #b3d4fc;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
index 0b9ec473b3..9911e298c1 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
@@ -11,7 +11,7 @@ $code-color: #fff;
 $code-bg-color: #4d4033;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     text-shadow: 0 -0.1em 0.2em #000;
 
     @media print {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
index 18211a7385..cd11e6ea39 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
@@ -12,7 +12,7 @@ $code-color: #f8f8f2;
 $code-bg-color: #282a36;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     text-shadow: 0 1px rgb(0 0 0 / 30%);
 
     @media print {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
index 492a09f3fb..061d407275 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
@@ -12,7 +12,7 @@ $code-color: #9a86fd;
 $code-bg-color: #2a2734;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #6a51e6;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
index 02d7546703..2f76c9c6db 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
@@ -12,7 +12,7 @@ $code-color: #88786d;
 $code-bg-color: #322d29;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #6f5849;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
index 88e2340b4e..a0b6322de4 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
@@ -12,7 +12,7 @@ $code-color: #687d68;
 $code-bg-color: #2a2d2a;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #435643;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
index 5a065c316c..c0e6a58cdc 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
@@ -12,7 +12,7 @@ $code-color: #728fcb;
 $code-bg-color: #faf8f5;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #faf8f5;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
index 6eacb35fb6..ce45068f3d 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
@@ -12,7 +12,7 @@ $code-color: #57718e;
 $code-bg-color: #1d262f;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #004a9e;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
index 9c9ce6dff5..e0c6078c84 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
@@ -12,7 +12,7 @@ $code-color: #767693;
 $code-bg-color: #24242e;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #5151e6;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
index 64c34370e8..89c54294f6 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
@@ -10,7 +10,7 @@ $code-color: #393a34;
 $code-bg-color: #f8f8f8;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #b3d4fc;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
index c61d341199..6e0582dda8 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
@@ -15,7 +15,7 @@ $code-color: #ebdbb2;
 $code-bg-color: #1d2021;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #7c6f64;
       color: #fbf1c7;
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
index c5aa28e302..c5aedb407d 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
@@ -15,7 +15,7 @@ $code-color: #3c3836;
 $code-bg-color: #f9f5d7;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #a89984;
       color: #282828;
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
index e0f1db7379..0b2f978996 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
@@ -12,7 +12,7 @@ $code-color: #d6e7ff;
 $code-bg-color: #2a4555;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #1d3b54;
       color: inherit;
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
index 92de0827a4..0fa667d2c0 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
@@ -12,7 +12,7 @@ $code-color: #f8f8f2;
 $code-bg-color: #263e52;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     text-shadow: 0 1px rgb(0 0 0 / 30%);
   }
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
index a83d1ac644..ee8b87207c 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
@@ -8,7 +8,7 @@ $code-color: #eee;
 $code-bg-color: #2f2f2f;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #363636;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
index b53e09d5c5..ded003de24 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
@@ -8,7 +8,7 @@ $code-color: #90a4ae;
 $code-bg-color: #fafafa;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #cceae7;
       color: #263238;
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
index 788fbf14f0..88346d8cad 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
@@ -8,7 +8,7 @@ $code-color: #c3cee3;
 $code-bg-color: #263238;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #363636;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
index 289f29cd2c..8cf4509ebf 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
@@ -13,7 +13,7 @@ $code-color: #fff;
 $code-bg-color: #011627;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: rgb(29 59 83 / 99%);
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
index afbff4ddf0..485813d49a 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
@@ -10,7 +10,7 @@ $code-color: #abb2bf;
 $code-bg-color: #282c34;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     text-shadow: 0 1px rgb(0 0 0 / 30%);
 
     // tab size
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
index 4cccb4c6ab..34915ab195 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
@@ -10,7 +10,7 @@ $code-color: #383a42;
 $code-bg-color: #ecf4fa;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     // tab size
     tab-size: 2;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
index 2feb55dfa5..686f86ba33 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
@@ -12,7 +12,7 @@ $code-color: #9efeff;
 $code-bg-color: #1e1e3f;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     letter-spacing: 0.5px;
     text-shadow: 0 1px #222245;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
index bb23d6ed71..c10b79cb43 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
@@ -11,7 +11,7 @@ $code-color: #839496;
 $code-bg-color: #002b36;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     text-shadow: 0 1px rgb(0 0 0 / 30%);
 
     /* Print */
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
index 4c614496b5..d9a7643778 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
@@ -10,7 +10,7 @@ $code-color: #393a34;
 $code-bg-color: #fff;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #c1def1;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
index 2e0357d139..3453ce605c 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
@@ -8,7 +8,7 @@ $code-color: #d4d4d4;
 $code-bg-color: #1e1e1e;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     ::selection {
       background: #264f78;
     }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
index dcf276fc6c..f72da1d4d2 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
@@ -11,7 +11,7 @@ $code-color: #76d9e6;
 $code-bg-color: #2a2a2a;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     box-shadow: 1px 1px 0.3em -0.1em #000 inset;
 
     // tab size
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
index a58394a262..4944b1c511 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
@@ -11,7 +11,7 @@ $code-color: #fff;
 $code-bg-color: #0a143c;
 
 @mixin style {
-  pre[class*='language-'] {
+  div[class*='language-'] pre {
     text-shadow: 0 1px rgb(0 0 0 / 30%);
 
     /* Print */
diff --git a/tools/highlighter-helper/src/client/styles/base.scss b/tools/highlighter-helper/src/client/styles/base.scss
index 021f57dccb..4d51304e00 100644
--- a/tools/highlighter-helper/src/client/styles/base.scss
+++ b/tools/highlighter-helper/src/client/styles/base.scss
@@ -7,33 +7,6 @@
   --code-font-family: consolas, monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 }
 
-pre[class*='language-'] {
-  overflow-x: auto;
-
-  margin: 0.75em 0;
-  border-radius: var(--code-border-radius);
-
-  font-size: 1em;
-  font-family: var(--code-font-family);
-  line-height: var(--code-line-height);
-
-  code {
-    display: block;
-
-    box-sizing: border-box;
-    width: fit-content;
-    min-width: 100%;
-    padding: var(--code-padding-y) var(--code-padding-x);
-
-    background-color: transparent !important;
-
-    overflow-wrap: unset;
-
-    -webkit-font-smoothing: auto;
-    -moz-osx-font-smoothing: auto;
-  }
-}
-
 div[class*='language-'] {
   position: relative;
   border-radius: var(--code-border-radius);
@@ -52,9 +25,33 @@ div[class*='language-'] {
     font-size: 0.75rem;
   }
 
-  pre,
-  pre[class*='language-'] {
+  pre {
     position: relative;
     z-index: 1;
+
+    overflow-x: auto;
+
+    margin: 0.75em 0;
+    border-radius: var(--code-border-radius);
+
+    font-size: 1em;
+    font-family: var(--code-font-family);
+    line-height: var(--code-line-height);
+
+    code {
+      display: block;
+
+      box-sizing: border-box;
+      width: fit-content;
+      min-width: 100%;
+      padding: var(--code-padding-y) var(--code-padding-x);
+
+      background-color: transparent !important;
+
+      overflow-wrap: unset;
+
+      -webkit-font-smoothing: auto;
+      -moz-osx-font-smoothing: auto;
+    }
   }
 }

From 3178682edd87a3306404b3aaa0c61890095b7454 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 07:17:13 +0800
Subject: [PATCH 09/63] feat(plugin-prismjs): remove language class from pre

---
 .../src/node/markdown/preWrapperPlugin.ts     |   2 +-
 .../prismjs-preWrapper.spec.ts.snap           | 170 +++++++++---------
 2 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/plugins/markdown/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts b/plugins/markdown/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts
index 66491feffd..e658797fde 100644
--- a/plugins/markdown/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts
+++ b/plugins/markdown/plugin-prismjs/src/node/markdown/preWrapperPlugin.ts
@@ -30,6 +30,6 @@ export const preWrapperPlugin = (
     /**
      * Add information to dataset for current code block.
      */
-    return `<div class="${languageClass}" data-highlighter="prismjs" data-ext="${language.ext}" data-title="${title}">${result}</div>`
+    return `<div class="${languageClass}" data-highlighter="prismjs" data-ext="${language.ext}" data-title="${title}">${result.replace(` class="${languageClass}"`, '')}</div>`
   }
 }
diff --git a/plugins/markdown/plugin-prismjs/tests/__snapshots__/prismjs-preWrapper.spec.ts.snap b/plugins/markdown/plugin-prismjs/tests/__snapshots__/prismjs-preWrapper.spec.ts.snap
index a4a9d956d7..dfe5bd8817 100644
--- a/plugins/markdown/plugin-prismjs/tests/__snapshots__/prismjs-preWrapper.spec.ts.snap
+++ b/plugins/markdown/plugin-prismjs/tests/__snapshots__/prismjs-preWrapper.spec.ts.snap
@@ -1,43 +1,43 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is disabled by default 1`] = `
-"<div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+"<div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-</div><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+</div><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
@@ -47,43 +47,43 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers /
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is enabled by default 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
@@ -93,43 +93,43 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers /
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is set to a number by default 1`] = `
-"<div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+"<div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-</div><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+</div><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
@@ -139,42 +139,42 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers /
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers=number > should work properly if \`lineNumbers\` is disabled by default 1`] = `
-"<div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> line2 <span class="token operator">=</span> <span class="token string">'line 2'</span></span>
+"<div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> line2 <span class="token operator">=</span> <span class="token string">'line 2'</span></span>
 <span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 1"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 1"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line4 <span class="token operator">=</span> <span class="token string">'line 4'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line5 <span class="token operator">=</span> <span class="token string">'line 5'</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 2"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> line10 <span class="token operator">=</span> <span class="token string">'line 10'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 2"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> line10 <span class="token operator">=</span> <span class="token string">'line 10'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line11 <span class="token operator">=</span> <span class="token string">'line 11'</span></span>
 <span class="line"></span></code></pre>
 <div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 9"><div class="line-number"></div><div class="line-number"></div></div></div>"
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers=number > should work properly if \`lineNumbers\` is enabled by default 1`] = `
-"<div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> line2 <span class="token operator">=</span> <span class="token string">'line 2'</span></span>
+"<div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> line2 <span class="token operator">=</span> <span class="token string">'line 2'</span></span>
 <span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 1"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 1"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line4 <span class="token operator">=</span> <span class="token string">'line 4'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line5 <span class="token operator">=</span> <span class="token string">'line 5'</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 2"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> line10 <span class="token operator">=</span> <span class="token string">'line 10'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 2"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> line10 <span class="token operator">=</span> <span class="token string">'line 10'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line11 <span class="token operator">=</span> <span class="token string">'line 11'</span></span>
 <span class="line"></span></code></pre>
 <div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 9"><div class="line-number"></div><div class="line-number"></div></div></div>"
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > :line-numbers=number > should work properly if \`lineNumbers\` is set to a number by default 1`] = `
-"<div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> line2 <span class="token operator">=</span> <span class="token string">'line 2'</span></span>
+"<div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> line2 <span class="token operator">=</span> <span class="token string">'line 2'</span></span>
 <span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 1"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 1"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> line3 <span class="token operator">=</span> <span class="token string">'line 3'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line4 <span class="token operator">=</span> <span class="token string">'line 4'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line5 <span class="token operator">=</span> <span class="token string">'line 5'</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 2"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> line10 <span class="token operator">=</span> <span class="token string">'line 10'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 2"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> line10 <span class="token operator">=</span> <span class="token string">'line 10'</span></span>
 <span class="line highlighted"><span class="token keyword">const</span> line11 <span class="token operator">=</span> <span class="token string">'line 11'</span></span>
 <span class="line"></span></code></pre>
 <div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 9"><div class="line-number"></div><div class="line-number"></div></div></div>"
@@ -193,21 +193,21 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > highlight notati
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > plugin options > should disable \`highlightLines\` 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
@@ -222,21 +222,21 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > plugin options >
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > plugin options > should disable \`lineNumbers\` 1`] = `
-"<div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+"<div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line highlighted"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line highlighted">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
@@ -280,21 +280,21 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > plugin options >
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > plugin options > should enable \`lineNumbers\` according to number of code lines 1`] = `
-"<div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+"<div class="language-text" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+</div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line highlighted"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line highlighted">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
@@ -309,21 +309,21 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > plugin options >
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > plugin options > should process code fences with default options 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">Raw text</span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">Raw text</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre class="language-typescript"><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="config/foo.ts"><pre><code><span class="line highlighted"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line highlighted"></span>
 <span class="line highlighted"><span class="token keyword">function</span> <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line highlighted">  <span class="token keyword">return</span> <span class="token number">1024</span></span>
@@ -338,10 +338,10 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > plugin options >
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespace > should work whitespace with \`all\` option 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">function<span class="space"> </span>foo<span class="space"> </span>()<span class="space"> </span>{<span class="space"> </span><span class="space"> </span>return<span class="space"> </span>'foo'<span class="space"> </span><span class="space"> </span></span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">function<span class="space"> </span>foo<span class="space"> </span>()<span class="space"> </span>{<span class="space"> </span><span class="space"> </span>return<span class="space"> </span>'foo'<span class="space"> </span><span class="space"> </span></span>
 <span class="line">}</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="tab">	</span><span class="token keyword">const</span><span class="space"> </span>foo<span class="space"> </span><span class="token operator">=</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="tab">	</span><span class="token keyword">if</span><span class="space"> </span><span class="token punctuation">(</span>foo<span class="space"> </span><span class="token operator">===</span><span class="space"> </span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="tab">	</span><span class="tab">	</span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'bar'</span></span>
@@ -349,18 +349,18 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 <span class="line"><span class="tab">	</span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span><span class="space"> </span>foo<span class="space"> </span><span class="token operator">=</span><span class="space"> </span><span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
@@ -369,10 +369,10 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespace > should work whitespace with \`boundary\` option 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">function foo () {  return 'foo'<span class="space"> </span><span class="space"> </span></span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">function foo () {  return 'foo'<span class="space"> </span><span class="space"> </span></span>
 <span class="line">}</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line"><span class="tab">	</span><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line"><span class="tab">	</span><span class="token keyword">if</span> <span class="token punctuation">(</span>foo <span class="token operator">===</span> <span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line"><span class="tab">	</span><span class="tab">	</span><span class="token keyword">return</span> <span class="token string">'bar'</span></span>
@@ -380,18 +380,18 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 <span class="line"><span class="tab">	</span><span class="token keyword">return</span> <span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span><span class="space"> </span>foo<span class="space"> </span><span class="token operator">=</span><span class="space"> </span><span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
@@ -400,10 +400,10 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespace > should work whitespace with \`false\` option 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">function foo () {  return 'foo'  </span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">function foo () {  return 'foo'  </span>
 <span class="line">}</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="tab">	</span><span class="token keyword">const</span><span class="space"> </span>foo<span class="space"> </span><span class="token operator">=</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="tab">	</span><span class="token keyword">if</span><span class="space"> </span><span class="token punctuation">(</span>foo<span class="space"> </span><span class="token operator">===</span><span class="space"> </span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="tab">	</span><span class="tab">	</span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'bar'</span></span>
@@ -411,18 +411,18 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 <span class="line"><span class="tab">	</span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span><span class="space"> </span>foo<span class="space"> </span><span class="token operator">=</span><span class="space"> </span><span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
@@ -431,10 +431,10 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespace > should work whitespace with \`trailing\` option 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">function foo () {  return 'foo'<span class="space"> </span><span class="space"> </span></span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">function foo () {  return 'foo'<span class="space"> </span><span class="space"> </span></span>
 <span class="line">}</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">	<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span></span>
 <span class="line">	<span class="token keyword">if</span> <span class="token punctuation">(</span>foo <span class="token operator">===</span> <span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">		<span class="token keyword">return</span> <span class="token string">'bar'</span></span>
@@ -442,18 +442,18 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 <span class="line">	<span class="token keyword">return</span> <span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span><span class="space"> </span>foo<span class="space"> </span><span class="token operator">=</span><span class="space"> </span><span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
@@ -462,10 +462,10 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespace > should work whitespace with default options 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">function foo () {  return 'foo'  </span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">function foo () {  return 'foo'  </span>
 <span class="line">}</span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="tab">	</span><span class="token keyword">const</span><span class="space"> </span>foo<span class="space"> </span><span class="token operator">=</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="tab">	</span><span class="token keyword">if</span><span class="space"> </span><span class="token punctuation">(</span>foo<span class="space"> </span><span class="token operator">===</span><span class="space"> </span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="tab">	</span><span class="tab">	</span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'bar'</span></span>
@@ -473,18 +473,18 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 <span class="line"><span class="tab">	</span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
 <span class="line">  <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line">  <span class="token keyword">return</span> <span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
 <span class="line"></span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line"><span class="token keyword">function</span><span class="space"> </span><span class="token function">foo</span><span class="space"> </span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="space"> </span><span class="token punctuation">{</span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">const</span><span class="space"> </span>foo<span class="space"> </span><span class="token operator">=</span><span class="space"> </span><span class="token string">'foo'</span><span class="space"> </span><span class="space"> </span></span>
 <span class="line"><span class="space"> </span><span class="space"> </span><span class="token keyword">return</span><span class="space"> </span><span class="token string">'foo'</span></span>
 <span class="line"><span class="token punctuation">}</span></span>
@@ -493,21 +493,21 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > render whitespac
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > syntax highlighting > should work if highlighted code is not wrapped with \`<pre>\` 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">highlighted code: Raw text</span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">highlighted code: Raw text</span>
 <span class="line">, lang: </span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">highlighted code: const foo = 'foo'</span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line">highlighted code: const foo = 'foo'</span>
 <span class="line"></span>
 <span class="line">function bar () {</span>
 <span class="line">  return 1024</span>
 <span class="line">}</span>
 <span class="line">, lang: js</span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line">highlighted code: const foo: string = 'foo'</span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line">highlighted code: const foo: string = 'foo'</span>
 <span class="line"></span>
 <span class="line">function bar (): number {</span>
 <span class="line">  return 1024</span>
 <span class="line">}</span>
 <span class="line">, lang: ts</span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-vue-html line-numbers-mode" data-highlighter="prismjs" data-ext="vue-html" data-title="vue-html"><pre class="language-vue-html"><code><span class="line">highlighted code: <template></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-vue-html line-numbers-mode" data-highlighter="prismjs" data-ext="vue-html" data-title="vue-html"><pre><code><span class="line">highlighted code: <template></span>
 <span class="line">  <div>msg: {{msg}}</div></span>
 <span class="line"></template></span>
 <span class="line"><script setup lang="ts"></span>
@@ -518,21 +518,21 @@ exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > syntax highlight
 `;
 
 exports[`@vuepress/plugin-prismjs > markdown fence preWrapper > syntax highlighting > should work if highlighted code is wrapped with \`<pre>\` 1`] = `
-"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">highlighted code: Raw text</span>
+"<div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre><code><span class="line">highlighted code: Raw text</span>
 <span class="line">, lang: </span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">highlighted code: const foo = 'foo'</span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre><code><span class="line">highlighted code: const foo = 'foo'</span>
 <span class="line"></span>
 <span class="line">function bar () {</span>
 <span class="line">  return 1024</span>
 <span class="line">}</span>
 <span class="line">, lang: js</span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line">highlighted code: const foo: string = 'foo'</span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre><code><span class="line">highlighted code: const foo: string = 'foo'</span>
 <span class="line"></span>
 <span class="line">function bar (): number {</span>
 <span class="line">  return 1024</span>
 <span class="line">}</span>
 <span class="line">, lang: ts</span></code></pre>
-<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-vue-html line-numbers-mode" data-highlighter="prismjs" data-ext="vue-html" data-title="vue-html"><pre class="language-vue-html"><code><span class="line">highlighted code: <template></span>
+<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-vue-html line-numbers-mode" data-highlighter="prismjs" data-ext="vue-html" data-title="vue-html"><pre><code><span class="line">highlighted code: <template></span>
 <span class="line">  <div>msg: {{msg}}</div></span>
 <span class="line"></template></span>
 <span class="line"><script setup lang="ts"></span>

From 972f128299ae9bbaa5ae5586730efb6ab491fe02 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 07:19:36 +0800
Subject: [PATCH 10/63] chore: remove unneeded import

---
 .../src/client/styles/themes/ateliersulphurpool-light.scss      | 2 --
 .../plugin-prismjs/src/client/styles/themes/atom-dark.scss      | 2 --
 .../markdown/plugin-prismjs/src/client/styles/themes/cb.scss    | 2 --
 .../plugin-prismjs/src/client/styles/themes/coldark-cold.scss   | 2 --
 .../plugin-prismjs/src/client/styles/themes/coldark-dark.scss   | 2 --
 .../markdown/plugin-prismjs/src/client/styles/themes/coy.scss   | 2 --
 .../markdown/plugin-prismjs/src/client/styles/themes/dark.scss  | 2 --
 .../plugin-prismjs/src/client/styles/themes/dracula.scss        | 2 --
 .../plugin-prismjs/src/client/styles/themes/duotone-dark.scss   | 2 --
 .../plugin-prismjs/src/client/styles/themes/duotone-earth.scss  | 2 --
 .../plugin-prismjs/src/client/styles/themes/duotone-forest.scss | 2 --
 .../plugin-prismjs/src/client/styles/themes/duotone-light.scss  | 2 --
 .../plugin-prismjs/src/client/styles/themes/duotone-sea.scss    | 2 --
 .../plugin-prismjs/src/client/styles/themes/duotone-space.scss  | 2 --
 .../plugin-prismjs/src/client/styles/themes/ghcolors.scss       | 2 --
 .../plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss   | 2 --
 .../plugin-prismjs/src/client/styles/themes/gruvbox-light.scss  | 2 --
 .../markdown/plugin-prismjs/src/client/styles/themes/holi.scss  | 2 --
 .../plugin-prismjs/src/client/styles/themes/hopscotch.scss      | 2 --
 .../plugin-prismjs/src/client/styles/themes/lucario.scss        | 2 --
 .../plugin-prismjs/src/client/styles/themes/material-dark.scss  | 2 --
 .../plugin-prismjs/src/client/styles/themes/material-light.scss | 2 --
 .../src/client/styles/themes/material-oceanic.scss              | 2 --
 .../plugin-prismjs/src/client/styles/themes/night-owl.scss      | 2 --
 .../markdown/plugin-prismjs/src/client/styles/themes/nord.scss  | 2 --
 .../plugin-prismjs/src/client/styles/themes/one-dark.scss       | 2 --
 .../plugin-prismjs/src/client/styles/themes/one-light.scss      | 2 --
 .../plugin-prismjs/src/client/styles/themes/pojoaque.scss       | 2 --
 .../src/client/styles/themes/shades-of-purple.scss              | 2 --
 .../src/client/styles/themes/solarized-dark-atom.scss           | 2 --
 .../plugin-prismjs/src/client/styles/themes/tomorrow.scss       | 2 --
 .../markdown/plugin-prismjs/src/client/styles/themes/vs.scss    | 2 --
 .../plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss  | 2 --
 .../plugin-prismjs/src/client/styles/themes/xonokai.scss        | 2 --
 .../plugin-prismjs/src/client/styles/themes/z-touch.scss        | 2 --
 35 files changed, 70 deletions(-)

diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
index 0d5a40eef0..d420f64d97 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
@@ -6,8 +6,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-base16-ateliersulphurpool.light.css
  */
 
-@use '../mixins';
-
 $code-color: #5e6687;
 $code-bg-color: #f5f7ff;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
index 3564ffeb82..4962452bdd 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
@@ -5,8 +5,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-atom-dark.css
  */
 
-@use '../mixins';
-
 $code-color: #c5c8c6;
 $code-bg-color: #1d1f21;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
index 714d501bc4..3b631c23a3 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
@@ -10,8 +10,6 @@
 
 /* http://cbavota.bitbucket.org/syntax-highlighter/  */
 
-@use '../mixins';
-
 $code-color: #fff;
 $code-bg-color: #222;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
index 5de0b25dd4..e56bbf3f0b 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
@@ -8,8 +8,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-coldark-cold.css
  */
 
-@use '../mixins';
-
 $code-color: #111b27;
 $code-bg-color: #e3eaf2;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
index cfaa46cd8b..b3e7b7669d 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
@@ -8,8 +8,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-coldark-dark.css
  */
 
-@use '../mixins';
-
 $code-color: #e3eaf2;
 $code-bg-color: #111b27;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
index 3591b01223..16146e8ee2 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
@@ -4,8 +4,6 @@
  * @author Tim  Shedor
  */
 
-@use '../mixins';
-
 $code-color: #000;
 $code-bg-color: #fdfdfd;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
index 9911e298c1..6da62b1a82 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
@@ -5,8 +5,6 @@
  * Copied from https://github.com/PrismJS/prism/blob/master/themes/prism-dark.css
  */
 
-@use '../mixins';
-
 $code-color: #fff;
 $code-bg-color: #4d4033;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
index cd11e6ea39..7e434e89b9 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
@@ -6,8 +6,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-dracula.css
  */
 
-@use '../mixins';
-
 $code-color: #f8f8f2;
 $code-bg-color: #282a36;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
index 061d407275..a7576f7401 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
@@ -6,8 +6,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-dark.css
  */
 
-@use '../mixins';
-
 $code-color: #9a86fd;
 $code-bg-color: #2a2734;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
index 2f76c9c6db..b3115e7328 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
@@ -6,8 +6,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-earth.css
  */
 
-@use '../mixins';
-
 $code-color: #88786d;
 $code-bg-color: #322d29;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
index a0b6322de4..1a935f7dda 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
@@ -6,8 +6,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-forest.css
  */
 
-@use '../mixins';
-
 $code-color: #687d68;
 $code-bg-color: #2a2d2a;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
index c0e6a58cdc..7420dd0c65 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
@@ -6,8 +6,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-light.css
 */
 
-@use '../mixins';
-
 $code-color: #728fcb;
 $code-bg-color: #faf8f5;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
index ce45068f3d..811dc07079 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
@@ -6,8 +6,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-sea.css
  */
 
-@use '../mixins';
-
 $code-color: #57718e;
 $code-bg-color: #1d262f;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
index e0c6078c84..b56868914e 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
@@ -6,8 +6,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-space.css
  */
 
-@use '../mixins';
-
 $code-color: #767693;
 $code-bg-color: #24242e;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
index 89c54294f6..7ed6baa74e 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
@@ -4,8 +4,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-ghcolors.css
  */
 
-@use '../mixins';
-
 $code-color: #393a34;
 $code-bg-color: #f8f8f8;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
index 6e0582dda8..8c4aa736ae 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
@@ -9,8 +9,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-gruvbox-dark.css
  */
 
-@use '../mixins';
-
 $code-color: #ebdbb2;
 $code-bg-color: #1d2021;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
index c5aedb407d..31a10464ff 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
@@ -9,8 +9,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-gruvbox-light.css
  */
 
-@use '../mixins';
-
 $code-color: #3c3836;
 $code-bg-color: #f9f5d7;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
index 0b2f978996..84d8fd5e61 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
@@ -6,8 +6,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-holi-theme.css
  */
 
-@use '../mixins';
-
 $code-color: #d6e7ff;
 $code-bg-color: #2a4555;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
index 8869c247c4..e0ff890243 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
@@ -7,8 +7,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-hopscotch.css
  */
 
-@use '../mixins';
-
 $code-color: #b9b5b8;
 $code-bg-color: #322931;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
index 0fa667d2c0..9c77cbb104 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
@@ -6,8 +6,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-lucario.css
  */
 
-@use '../mixins';
-
 $code-color: #f8f8f2;
 $code-bg-color: #263e52;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
index ee8b87207c..6145759b5d 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
@@ -2,8 +2,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-dark.css
  */
 
-@use '../mixins';
-
 $code-color: #eee;
 $code-bg-color: #2f2f2f;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
index ded003de24..255b9e2b50 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
@@ -2,8 +2,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-light.css
  */
 
-@use '../mixins';
-
 $code-color: #90a4ae;
 $code-bg-color: #fafafa;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
index 88346d8cad..d205d4eb33 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
@@ -2,8 +2,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-oceanic.css
  */
 
-@use '../mixins';
-
 $code-color: #c3cee3;
 $code-bg-color: #263238;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
index 8cf4509ebf..f01c362a25 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
@@ -7,8 +7,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-night-owl.css
  */
 
-@use '../mixins';
-
 $code-color: #fff;
 $code-bg-color: #011627;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
index 397cad62f9..8ea5b01e2e 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
@@ -6,8 +6,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-nord.css
  */
 
-@use '../mixins';
-
 $code-color: #f8f8f2;
 $code-bg-color: #2e3440;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
index 485813d49a..7799af4760 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
@@ -4,8 +4,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css
  */
 
-@use '../mixins';
-
 $code-color: #abb2bf;
 $code-bg-color: #282c34;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
index 34915ab195..1722331c61 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
@@ -4,8 +4,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css
  */
 
-@use '../mixins';
-
 $code-color: #383a42;
 $code-bg-color: #ecf4fa;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
index da432b3a49..c18d7fbad0 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
@@ -6,8 +6,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-pojoaque.css
  */
 
-@use '../mixins';
-
 $code-color: #dccf8f;
 $code-bg-color: #181914;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
index 686f86ba33..fe9502d26e 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
@@ -6,8 +6,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-shades-of-purple.css
  */
 
-@use '../mixins';
-
 $code-color: #9efeff;
 $code-bg-color: #1e1e3f;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
index c10b79cb43..57d907b3aa 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
@@ -5,8 +5,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-solarized-dark-atom.css
  */
 
-@use '../mixins';
-
 $code-color: #839496;
 $code-bg-color: #002b36;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
index a811fb3cd8..b446b54466 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
@@ -4,8 +4,6 @@
  * @author Rose Pritchard
  */
 
-@use '../mixins';
-
 $code-color: #ccc;
 $code-bg-color: #2d2d2d;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
index d9a7643778..9f1ed0405b 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
@@ -4,8 +4,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
  */
 
-@use '../mixins';
-
 $code-color: #393a34;
 $code-bg-color: #fff;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
index 3453ce605c..9a1a7b58be 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
@@ -2,8 +2,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css
  */
 
-@use '../mixins';
-
 $code-color: #d4d4d4;
 $code-bg-color: #1e1e1e;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
index f72da1d4d2..abd6896c4b 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
@@ -5,8 +5,6 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-forest.css
  */
 
-@use '../mixins';
-
 $code-color: #76d9e6;
 $code-bg-color: #2a2a2a;
 
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
index 4944b1c511..d9c172d2fd 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
@@ -5,8 +5,6 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-solarized-dark-atom.css
  */
 
-@use '../mixins';
-
 $code-color: #fff;
 $code-bg-color: #0a143c;
 

From d24e1ac69ea967b07adf89d2180e780a93825fae Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 07:21:08 +0800
Subject: [PATCH 11/63] chore: tweaks

---
 .../src/client/styles/notation-error-level.scss             | 3 +++
 .../src/client/styles/notation-word-highlight.scss          | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/tools/highlighter-helper/src/client/styles/notation-error-level.scss b/tools/highlighter-helper/src/client/styles/notation-error-level.scss
index 1d069962ab..39956dfebb 100644
--- a/tools/highlighter-helper/src/client/styles/notation-error-level.scss
+++ b/tools/highlighter-helper/src/client/styles/notation-error-level.scss
@@ -1,5 +1,8 @@
 @use 'notation-highlight';
 
+// notation error level
+// - `// [\!code warning]`
+// - `// [\!code error]`
 :root {
   --code-hl-error-bg-color: rgb(244 63 94 / 16%);
   --code-hl-warning-bg-color: rgb(255 193 7 / 16%);
diff --git a/tools/highlighter-helper/src/client/styles/notation-word-highlight.scss b/tools/highlighter-helper/src/client/styles/notation-word-highlight.scss
index f26da99597..3bfdf7ad14 100644
--- a/tools/highlighter-helper/src/client/styles/notation-word-highlight.scss
+++ b/tools/highlighter-helper/src/client/styles/notation-word-highlight.scss
@@ -3,10 +3,10 @@
   --code-word-highlight-border: #636363;
 }
 
+// notation word highlight
+// - `// [\!code word:xxx]`
+// - `// [\!code word:xxx:3]`
 div[class*='language-'] {
-  // notation word highlight
-  // - `// [\!code word:xxx]`
-  // - `// [\!code word:xxx:3]`
   .highlighted-word {
     margin: -1px -2px;
     padding: 1px 2px;

From 2e1de36b9f8e5546432ffcd0c92512fdfda3ca16 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 12:58:16 +0800
Subject: [PATCH 12/63] fix(theme-default): fix darkmode

---
 themes/theme-default/src/client/composables/useDarkMode.ts | 2 +-
 themes/theme-default/templates/build.html                  | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/themes/theme-default/src/client/composables/useDarkMode.ts b/themes/theme-default/src/client/composables/useDarkMode.ts
index 7f1735fa09..1a570310c8 100644
--- a/themes/theme-default/src/client/composables/useDarkMode.ts
+++ b/themes/theme-default/src/client/composables/useDarkMode.ts
@@ -15,7 +15,7 @@ const applyDarkmodeToHTML = (isDarkMode: DarkModeRef): void => {
     const el = window!.document.documentElement
 
     el.classList.toggle('dark', value)
-    el.setAttribute('data-theme', value ? 'dark' : 'light')
+    el.dataset.theme = value ? 'dark' : 'light'
   }
 
   onMounted(() => {
diff --git a/themes/theme-default/templates/build.html b/themes/theme-default/templates/build.html
index bc7258faad..830241e9f3 100644
--- a/themes/theme-default/templates/build.html
+++ b/themes/theme-default/templates/build.html
@@ -23,9 +23,12 @@
       const systemDarkMode =
         window.matchMedia &&
         window.matchMedia('(prefers-color-scheme: dark)').matches
-      if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
+
+      if (userMode === 'light') {
+        document.documentElement.dataset.theme = 'light'
+      } else if (userMode === 'dark' || systemDarkMode) {
         document.documentElement.classList.toggle('dark', true)
-        document.documentElement.setAttribute('data-theme', 'dark')
+        document.documentElement.dataset.theme = 'dark'
       }
     </script>
     <!--vuepress-ssr-head-->

From e2254ee39bbea5cefec457f7ea3cf0ebd0d2c8eb Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 13:00:28 +0800
Subject: [PATCH 13/63] fix(plugin-prismjs): fix dual theme

---
 .../scripts/generateThemeFiles.ts             | 22 +++++++++++++++++--
 .../src/node/prepareConfigFile.ts             |  8 +++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts b/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
index 42861330f0..0ce6f1b6fe 100644
--- a/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
+++ b/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
@@ -14,7 +14,7 @@ fs.ensureDirSync(outputDir)
 
 themeFiles.forEach((file) => {
   const filename = path.basename(file, '.scss')
-  const lightThemeContent = `
+  const themeContent = `
 @use 'mixins';
 @use 'themes/${filename}';
 
@@ -23,6 +23,16 @@ themeFiles.forEach((file) => {
 }
 
 @include ${filename}.style;
+`
+
+  const lightThemeContent = `
+@use 'mixins';
+@use 'themes/${filename}';
+
+[data-theme='light'] {
+  @include mixins.color($code-color: ${filename}.$code-color, $code-bg-color: ${filename}.$code-bg-color);
+  @include ${filename}.style;
+}
 `
 
   const darkThemeContent = `
@@ -35,6 +45,10 @@ themeFiles.forEach((file) => {
 }
 `
 
+  const themeCss = compileString(themeContent, {
+    loadPaths: [styleDir],
+  }).css
+
   const lightThemeCss = compileString(lightThemeContent, {
     loadPaths: [styleDir],
   }).css
@@ -43,7 +57,11 @@ themeFiles.forEach((file) => {
     loadPaths: [styleDir],
   }).css
 
-  fs.writeFileSync(path.resolve(outputDir, `${filename}.css`), lightThemeCss)
+  fs.writeFileSync(path.resolve(outputDir, `${filename}.css`), themeCss)
+  fs.writeFileSync(
+    path.resolve(outputDir, `${filename}.light.css`),
+    lightThemeCss,
+  )
 
   fs.writeFileSync(
     path.resolve(outputDir, `${filename}.dark.css`),
diff --git a/plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts b/plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts
index c057c52dcb..c12b03eaf1 100644
--- a/plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts
+++ b/plugins/markdown/plugin-prismjs/src/node/prepareConfigFile.ts
@@ -13,11 +13,15 @@ export const prepareConfigFile = (
 
   const imports: string[] = [
     `import "${getRealPath('@vuepress/highlighter-helper/styles/base.css', url)}"`,
-    `import "${getRealPath(`@vuepress/plugin-prismjs/styles/${light}.css`, url)}"`,
   ]
 
-  if (light !== dark) {
+  if (light === dark) {
     imports.push(
+      `import "${getRealPath(`@vuepress/plugin-prismjs/styles/${light}.css`, url)}"`,
+    )
+  } else {
+    imports.push(
+      `import "${getRealPath(`@vuepress/plugin-prismjs/styles/${light}.light.css`, url)}"`,
       `import "${getRealPath(`@vuepress/plugin-prismjs/styles/${dark}.dark.css`, url)}"`,
     )
   }

From c7e798c587486803ee4b25b01819bc587f6a588f Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 16:01:29 +0800
Subject: [PATCH 14/63] feat: update styles

---
 .../src/client/components/Catalog.ts          | 262 +++++++++---------
 .../src/client/styles/catalog.scss            |  22 +-
 .../plugin-catalog/src/client/styles/vars.css |   3 +-
 .../src/client/styles/copy-code.scss          |  12 +-
 .../src/client/styles/medium-zoom.css         |   2 +-
 .../src/client/styles/vars.css                |   2 +-
 .../src/client/styles/notice.scss             |  22 +-
 .../plugin-notice/src/client/styles/vars.css  |  16 +-
 .../src/client/styles/nprogress.css           |   2 +-
 .../src/client/styles/vars.css                |   2 +-
 .../plugin-pwa/src/client/styles/modal.scss   |  34 +--
 .../plugin-pwa/src/client/styles/popup.scss   |  12 +-
 .../pwa/plugin-pwa/src/client/styles/vars.css |  15 +-
 .../src/client/styles/redirect-modal.scss     |  12 +-
 .../src/client/styles/vars.css                |  14 +-
 .../theme-default/src/client/styles/vars.scss |   2 +-
 16 files changed, 214 insertions(+), 220 deletions(-)

diff --git a/plugins/features/plugin-catalog/src/client/components/Catalog.ts b/plugins/features/plugin-catalog/src/client/components/Catalog.ts
index 45c1004b0f..58cf14bee6 100644
--- a/plugins/features/plugin-catalog/src/client/components/Catalog.ts
+++ b/plugins/features/plugin-catalog/src/client/components/Catalog.ts
@@ -218,148 +218,142 @@ export default defineComponent({
     return (): VNode => {
       const isDeep = catalogData.value.some((item) => item.children)
 
-      return h(
-        'div',
-        { class: ['vp-catalog-wrapper', { index: props.index }] },
-        [
-          props.hideHeading
-            ? null
-            : h('h2', { class: 'vp-catalog-main-title' }, locale.value.title),
-          catalogData.value.length
-            ? h(
-                props.index ? 'ol' : 'ul',
-                { class: ['vp-catalogs', { deep: isDeep }] },
-                catalogData.value.map(
-                  ({ children = [], title, path, content }) => {
-                    const childLink = h(
-                      RouteLink,
-                      { class: 'vp-catalog-title', to: path },
-                      () => (content ? h(content) : title),
-                    )
-
-                    return h(
-                      'li',
-                      { class: 'vp-catalog' },
-                      isDeep
-                        ? [
-                            h(
-                              'h3',
-                              {
-                                id: title,
-                                class: [
-                                  'vp-catalog-child-title',
-                                  { 'has-children': children.length },
-                                ],
-                              },
-                              [
-                                h(
-                                  'a',
-                                  {
-                                    'href': `#${title}`,
-                                    'class': 'vp-catalog-header-anchor',
-                                    'aria-hidden': true,
-                                  },
-                                  '#',
-                                ),
-                                childLink,
+      return h('div', { class: ['vp-catalog', { index: props.index }] }, [
+        props.hideHeading
+          ? null
+          : h('h2', { class: 'vp-catalog-main-title' }, locale.value.title),
+        catalogData.value.length
+          ? h(
+              props.index ? 'ol' : 'ul',
+              { class: ['vp-catalog-list', { deep: isDeep }] },
+              catalogData.value.map(
+                ({ children = [], title, path, content }) => {
+                  const childLink = h(
+                    RouteLink,
+                    { class: 'vp-catalog-title', to: path },
+                    () => (content ? h(content) : title),
+                  )
+
+                  return h(
+                    'li',
+                    { class: 'vp-catalog-item' },
+                    isDeep
+                      ? [
+                          h(
+                            'h3',
+                            {
+                              id: title,
+                              class: [
+                                'vp-catalog-child-title',
+                                { 'has-children': children.length },
                               ],
-                            ),
-                            children.length
-                              ? h(
-                                  props.index ? 'ol' : 'ul',
-                                  { class: 'vp-child-catalogs' },
-                                  children.map(
-                                    ({ children = [], content, path, title }) =>
-                                      h('li', { class: 'vp-child-catalog' }, [
-                                        h(
-                                          'div',
-                                          {
-                                            class: [
-                                              'vp-catalog-sub-title',
-                                              {
-                                                'has-children': children.length,
-                                              },
-                                            ],
-                                          },
-                                          [
-                                            h(
-                                              'a',
-                                              {
-                                                href: `#${title}`,
-                                                class:
-                                                  'vp-catalog-header-anchor',
-                                              },
-                                              '#',
-                                            ),
-                                            h(
-                                              RouteLink,
-                                              {
-                                                class: 'vp-catalog-title',
-                                                to: path,
-                                              },
-                                              () =>
-                                                content ? h(content) : title,
-                                            ),
+                            },
+                            [
+                              h(
+                                'a',
+                                {
+                                  'href': `#${title}`,
+                                  'class': 'vp-catalog-header-anchor',
+                                  'aria-hidden': true,
+                                },
+                                '#',
+                              ),
+                              childLink,
+                            ],
+                          ),
+                          children.length
+                            ? h(
+                                props.index ? 'ol' : 'ul',
+                                { class: 'vp-child-catalogs' },
+                                children.map(
+                                  ({ children = [], content, path, title }) =>
+                                    h('li', { class: 'vp-child-catalog' }, [
+                                      h(
+                                        'div',
+                                        {
+                                          class: [
+                                            'vp-catalog-sub-title',
+                                            {
+                                              'has-children': children.length,
+                                            },
                                           ],
-                                        ),
-                                        children.length
-                                          ? h(
-                                              props.index ? 'ol' : 'div',
-                                              {
-                                                class: props.index
-                                                  ? 'vp-sub-catalogs'
-                                                  : 'vp-sub-catalogs-wrapper',
-                                              },
-                                              children.map(
-                                                ({ content, path, title }) =>
-                                                  props.index
-                                                    ? h(
-                                                        'li',
-                                                        {
-                                                          class:
-                                                            'vp-sub-catalog',
-                                                        },
-                                                        h(
-                                                          RouteLink,
-                                                          { to: path },
-                                                          () =>
-                                                            content
-                                                              ? h(content)
-                                                              : title,
-                                                        ),
-                                                      )
-                                                    : h(
+                                        },
+                                        [
+                                          h(
+                                            'a',
+                                            {
+                                              href: `#${title}`,
+                                              class: 'vp-catalog-header-anchor',
+                                            },
+                                            '#',
+                                          ),
+                                          h(
+                                            RouteLink,
+                                            {
+                                              class: 'vp-catalog-title',
+                                              to: path,
+                                            },
+                                            () =>
+                                              content ? h(content) : title,
+                                          ),
+                                        ],
+                                      ),
+                                      children.length
+                                        ? h(
+                                            props.index ? 'ol' : 'div',
+                                            {
+                                              class: props.index
+                                                ? 'vp-sub-catalogs'
+                                                : 'vp-sub-catalogs-wrapper',
+                                            },
+                                            children.map(
+                                              ({ content, path, title }) =>
+                                                props.index
+                                                  ? h(
+                                                      'li',
+                                                      {
+                                                        class: 'vp-sub-catalog',
+                                                      },
+                                                      h(
                                                         RouteLink,
-                                                        {
-                                                          class:
-                                                            'vp-sub-catalog-link',
-                                                          to: path,
-                                                        },
+                                                        { to: path },
                                                         () =>
                                                           content
                                                             ? h(content)
                                                             : title,
                                                       ),
-                                              ),
-                                            )
-                                          : null,
-                                      ]),
-                                  ),
-                                )
-                              : null,
-                          ]
-                        : h(
-                            'div',
-                            { class: 'vp-catalog-child-title' },
-                            childLink,
-                          ),
-                    )
-                  },
-                ),
-              )
-            : h('p', { class: 'vp-empty-catalog' }, locale.value.empty),
-        ],
-      )
+                                                    )
+                                                  : h(
+                                                      RouteLink,
+                                                      {
+                                                        class:
+                                                          'vp-sub-catalog-link',
+                                                        to: path,
+                                                      },
+                                                      () =>
+                                                        content
+                                                          ? h(content)
+                                                          : title,
+                                                    ),
+                                            ),
+                                          )
+                                        : null,
+                                    ]),
+                                ),
+                              )
+                            : null,
+                        ]
+                      : h(
+                          'div',
+                          { class: 'vp-catalog-child-title' },
+                          childLink,
+                        ),
+                  )
+                },
+              ),
+            )
+          : h('p', { class: 'vp-empty-catalog' }, locale.value.empty),
+      ])
     }
   },
 })
diff --git a/plugins/features/plugin-catalog/src/client/styles/catalog.scss b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
index 71cea1217a..a76adde819 100644
--- a/plugins/features/plugin-catalog/src/client/styles/catalog.scss
+++ b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
@@ -1,4 +1,4 @@
-.vp-catalog-wrapper {
+.vp-catalog {
   margin-top: 8px;
   margin-bottom: 8px;
 
@@ -11,11 +11,11 @@
       list-style-type: none;
     }
 
-    .vp-catalogs {
+    .vp-catalog-list {
       padding-inline-start: 0;
     }
 
-    .vp-catalog {
+    .vp-catalog-item {
       list-style-type: none;
     }
 
@@ -41,14 +41,14 @@
   }
 }
 
-.vp-catalogs {
+.vp-catalog-list {
   counter-reset: catalog-item;
   margin: 0;
 
   &.deep {
     padding-inline-start: 0;
 
-    .vp-catalog {
+    .vp-catalog-item {
       list-style-type: none;
     }
   }
@@ -59,13 +59,13 @@
   }
 }
 
-.vp-catalog {
+.vp-catalog-item {
   counter-increment: catalog-item;
 
   &-main-title {
-    margin-top: calc(1rem - var(--navbar-height, 3.6rem));
+    margin-top: calc(1rem - var(--catalog-header-offset));
     margin-bottom: 0.5rem;
-    padding-top: var(--navbar-height, 3.6rem);
+    padding-top: var(--catalog-header-offset);
 
     font-weight: 500;
     font-size: 1.75rem;
@@ -87,9 +87,9 @@
     margin-bottom: 0.5rem !important;
 
     &.has-children {
-      margin-top: calc(1rem - var(--navbar-height, 3.6rem));
-      padding-top: var(--navbar-height, 3.6rem);
-      border-bottom: 1px solid var(--catalog-border-color);
+      margin-top: calc(1rem - var(--catalog-header-offset));
+      padding-top: var(--catalog-header-offset);
+      border-bottom: 1px solid var(--catalog-c-border);
 
       font-weight: 500;
       font-size: 1.3rem;
diff --git a/plugins/features/plugin-catalog/src/client/styles/vars.css b/plugins/features/plugin-catalog/src/client/styles/vars.css
index e497c83079..134a172a7a 100644
--- a/plugins/features/plugin-catalog/src/client/styles/vars.css
+++ b/plugins/features/plugin-catalog/src/client/styles/vars.css
@@ -1,3 +1,4 @@
 :root {
-  --catalog-border-color: #e5e5e5;
+  --catalog-c-border: #e5e5e5;
+  --catalog-header-offset: var(--navbar-height, 3.6rem);
 }
diff --git a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
index f420afc5c1..fa37a90bb7 100644
--- a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
+++ b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
@@ -1,8 +1,8 @@
 :root {
   --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
   --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
-  --copy-code-color: var(--code-line-number-color, #9e9e9e);
-  --copy-code-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
+  --copy-code-c-text: var(--code-line-number-color, #9e9e9e);
+  --copy-code-c-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
 }
 
 .vp-copy-code-button {
@@ -39,7 +39,7 @@
     padding: 0.625rem;
 
     background: currentcolor;
-    color: var(--copy-code-color);
+    color: var(--copy-code-c-text);
 
     font-size: 1.25rem;
 
@@ -60,7 +60,7 @@
 
   &:hover,
   &.copied {
-    background: var(--copy-code-hover);
+    background: var(--copy-code-c-hover);
   }
 
   &.copied {
@@ -82,8 +82,8 @@
       padding: 0.625rem;
       border-radius: 0.5rem;
 
-      background: var(--copy-code-hover);
-      color: var(--copy-code-color);
+      background: var(--copy-code-c-hover);
+      color: var(--copy-code-c-text);
 
       font-weight: 500;
       line-height: 1.25rem;
diff --git a/plugins/features/plugin-medium-zoom/src/client/styles/medium-zoom.css b/plugins/features/plugin-medium-zoom/src/client/styles/medium-zoom.css
index 10d5caf3cf..1071f46b0d 100644
--- a/plugins/features/plugin-medium-zoom/src/client/styles/medium-zoom.css
+++ b/plugins/features/plugin-medium-zoom/src/client/styles/medium-zoom.css
@@ -2,7 +2,7 @@
   z-index: var(--medium-zoom-z-index);
 
   /* override element style set by medium-zoom script */
-  background-color: var(--medium-zoom-bg-color) !important;
+  background-color: var(--medium-zoom-c-bg) !important;
 }
 
 .medium-zoom-overlay ~ img {
diff --git a/plugins/features/plugin-medium-zoom/src/client/styles/vars.css b/plugins/features/plugin-medium-zoom/src/client/styles/vars.css
index 336fdbbe26..3aadd43376 100644
--- a/plugins/features/plugin-medium-zoom/src/client/styles/vars.css
+++ b/plugins/features/plugin-medium-zoom/src/client/styles/vars.css
@@ -1,5 +1,5 @@
 :root {
   --medium-zoom-z-index: 100;
-  --medium-zoom-bg-color: #fff;
+  --medium-zoom-c-bg: var(--vp-c-bg-elv, #fff);
   --medium-zoom-opacity: 1;
 }
diff --git a/plugins/features/plugin-notice/src/client/styles/notice.scss b/plugins/features/plugin-notice/src/client/styles/notice.scss
index 5cd9c4f453..454ae0c548 100644
--- a/plugins/features/plugin-notice/src/client/styles/notice.scss
+++ b/plugins/features/plugin-notice/src/client/styles/notice.scss
@@ -34,8 +34,8 @@
   width: var(--notice-width);
   border-radius: 8px;
 
-  background: var(--notice-bg-color);
-  box-shadow: 0 2px 6px 0 var(--notice-shadow-color);
+  background: var(--notice-c-bg);
+  box-shadow: 0 2px 6px 0 var(--notice-c-shadow);
 
   @media print {
     display: none;
@@ -55,8 +55,8 @@
   margin: 0;
   padding: 8px 12px;
 
-  background: var(--notice-primary-color);
-  color: var(--notice-primary-text-color);
+  background: var(--notice-c-accent);
+  color: var(--notice-c-accent-text);
 
   font-weight: 500;
   text-align: start;
@@ -72,7 +72,7 @@
     border-radius: 50%;
 
     background-color: rgb(0 0 0 / 20%);
-    color: var(--notice-bg-color);
+    color: var(--notice-c-bg);
 
     cursor: pointer;
 
@@ -101,21 +101,21 @@
   border: none;
   border-radius: 8px;
 
-  background-color: var(--notice-button-color);
-  color: var(--notice-color);
+  background-color: var(--notice-c-button);
+  color: var(--notice-c-text);
 
   cursor: pointer;
 
   &:hover {
-    background-color: var(--notice-button-hover-color);
+    background-color: var(--notice-c-button-hover);
   }
 
   &.primary {
-    background-color: var(--notice-primary-color);
-    color: var(--notice-primary-text-color);
+    background-color: var(--notice-c-accent);
+    color: var(--notice-c-accent-text);
 
     &:hover {
-      background-color: var(--notice-primary-hover-color);
+      background-color: var(--notice-c-accent-hover);
     }
   }
 }
diff --git a/plugins/features/plugin-notice/src/client/styles/vars.css b/plugins/features/plugin-notice/src/client/styles/vars.css
index 64fdfb0206..1ee0e4b284 100644
--- a/plugins/features/plugin-notice/src/client/styles/vars.css
+++ b/plugins/features/plugin-notice/src/client/styles/vars.css
@@ -1,11 +1,11 @@
 :root {
   --notice-z-index: 1500;
-  --notice-color: #2c3e50;
-  --notice-bg-color: #fff;
-  --notice-shadow-color: rgb(0 0 0 / 20%);
-  --notice-primary-color: #3eaf7c;
-  --notice-primary-text-color: #fff;
-  --notice-primary-hover-color: #71cda3;
-  --notice-button-color: #f8f8f8;
-  --notice-button-hover-color: #efeef4;
+  --notice-c-text: #2c3e50;
+  --notice-c-bg: #fff;
+  --notice-c-shadow: rgb(0 0 0 / 20%);
+  --notice-c-accent: #3eaf7c;
+  --notice-c-accent-hover: #71cda3;
+  --notice-c-accent-text: #fff;
+  --notice-c-button: #f8f8f8;
+  --notice-c-button-hover: #efeef4;
 }
diff --git a/plugins/features/plugin-nprogress/src/client/styles/nprogress.css b/plugins/features/plugin-nprogress/src/client/styles/nprogress.css
index f524dc347a..670603e799 100644
--- a/plugins/features/plugin-nprogress/src/client/styles/nprogress.css
+++ b/plugins/features/plugin-nprogress/src/client/styles/nprogress.css
@@ -11,5 +11,5 @@
   width: 100%;
   height: 2px;
 
-  background: var(--nprogress-color);
+  background: var(--nprogress-c-text);
 }
diff --git a/plugins/features/plugin-nprogress/src/client/styles/vars.css b/plugins/features/plugin-nprogress/src/client/styles/vars.css
index 9d2b1335c8..c85f80c5ca 100644
--- a/plugins/features/plugin-nprogress/src/client/styles/vars.css
+++ b/plugins/features/plugin-nprogress/src/client/styles/vars.css
@@ -1,4 +1,4 @@
 :root {
-  --nprogress-color: #29d;
+  --nprogress-c-text: var(--vp-c-accent, #29d);
   --nprogress-z-index: 1031;
 }
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
index ff490a5db3..d475f9738a 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
@@ -40,8 +40,8 @@
   border-width: 0;
   border-radius: 1.2rem;
 
-  background: var(--pwa-btn-bg-color);
-  color: var(--pwa-btn-text-color);
+  background: var(--pwa-button-c-bg);
+  color: var(--pwa-button-c-text);
   outline: none;
 
   font-weight: 600;
@@ -63,7 +63,7 @@
 
   &:hover,
   &:active {
-    background: var(--pwa-btn-hover-bg-color);
+    background: var(--pwa-button-c-bg-hover);
   }
 }
 
@@ -112,7 +112,7 @@
     max-width: 56em;
     border-radius: 10px;
 
-    background: var(--pwa-bg-color);
+    background: var(--pwa-c-bg);
 
     transition: background 0.3s;
 
@@ -150,7 +150,7 @@
       border-width: 0;
 
       background: transparent;
-      color: var(--pwa-content-color);
+      color: var(--pwa-c-text);
 
       cursor: pointer;
 
@@ -225,7 +225,7 @@
   .content {
     flex: 1;
     margin: 0 40px;
-    color: var(--pwa-content-color);
+    color: var(--pwa-c-text);
 
     @media (max-width: 719px) {
       margin: 0 20px;
@@ -387,7 +387,7 @@
     min-width: 80px;
     margin: 0.5rem 1rem;
     padding: 0.5rem 1rem;
-    border: 2px solid var(--pwa-btn-bg-color);
+    border: 2px solid var(--pwa-button-c-bg);
     border-radius: 20px;
 
     background: transparent;
@@ -399,8 +399,8 @@
   }
 
   .install-button {
-    background: var(--pwa-btn-bg-color);
-    color: var(--pwa-bg-color);
+    background: var(--pwa-button-c-bg);
+    color: var(--pwa-c-bg);
     transition: color 0.3s;
 
     @media (max-width: 419px) {
@@ -411,18 +411,18 @@
 
     &:hover,
     &:focus {
-      background: var(--pwa-btn-hover-bg-color);
+      background: var(--pwa-button-c-bg-hover);
     }
   }
 
   .cancel-button {
     background: transparent;
-    color: var(--pwa-btn-bg-color);
+    color: var(--pwa-button-c-bg);
 
     &:hover,
     &:focus {
-      background: var(--pwa-btn-hover-bg-color);
-      color: var(--pwa-bg-color);
+      background: var(--pwa-button-c-bg-hover);
+      color: var(--pwa-c-bg);
     }
   }
 
@@ -436,8 +436,8 @@
     padding: 0.5em 2em;
     border-radius: 8px;
 
-    background: var(--pwa-bg-color);
-    box-shadow: 0 2px 12px 0 var(--pwa-shadow-color);
+    background: var(--pwa-c-bg);
+    box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);
 
     font-weight: bold;
     font-size: 14px;
@@ -456,7 +456,7 @@
 
       width: 0;
       height: 0;
-      border-top: 1em solid var(--pwa-bg-color);
+      border-top: 1em solid var(--pwa-c-bg);
       border-right: 0.8em solid transparent;
       border-left: 0.8em solid transparent;
 
@@ -474,7 +474,7 @@
       border-radius: 1em;
 
       background: #07c160;
-      color: var(--pwa-bg-color);
+      color: var(--pwa-c-bg);
 
       cursor: pointer;
 
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/popup.scss b/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
index 9d8e9924d6..b4f9d0205f 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
@@ -36,9 +36,9 @@
   border-width: 0;
   border-radius: 0.5rem;
 
-  background: var(--pwa-bg-color);
-  color: var(--pwa-color);
-  box-shadow: 0 2px 12px 0 var(--pwa-shadow-color);
+  background: var(--pwa-c-bg);
+  color: var(--pwa-c-text);
+  box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);
 
   font-size: 1rem;
   line-height: 1.5;
@@ -58,10 +58,10 @@
     margin-inline-start: 0.4rem;
     border-radius: 0.75rem;
 
-    background: var(--pwa-btn-bg-color);
+    background: var(--pwa-button-c-bg);
 
     &:hover {
-      background: var(--pwa-btn-hover-bg-color);
+      background: var(--pwa-button-c-bg-hover);
     }
 
     svg {
@@ -69,7 +69,7 @@
       height: 1.2rem;
       margin: 0.15rem;
 
-      color: var(--pwa-btn-text-color);
+      color: var(--pwa-button-c-text);
 
       animation: rotate 3s ease infinite;
     }
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/vars.css b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
index 5332803269..09ef554ffb 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/vars.css
+++ b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
@@ -1,12 +1,11 @@
 :root {
   --pwa-z-index: 10;
-  --pwa-color: #2c3e50;
-  --pwa-bg-color: #fff;
-  --pwa-border-color: #3eaf7c;
-  --pwa-shadow-color: rgb(0 0 0 / 15%);
-  --pwa-btn-text-color: #fff;
-  --pwa-btn-bg-color: #3eaf7c;
-  --pwa-btn-hover-bg-color: #4abf8a;
-  --pwa-content-color: #333;
+  --pwa-c-text: #2c3e50;
+  --pwa-c-bg: #fff;
+  --pwa-c-border: #3eaf7c;
+  --pwa-c-shadow: rgb(0 0 0 / 15%);
+  --pwa-button-c-text: #fff;
+  --pwa-button-c-bg: #3eaf7c;
+  --pwa-button-c-bg-hover: #4abf8a;
   --pwa-content-light-color: #666;
 }
diff --git a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
index d4cedfa267..331c7bda9f 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
+++ b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
@@ -34,7 +34,7 @@
   padding: 1rem 2rem;
   border-radius: 8px;
 
-  background: var(--redirect-bg-color);
+  background: var(--redirect-c-bg);
   box-shadow: 0 2px 6px 0 var(--card-shadow);
 }
 
@@ -47,21 +47,21 @@
   border: none;
   border-radius: 8px;
 
-  background-color: var(--redirect-bg-color-lighter);
+  background-color: var(--redirect-c-bg-lighter);
   color: inherit;
 
   cursor: pointer;
 
   &:hover {
-    background-color: var(--redirect-bg-color-light);
+    background-color: var(--redirect-c-bg-light);
   }
 
   &.primary {
-    background-color: var(--redirect-primary-color);
-    color: var(--redirect-primary-text-color);
+    background-color: var(--redirect-c-accent);
+    color: var(--redirect-c-accent-text);
 
     &:hover {
-      background-color: var(--redirect-primary-hover-color);
+      background-color: var(--redirect-c-accent-hover);
     }
   }
 }
diff --git a/plugins/tools/plugin-redirect/src/client/styles/vars.css b/plugins/tools/plugin-redirect/src/client/styles/vars.css
index d9f8b354a0..1cc7a3206b 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/vars.css
+++ b/plugins/tools/plugin-redirect/src/client/styles/vars.css
@@ -1,10 +1,10 @@
 :root {
   --redirect-z-index: 1499;
-  --redirect-bg-color: #fff;
-  --redirect-bg-color-light: #f3f4f5;
-  --redirect-bg-color-lighter: #eee;
-  --redirect-text-color: #2c3e50;
-  --redirect-primary-color: #3eaf7c;
-  --redirect-primary-hover-color: #4abf8a;
-  --redirect-primary-text-color: #fff;
+  --redirect-c-bg: #fff;
+  --redirect-c-bg-light: #f3f4f5;
+  --redirect-c-bg-lighter: #eee;
+  --redirect-c-text: #2c3e50;
+  --redirect-c-accent: #3eaf7c;
+  --redirect-c-accent-hover: #4abf8a;
+  --redirect-c-accent-text: #fff;
 }
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 79cb9aff70..9cd551047a 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -96,7 +96,7 @@
 
 // plugin-catalog
 .vp-catalog-wrapper {
-  --catalog-border-color: var(--c-border);
+  --catalog-c-border: var(--c-border);
 }
 
 // plugin-docsearch

From 8ae82d9e1c24bf90701bd07ab1ad0b11bd746c32 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 17:33:35 +0800
Subject: [PATCH 15/63] chore: tweaks

---
 plugins/blog/plugin-feed/templates/atom.xsl               | 6 +++---
 plugins/blog/plugin-feed/templates/rss.xsl                | 6 +++---
 .../markdown/plugin-prismjs/scripts/generateThemeFiles.ts | 6 +++---
 .../plugin-prismjs/src/client/styles/_mixins.scss         | 8 ++++----
 .../client/styles/themes/ateliersulphurpool-light.scss    | 2 +-
 .../src/client/styles/themes/atom-dark.scss               | 2 +-
 .../plugin-prismjs/src/client/styles/themes/cb.scss       | 2 +-
 .../src/client/styles/themes/coldark-cold.scss            | 2 +-
 .../src/client/styles/themes/coldark-dark.scss            | 2 +-
 .../plugin-prismjs/src/client/styles/themes/coy.scss      | 2 +-
 .../plugin-prismjs/src/client/styles/themes/dark.scss     | 2 +-
 .../plugin-prismjs/src/client/styles/themes/dracula.scss  | 2 +-
 .../src/client/styles/themes/duotone-dark.scss            | 2 +-
 .../src/client/styles/themes/duotone-earth.scss           | 2 +-
 .../src/client/styles/themes/duotone-forest.scss          | 2 +-
 .../src/client/styles/themes/duotone-light.scss           | 2 +-
 .../src/client/styles/themes/duotone-sea.scss             | 2 +-
 .../src/client/styles/themes/duotone-space.scss           | 2 +-
 .../plugin-prismjs/src/client/styles/themes/ghcolors.scss | 2 +-
 .../src/client/styles/themes/gruvbox-dark.scss            | 2 +-
 .../src/client/styles/themes/gruvbox-light.scss           | 2 +-
 .../plugin-prismjs/src/client/styles/themes/holi.scss     | 2 +-
 .../src/client/styles/themes/hopscotch.scss               | 2 +-
 .../plugin-prismjs/src/client/styles/themes/lucario.scss  | 2 +-
 .../src/client/styles/themes/material-dark.scss           | 2 +-
 .../src/client/styles/themes/material-light.scss          | 2 +-
 .../src/client/styles/themes/material-oceanic.scss        | 2 +-
 .../src/client/styles/themes/night-owl.scss               | 2 +-
 .../plugin-prismjs/src/client/styles/themes/nord.scss     | 2 +-
 .../plugin-prismjs/src/client/styles/themes/one-dark.scss | 2 +-
 .../src/client/styles/themes/one-light.scss               | 2 +-
 .../plugin-prismjs/src/client/styles/themes/pojoaque.scss | 2 +-
 .../src/client/styles/themes/shades-of-purple.scss        | 2 +-
 .../src/client/styles/themes/solarized-dark-atom.scss     | 2 +-
 .../plugin-prismjs/src/client/styles/themes/tomorrow.scss | 2 +-
 .../plugin-prismjs/src/client/styles/themes/vs.scss       | 2 +-
 .../src/client/styles/themes/vsc-dark-plus.scss           | 2 +-
 .../plugin-prismjs/src/client/styles/themes/xonokai.scss  | 2 +-
 .../plugin-prismjs/src/client/styles/themes/z-touch.scss  | 2 +-
 .../markdown/plugin-shiki/src/client/styles/shiki.scss    | 8 ++++----
 themes/theme-default/src/client/styles/vars.scss          | 2 +-
 tools/highlighter-helper/src/client/styles/base.scss      | 4 ++--
 .../highlighter-helper/src/client/styles/line-number.scss | 2 +-
 43 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/plugins/blog/plugin-feed/templates/atom.xsl b/plugins/blog/plugin-feed/templates/atom.xsl
index 26404c7143..a1b5315aff 100644
--- a/plugins/blog/plugin-feed/templates/atom.xsl
+++ b/plugins/blog/plugin-feed/templates/atom.xsl
@@ -18,7 +18,7 @@
             --border-color: #eaecef;
             --border-color-dark: #cfd4db;
             --code-bg-color: #ecf4fa;
-            --code-color: #383a42;
+            --code-c-text: #383a42;
             --brand-color: #3eaf7c;
             --font-family-mono: consolas, monaco, "Andale Mono", "Ubuntu Mono", monospace;
 
@@ -33,7 +33,7 @@
               --border-color: #30363d;
               --border-color-dark: #394048;
               --code-bg-color: #282c34;
-              --code-color: #abb2bf;
+              --code-c-text: #abb2bf;
             }
           }
 
@@ -85,7 +85,7 @@
             border-radius: 6px;
 
             background: var(--code-bg-color);
-            color: var(--code-color);
+            color: var(--code-c-text);
 
             direction: ltr;
           }
diff --git a/plugins/blog/plugin-feed/templates/rss.xsl b/plugins/blog/plugin-feed/templates/rss.xsl
index 972565991d..3d751082a1 100644
--- a/plugins/blog/plugin-feed/templates/rss.xsl
+++ b/plugins/blog/plugin-feed/templates/rss.xsl
@@ -18,7 +18,7 @@
             --border-color: #eaecef;
             --border-color-dark: #cfd4db;
             --code-bg-color: #ecf4fa;
-            --code-color: #383a42;
+            --code-c-text: #383a42;
             --brand-color: #3eaf7c;
             --font-family-mono: consolas, monaco, "Andale Mono", "Ubuntu Mono", monospace;
 
@@ -33,7 +33,7 @@
               --border-color: #30363d;
               --border-color-dark: #394048;
               --code-bg-color: #282c34;
-              --code-color: #abb2bf;
+              --code-c-text: #abb2bf;
             }
           }
 
@@ -85,7 +85,7 @@
             border-radius: 6px;
 
             background: var(--code-bg-color);
-            color: var(--code-color);
+            color: var(--code-c-text);
 
             direction: ltr;
           }
diff --git a/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts b/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
index 0ce6f1b6fe..e53893f391 100644
--- a/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
+++ b/plugins/markdown/plugin-prismjs/scripts/generateThemeFiles.ts
@@ -19,7 +19,7 @@ themeFiles.forEach((file) => {
 @use 'themes/${filename}';
 
 :root {
-  @include mixins.color($code-color: ${filename}.$code-color, $code-bg-color: ${filename}.$code-bg-color);
+  @include mixins.color($code-text-color: ${filename}.$code-text-color, $code-bg-color: ${filename}.$code-bg-color);
 }
 
 @include ${filename}.style;
@@ -30,7 +30,7 @@ themeFiles.forEach((file) => {
 @use 'themes/${filename}';
 
 [data-theme='light'] {
-  @include mixins.color($code-color: ${filename}.$code-color, $code-bg-color: ${filename}.$code-bg-color);
+  @include mixins.color($code-text-color: ${filename}.$code-text-color, $code-bg-color: ${filename}.$code-bg-color);
   @include ${filename}.style;
 }
 `
@@ -40,7 +40,7 @@ themeFiles.forEach((file) => {
 @use 'themes/${filename}';
 
 [data-theme='dark'] {
-  @include mixins.color($code-color: ${filename}.$code-color, $code-bg-color: ${filename}.$code-bg-color);
+  @include mixins.color($code-text-color: ${filename}.$code-text-color, $code-bg-color: ${filename}.$code-bg-color);
   @include ${filename}.style;
 }
 `
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss b/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss
index 9404dce2bb..7644440675 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/_mixins.scss
@@ -1,9 +1,9 @@
 @use 'sass:color';
 
-@mixin color($code-color, $code-bg-color) {
+@mixin color($code-text-color, $code-bg-color) {
   // base
-  --code-color: #{$code-color};
-  --code-bg-color: #{$code-bg-color};
+  --code-c-text: #{$code-text-color};
+  --code-c-bg: #{$code-bg-color};
 
   // highlight
   --code-highlight-bg-color: #{color.scale(
@@ -13,5 +13,5 @@
     )};
 
   // line-number
-  --code-line-number-color: #{color.scale($code-color, $alpha: -33%)};
+  --code-line-number-color: #{color.scale($code-text-color, $alpha: -33%)};
 }
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
index d420f64d97..8dfa23b347 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ateliersulphurpool-light.scss
@@ -6,7 +6,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-base16-ateliersulphurpool.light.css
  */
 
-$code-color: #5e6687;
+$code-text-color: #5e6687;
 $code-bg-color: #f5f7ff;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
index 4962452bdd..69e550e7eb 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/atom-dark.scss
@@ -5,7 +5,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-atom-dark.css
  */
 
-$code-color: #c5c8c6;
+$code-text-color: #c5c8c6;
 $code-bg-color: #1d1f21;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
index 3b631c23a3..dffcde9dc0 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/cb.scss
@@ -10,7 +10,7 @@
 
 /* http://cbavota.bitbucket.org/syntax-highlighter/  */
 
-$code-color: #fff;
+$code-text-color: #fff;
 $code-bg-color: #222;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
index e56bbf3f0b..33536b637a 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-cold.scss
@@ -8,7 +8,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-coldark-cold.css
  */
 
-$code-color: #111b27;
+$code-text-color: #111b27;
 $code-bg-color: #e3eaf2;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
index b3e7b7669d..302c565e58 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coldark-dark.scss
@@ -8,7 +8,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-coldark-dark.css
  */
 
-$code-color: #e3eaf2;
+$code-text-color: #e3eaf2;
 $code-bg-color: #111b27;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
index 16146e8ee2..620044d6f1 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/coy.scss
@@ -4,7 +4,7 @@
  * @author Tim  Shedor
  */
 
-$code-color: #000;
+$code-text-color: #000;
 $code-bg-color: #fdfdfd;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
index 6da62b1a82..f6c46f6b2a 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dark.scss
@@ -5,7 +5,7 @@
  * Copied from https://github.com/PrismJS/prism/blob/master/themes/prism-dark.css
  */
 
-$code-color: #fff;
+$code-text-color: #fff;
 $code-bg-color: #4d4033;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
index 7e434e89b9..8835a443b6 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/dracula.scss
@@ -6,7 +6,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-dracula.css
  */
 
-$code-color: #f8f8f2;
+$code-text-color: #f8f8f2;
 $code-bg-color: #282a36;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
index a7576f7401..f790830564 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-dark.scss
@@ -6,7 +6,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-dark.css
  */
 
-$code-color: #9a86fd;
+$code-text-color: #9a86fd;
 $code-bg-color: #2a2734;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
index b3115e7328..1d0ee7fc9d 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-earth.scss
@@ -6,7 +6,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-earth.css
  */
 
-$code-color: #88786d;
+$code-text-color: #88786d;
 $code-bg-color: #322d29;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
index 1a935f7dda..ee8e237c6b 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-forest.scss
@@ -6,7 +6,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-forest.css
  */
 
-$code-color: #687d68;
+$code-text-color: #687d68;
 $code-bg-color: #2a2d2a;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
index 7420dd0c65..9f38b1c5d9 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-light.scss
@@ -6,7 +6,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-light.css
 */
 
-$code-color: #728fcb;
+$code-text-color: #728fcb;
 $code-bg-color: #faf8f5;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
index 811dc07079..8acc119426 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-sea.scss
@@ -6,7 +6,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-sea.css
  */
 
-$code-color: #57718e;
+$code-text-color: #57718e;
 $code-bg-color: #1d262f;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
index b56868914e..93ad1cb0b7 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/duotone-space.scss
@@ -6,7 +6,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-space.css
  */
 
-$code-color: #767693;
+$code-text-color: #767693;
 $code-bg-color: #24242e;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
index 7ed6baa74e..cb9e34dd22 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/ghcolors.scss
@@ -4,7 +4,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-ghcolors.css
  */
 
-$code-color: #393a34;
+$code-text-color: #393a34;
 $code-bg-color: #f8f8f8;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
index 8c4aa736ae..3b3f0007a2 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-dark.scss
@@ -9,7 +9,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-gruvbox-dark.css
  */
 
-$code-color: #ebdbb2;
+$code-text-color: #ebdbb2;
 $code-bg-color: #1d2021;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
index 31a10464ff..5cdd949e25 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/gruvbox-light.scss
@@ -9,7 +9,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-gruvbox-light.css
  */
 
-$code-color: #3c3836;
+$code-text-color: #3c3836;
 $code-bg-color: #f9f5d7;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
index 84d8fd5e61..3b7e75016e 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/holi.scss
@@ -6,7 +6,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-holi-theme.css
  */
 
-$code-color: #d6e7ff;
+$code-text-color: #d6e7ff;
 $code-bg-color: #2a4555;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
index e0ff890243..35f5c548bf 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/hopscotch.scss
@@ -7,7 +7,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-hopscotch.css
  */
 
-$code-color: #b9b5b8;
+$code-text-color: #b9b5b8;
 $code-bg-color: #322931;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
index 9c77cbb104..2339cb228b 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/lucario.scss
@@ -6,7 +6,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-lucario.css
  */
 
-$code-color: #f8f8f2;
+$code-text-color: #f8f8f2;
 $code-bg-color: #263e52;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
index 6145759b5d..bb6b3c46aa 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-dark.scss
@@ -2,7 +2,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-dark.css
  */
 
-$code-color: #eee;
+$code-text-color: #eee;
 $code-bg-color: #2f2f2f;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
index 255b9e2b50..225daabc87 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-light.scss
@@ -2,7 +2,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-light.css
  */
 
-$code-color: #90a4ae;
+$code-text-color: #90a4ae;
 $code-bg-color: #fafafa;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
index d205d4eb33..316982b6ba 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/material-oceanic.scss
@@ -2,7 +2,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-oceanic.css
  */
 
-$code-color: #c3cee3;
+$code-text-color: #c3cee3;
 $code-bg-color: #263238;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
index f01c362a25..4643ea373d 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/night-owl.scss
@@ -7,7 +7,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-night-owl.css
  */
 
-$code-color: #fff;
+$code-text-color: #fff;
 $code-bg-color: #011627;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
index 8ea5b01e2e..d2ea512e42 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/nord.scss
@@ -6,7 +6,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-nord.css
  */
 
-$code-color: #f8f8f2;
+$code-text-color: #f8f8f2;
 $code-bg-color: #2e3440;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
index 7799af4760..efeb85a698 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-dark.scss
@@ -4,7 +4,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css
  */
 
-$code-color: #abb2bf;
+$code-text-color: #abb2bf;
 $code-bg-color: #282c34;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
index 1722331c61..d0b3e771d0 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/one-light.scss
@@ -4,7 +4,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css
  */
 
-$code-color: #383a42;
+$code-text-color: #383a42;
 $code-bg-color: #ecf4fa;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
index c18d7fbad0..c6d7281e3e 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/pojoaque.scss
@@ -6,7 +6,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-pojoaque.css
  */
 
-$code-color: #dccf8f;
+$code-text-color: #dccf8f;
 $code-bg-color: #181914;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
index fe9502d26e..1d85654071 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/shades-of-purple.scss
@@ -6,7 +6,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-shades-of-purple.css
  */
 
-$code-color: #9efeff;
+$code-text-color: #9efeff;
 $code-bg-color: #1e1e3f;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
index 57d907b3aa..bf2104d46b 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/solarized-dark-atom.scss
@@ -5,7 +5,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-solarized-dark-atom.css
  */
 
-$code-color: #839496;
+$code-text-color: #839496;
 $code-bg-color: #002b36;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
index b446b54466..39f14910b5 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/tomorrow.scss
@@ -4,7 +4,7 @@
  * @author Rose Pritchard
  */
 
-$code-color: #ccc;
+$code-text-color: #ccc;
 $code-bg-color: #2d2d2d;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
index 9f1ed0405b..6fdaa41e61 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vs.scss
@@ -4,7 +4,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
  */
 
-$code-color: #393a34;
+$code-text-color: #393a34;
 $code-bg-color: #fff;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
index 9a1a7b58be..2bf3e37df6 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/vsc-dark-plus.scss
@@ -2,7 +2,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vsc-dark-plus.css
  */
 
-$code-color: #d4d4d4;
+$code-text-color: #d4d4d4;
 $code-bg-color: #1e1e1e;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
index abd6896c4b..591505a922 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/xonokai.scss
@@ -5,7 +5,7 @@
  * Copied from  https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-forest.css
  */
 
-$code-color: #76d9e6;
+$code-text-color: #76d9e6;
 $code-bg-color: #2a2a2a;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss b/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
index d9c172d2fd..eeed66585a 100644
--- a/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
+++ b/plugins/markdown/plugin-prismjs/src/client/styles/themes/z-touch.scss
@@ -5,7 +5,7 @@
  * Copied from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-solarized-dark-atom.css
  */
 
-$code-color: #fff;
+$code-text-color: #fff;
 $code-bg-color: #0a143c;
 
 @mixin style {
diff --git a/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss b/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
index d7df95e726..c334706423 100644
--- a/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
+++ b/plugins/markdown/plugin-shiki/src/client/styles/shiki.scss
@@ -1,7 +1,7 @@
 :root {
   // base color
-  --code-color: #9e9e9e;
-  --code-bg-color: #282c34;
+  --code-c-text: #9e9e9e;
+  --code-c-bg: #282c34;
 
   // highlight
   --code-highlight-bg-color: rgb(0 0 0 / 66%);
@@ -16,9 +16,9 @@
 }
 
 div[data-highlighter='shiki'] {
-  background-color: var(--shiki-light-bg, var(--code-bg-color));
+  background-color: var(--shiki-light-bg, var(--code-c-bg));
 
   [data-theme='dark'] & {
-    background-color: var(--shiki-dark-bg, var(--code-bg-color));
+    background-color: var(--shiki-dark-bg, var(--code-c-bg));
   }
 }
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 9cd551047a..91621a6caf 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -68,7 +68,7 @@
 
   // code group colors
   --c-code-group-tab-title: rgb(255 255 255 / 90%);
-  --c-code-group-tab-bg: var(--code-bg-color);
+  --c-code-group-tab-bg: var(--code-c-bg);
   --c-code-group-tab-outline: var(var(--c-code-group-tab-title));
   --c-code-group-tab-active-border: var(--vp-c-accent);
 
diff --git a/tools/highlighter-helper/src/client/styles/base.scss b/tools/highlighter-helper/src/client/styles/base.scss
index 4d51304e00..52f82e2adb 100644
--- a/tools/highlighter-helper/src/client/styles/base.scss
+++ b/tools/highlighter-helper/src/client/styles/base.scss
@@ -10,7 +10,7 @@
 div[class*='language-'] {
   position: relative;
   border-radius: var(--code-border-radius);
-  background-color: var(--code-bg-color);
+  background-color: var(--code-c-bg);
 
   &::before {
     content: attr(data-title);
@@ -20,7 +20,7 @@ div[class*='language-'] {
     right: 1em;
     z-index: 3;
 
-    color: var(--code-color);
+    color: var(--code-c-text);
 
     font-size: 0.75rem;
   }
diff --git a/tools/highlighter-helper/src/client/styles/line-number.scss b/tools/highlighter-helper/src/client/styles/line-number.scss
index d712c95a02..0ac64fb5ce 100644
--- a/tools/highlighter-helper/src/client/styles/line-number.scss
+++ b/tools/highlighter-helper/src/client/styles/line-number.scss
@@ -42,7 +42,7 @@ div[class*='language-'] {
       width: var(--code-line-number-width);
       padding-top: var(--code-padding-y);
 
-      color: var(--code-line-number-color, --code-color);
+      color: var(--code-line-number-color, --code-c-text);
 
       font-size: 0.875em;
       line-height: var(--code-line-height);

From e03c5c8931320ca788bae21ab5b96d0e4aac759d Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 17:37:14 +0800
Subject: [PATCH 16/63] chore: tweaks

---
 .../src/client/styles/notation-error-level.scss           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tools/highlighter-helper/src/client/styles/notation-error-level.scss b/tools/highlighter-helper/src/client/styles/notation-error-level.scss
index 39956dfebb..1db79f07e4 100644
--- a/tools/highlighter-helper/src/client/styles/notation-error-level.scss
+++ b/tools/highlighter-helper/src/client/styles/notation-error-level.scss
@@ -4,16 +4,16 @@
 // - `// [\!code warning]`
 // - `// [\!code error]`
 :root {
-  --code-hl-error-bg-color: rgb(244 63 94 / 16%);
-  --code-hl-warning-bg-color: rgb(255 193 7 / 16%);
+  --code-highlight-error-bg-color: rgb(244 63 94 / 16%);
+  --code-highlight-warning-bg-color: rgb(255 193 7 / 16%);
 }
 
 div[class*='language-'] .line.highlighted {
   &.error {
-    background-color: var(--code-hl-error-bg-color);
+    background-color: var(--code-highlight-error-bg-color);
   }
 
   &.warning {
-    background-color: var(--code-hl-warning-bg-color);
+    background-color: var(--code-highlight-warning-bg-color);
   }
 }

From 11873a0fcd9277a00c9a40b15d345426e50988f3 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 17:46:22 +0800
Subject: [PATCH 17/63] chore: tweaks

---
 e2e/tests/plugin-theme-data/theme-data.spec.ts                | 2 +-
 e2e/tests/theme-default/home.spec.ts                          | 4 +---
 e2e/tests/theme-default/sidebar.spec.ts                       | 4 ++--
 .../features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts  | 4 ++--
 .../theme-default/src/client/composables/useSidebarItems.ts   | 2 +-
 themes/theme-default/src/node/defaultTheme.ts                 | 3 ---
 6 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/e2e/tests/plugin-theme-data/theme-data.spec.ts b/e2e/tests/plugin-theme-data/theme-data.spec.ts
index 60b984c9ba..a2eeeb23f7 100644
--- a/e2e/tests/plugin-theme-data/theme-data.spec.ts
+++ b/e2e/tests/plugin-theme-data/theme-data.spec.ts
@@ -92,7 +92,7 @@ test.describe('plugin-theme-data', () => {
     expect(themeLocaleData).toHaveProperty('navbar', ['/zh/'])
     expect(themeLocaleData).not.toHaveProperty('locales')
 
-    await page.locator('.theme-default-content a').click()
+    await page.locator('[vp-content] a').click()
 
     await page.waitForURL('zh/test.html')
 
diff --git a/e2e/tests/theme-default/home.spec.ts b/e2e/tests/theme-default/home.spec.ts
index cc09a84cac..34a3ab000c 100644
--- a/e2e/tests/theme-default/home.spec.ts
+++ b/e2e/tests/theme-default/home.spec.ts
@@ -53,9 +53,7 @@ test.describe('homepage', () => {
   })
 
   test('has content', async ({ page }) => {
-    await expect(page.locator('.theme-default-content')).toHaveText(
-      'HomePage Content',
-    )
+    await expect(page.locator('[vp-content]')).toHaveText('HomePage Content')
   })
 
   test('has footer', async ({ page }) => {
diff --git a/e2e/tests/theme-default/sidebar.spec.ts b/e2e/tests/theme-default/sidebar.spec.ts
index 34cbd25934..c98828aaa9 100644
--- a/e2e/tests/theme-default/sidebar.spec.ts
+++ b/e2e/tests/theme-default/sidebar.spec.ts
@@ -14,7 +14,7 @@ test.describe('has heading sidebar', () => {
     await page.goto('sidebar/heading/1.html')
 
     const sidebarHeadings = page.locator('.vp-sidebar-heading')
-    const pageTitle = page.locator('.theme-default-content h1')
+    const pageTitle = page.locator('[vp-content] h1')
     const sidebarItems = page.locator('.vp-sidebar-item.route-link')
 
     const pageTitleText = (await pageTitle.innerText()).replace('#', '')
@@ -22,7 +22,7 @@ test.describe('has heading sidebar', () => {
     await expect(pageTitle).not.toBeEmpty()
     await expect(sidebarHeadings).toContainText(pageTitleText)
 
-    const h2 = page.locator('.theme-default-content h2').first()
+    const h2 = page.locator('[vp-content] h2').first()
     const h2Text = (await h2.innerText()).replace('#', '')
 
     await expect(h2).not.toBeEmpty()
diff --git a/plugins/features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts b/plugins/features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts
index 1734ae0d38..9685e3987e 100644
--- a/plugins/features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts
+++ b/plugins/features/plugin-medium-zoom/src/node/mediumZoomPlugin.ts
@@ -11,7 +11,7 @@ export interface MediumZoomPluginOptions {
   /**
    * Selector of zoomable images
    *
-   * @default '[vp-content] :not(a) > img'
+   * @default '[vp-content] > img, [vp-content] :not(a) > img'
    */
   selector?: string
 
@@ -31,7 +31,7 @@ export interface MediumZoomPluginOptions {
 }
 
 export const mediumZoomPlugin = ({
-  selector = '[vp-content] :not(a) > img',
+  selector = '[vp-content] > img, [vp-content] :not(a) > img',
   zoomOptions = {},
   delay = 500,
 }: MediumZoomPluginOptions = {}): Plugin => ({
diff --git a/themes/theme-default/src/client/composables/useSidebarItems.ts b/themes/theme-default/src/client/composables/useSidebarItems.ts
index 4e5380ceaf..842ad7f11a 100644
--- a/themes/theme-default/src/client/composables/useSidebarItems.ts
+++ b/themes/theme-default/src/client/composables/useSidebarItems.ts
@@ -48,7 +48,7 @@ export const setupHeaders = (): void => {
 
     headersRef.value = getHeaders({
       selector: [...new Array(6)]
-        .map((_, i) => `.theme-default-content h${i + 1}`)
+        .map((_, i) => `[vp-content] h${i + 1}`)
         .join(','),
       levels: [2, levels.value + 1],
       ignore: ['.vp-badge'],
diff --git a/themes/theme-default/src/node/defaultTheme.ts b/themes/theme-default/src/node/defaultTheme.ts
index 80f7de01ff..7a80afb77e 100644
--- a/themes/theme-default/src/node/defaultTheme.ts
+++ b/themes/theme-default/src/node/defaultTheme.ts
@@ -223,9 +223,6 @@ export const defaultTheme = ({
       // @vuepress/plugin-medium-zoom
       themePlugins.mediumZoom !== false
         ? mediumZoomPlugin({
-            selector:
-              '.theme-default-content > img, .theme-default-content :not(a) > img',
-            zoomOptions: {},
             // should greater than page transition duration
             delay: 300,
           })

From e09545fb6f4dca03c416e8b53a073120cc167437 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 17:47:11 +0800
Subject: [PATCH 18/63] chore: tweaks

---
 themes/theme-default/src/client/layouts/NotFound.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/themes/theme-default/src/client/layouts/NotFound.vue b/themes/theme-default/src/client/layouts/NotFound.vue
index 78b87bdeeb..86da222b5c 100644
--- a/themes/theme-default/src/client/layouts/NotFound.vue
+++ b/themes/theme-default/src/client/layouts/NotFound.vue
@@ -31,10 +31,8 @@ const homeText = themeLocale.value.backToHome ?? 'Back to home'
   max-width: 740px;
   margin: 0 auto;
   padding: 2rem 2.5rem;
-}
 
-@media (max-width: 959px) {
-  .vp-theme-container {
+  @media (max-width: 959px) {
     padding: 2rem;
   }
 }

From 3ae8778a1e668913df1e8c87c779bb3b22512ce0 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 17:48:11 +0800
Subject: [PATCH 19/63] chore: tweaks

---
 themes/theme-default/src/client/composables/useSidebarItems.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/themes/theme-default/src/client/composables/useSidebarItems.ts b/themes/theme-default/src/client/composables/useSidebarItems.ts
index 842ad7f11a..ec44c3c4d5 100644
--- a/themes/theme-default/src/client/composables/useSidebarItems.ts
+++ b/themes/theme-default/src/client/composables/useSidebarItems.ts
@@ -47,9 +47,6 @@ export const setupHeaders = (): void => {
     }
 
     headersRef.value = getHeaders({
-      selector: [...new Array(6)]
-        .map((_, i) => `[vp-content] h${i + 1}`)
-        .join(','),
       levels: [2, levels.value + 1],
       ignore: ['.vp-badge'],
     })

From a7b22bae202afc28b28d01c6698ddd1673d9c907 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 17:48:43 +0800
Subject: [PATCH 20/63] chore: tweaks

---
 docs/plugins/features/medium-zoom.md    | 2 +-
 docs/zh/plugins/features/medium-zoom.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/plugins/features/medium-zoom.md b/docs/plugins/features/medium-zoom.md
index 9148ca082f..ef788c3a65 100644
--- a/docs/plugins/features/medium-zoom.md
+++ b/docs/plugins/features/medium-zoom.md
@@ -30,7 +30,7 @@ export default {
 
 - Type: `string`
 
-- Default: `'[vp-content] :not(a) > img'`
+- Default: `'[vp-content] > img, [vp-content] :not(a) > img'`
 
 - Details:
 
diff --git a/docs/zh/plugins/features/medium-zoom.md b/docs/zh/plugins/features/medium-zoom.md
index 65fea05ef5..4ff5ed85b0 100644
--- a/docs/zh/plugins/features/medium-zoom.md
+++ b/docs/zh/plugins/features/medium-zoom.md
@@ -30,7 +30,7 @@ export default {
 
 - 类型： `string`
 
-- 默认值： `'[vp-content] :not(a) > img'`
+- 默认值： `'[vp-content] > img, [vp-content] :not(a) > img'`
 
 - 详情：
 

From 88eab22cb147f8c8856a064ce8c6068748f4bf8d Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 17:53:45 +0800
Subject: [PATCH 21/63] chore: tweaks

---
 docs/plugins/development/sass-palette/guide.md              | 6 +++---
 docs/plugins/markdown/markdown-image.md                     | 4 ++--
 docs/zh/plugins/development/sass-palette/guide.md           | 6 +++---
 docs/zh/plugins/markdown/markdown-image.md                  | 4 ++--
 .../plugin-comment/src/client/components/WalineComment.ts   | 2 +-
 .../plugin-sass-palette/styles/default/config.scss          | 4 ++--
 plugins/markdown/plugin-markdown-image/src/node/options.ts  | 4 ++--
 .../src/node/prepare/prepareClientConfigFile.ts             | 4 ++--
 themes/theme-default/src/client/styles/arrow.scss           | 2 +-
 themes/theme-default/src/client/styles/normalize.scss       | 2 +-
 themes/theme-default/src/client/styles/vars-dark.scss       | 2 +-
 themes/theme-default/templates/build.html                   | 2 +-
 12 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/docs/plugins/development/sass-palette/guide.md b/docs/plugins/development/sass-palette/guide.md
index c18334f53b..de229e6bae 100644
--- a/docs/plugins/development/sass-palette/guide.md
+++ b/docs/plugins/development/sass-palette/guide.md
@@ -103,7 +103,7 @@ If the Scss file is not imported directly, but is imported through `@use` or `@i
 
 ::: tip
 
-- If you are developing a plugin, you may set `$dark-selector: html[data-theme="dark"] !default;` in default config files, as our guideline is asking this.
+- If you are developing a plugin, you may set `$dark-selector: [data-theme="dark"] !default;` in default config files, as our guideline is asking this.
 
   Your plugin will work with most of theme, and users are still allowed to change this selector in config file if they are using a third-party theme with different dark selector.
 
@@ -180,7 +180,7 @@ $bg-color: (
 ) !default;
 ```
 
-Then if `$dark-selector` has a value `"html[data-theme="dark"]"` in config file, you will get:
+Then if `$dark-selector` has a value `"[data-theme="dark"]"` in config file, you will get:
 
 ```scss
 :root {
@@ -188,7 +188,7 @@ Then if `$dark-selector` has a value `"html[data-theme="dark"]"` in config file,
   --bg-color: #fff;
 }
 
-html[data-theme='dark'] {
+[data-theme='dark'] {
   --text-color: #999;
   --bg-color: #1e1e1e;
 }
diff --git a/docs/plugins/markdown/markdown-image.md b/docs/plugins/markdown/markdown-image.md
index f0751c05a6..908c275e4d 100644
--- a/docs/plugins/markdown/markdown-image.md
+++ b/docs/plugins/markdown/markdown-image.md
@@ -150,13 +150,13 @@ If the image is standalone in a line, wrapped or not wrapped by link, it will be
 ### lightmodeSelector
 
 - Type: `string`
-- Default: `'html[data-theme="light"]'`
+- Default: `'[data-theme="light"]'`
 - Details: The selector to detect light mode.
 
 ### darkmodeSelector
 
 - Type: `string`
-- Default: `'html[data-theme="dark"]'`
+- Default: `'[data-theme="dark"]'`
 - Details: The selector to detect dark mode.
 
 <script setup>
diff --git a/docs/zh/plugins/development/sass-palette/guide.md b/docs/zh/plugins/development/sass-palette/guide.md
index 723afda4a2..aa92c62bd7 100644
--- a/docs/zh/plugins/development/sass-palette/guide.md
+++ b/docs/zh/plugins/development/sass-palette/guide.md
@@ -101,7 +101,7 @@ $sidebar-width: 18rem !default;
 
 ::: tip
 
-- 如果你正在开发插件，你可以在默认配置文件中设置 `$dark-selector: html[data-theme="dark"] !default;`，因为这是社区对主题的推荐要求。
+- 如果你正在开发插件，你可以在默认配置文件中设置 `$dark-selector: [data-theme="dark"] !default;`，因为这是社区对主题的推荐要求。
 
   你的插件将在绝大多主题中正常工作，如果用户使用具有不同深色模式选择器的第三方主题，则用户可以在配置文件中更改此选择器。
 
@@ -178,7 +178,7 @@ $bg-color: (
 ) !default;
 ```
 
-然后，如果在配置文件中 `$dark-selector` 的值为 `"html[data-theme="dark"]"`，你会得到:
+然后，如果在配置文件中 `$dark-selector` 的值为 `"[data-theme="dark"]"`，你会得到:
 
 ```scss
 :root {
@@ -186,7 +186,7 @@ $bg-color: (
   --bg-color: #fff;
 }
 
-html[data-theme='dark'] {
+[data-theme='dark'] {
   --text-color: #999;
   --bg-color: #1e1e1e;
 }
diff --git a/docs/zh/plugins/markdown/markdown-image.md b/docs/zh/plugins/markdown/markdown-image.md
index 8b4f79a04d..c8c1af1822 100644
--- a/docs/zh/plugins/markdown/markdown-image.md
+++ b/docs/zh/plugins/markdown/markdown-image.md
@@ -149,13 +149,13 @@ interface ImageMarkOptions {
 ### lightmodeSelector
 
 - 类型：`string`
-- 默认值：`'html[data-theme="light"]'`
+- 默认值：`'[data-theme="light"]'`
 - 详情：日间模式的选择器。
 
 ### darkmodeSelector
 
 - 类型：`string`
-- 默认值：`'html[data-theme="dark"]'`
+- 默认值：`'[data-theme="dark"]'`
 - 详情：夜间模式的选择器。
 
 <script setup>
diff --git a/plugins/blog/plugin-comment/src/client/components/WalineComment.ts b/plugins/blog/plugin-comment/src/client/components/WalineComment.ts
index 6205f8d6db..fb6e178acf 100644
--- a/plugins/blog/plugin-comment/src/client/components/WalineComment.ts
+++ b/plugins/blog/plugin-comment/src/client/components/WalineComment.ts
@@ -66,7 +66,7 @@ export default defineComponent({
     const walineProps = computed(() => ({
       lang: lang.value === 'zh-CN' ? 'zh-CN' : 'en',
       locale: walineLocale.value,
-      dark: "html[data-theme='dark']",
+      dark: "[data-theme='dark']",
       ...walineOptions.value,
       path: props.identifier,
     }))
diff --git a/plugins/development/plugin-sass-palette/styles/default/config.scss b/plugins/development/plugin-sass-palette/styles/default/config.scss
index 3d6a9fd482..550a24c137 100644
--- a/plugins/development/plugin-sass-palette/styles/default/config.scss
+++ b/plugins/development/plugin-sass-palette/styles/default/config.scss
@@ -19,8 +19,8 @@ $mobile: 419px !default;
 $rtl-selector: 'html[dir="rtl"]' !default;
 
 /** dark mode selectors */
-$dark-selector: "html[data-theme='dark']" !default;
-$light-selector: "html[data-theme='light']" !default;
+$dark-selector: "[data-theme='dark']" !default;
+$light-selector: "[data-theme='light']" !default;
 
 /* Color list */
 $colors: #cf1322, #fa541c, #f39c12, #2ecc71, #25a55b, #10a5a5, #096dd9, #aa6fe9,
diff --git a/plugins/markdown/plugin-markdown-image/src/node/options.ts b/plugins/markdown/plugin-markdown-image/src/node/options.ts
index bb037648cb..64d80bc4fd 100644
--- a/plugins/markdown/plugin-markdown-image/src/node/options.ts
+++ b/plugins/markdown/plugin-markdown-image/src/node/options.ts
@@ -48,12 +48,12 @@ export interface MarkdownImagePluginOptions {
   obsidianSize?: boolean
 
   /**
-   * @default 'html[data-theme="light"]'
+   * @default '[data-theme="light"]'
    */
   lightmodeSelector?: string
 
   /**
-   * @default 'html[data-theme="dark"]'
+   * @default '[data-theme="dark"]'
    */
   darkmodeSelector?: string
 }
diff --git a/plugins/markdown/plugin-markdown-image/src/node/prepare/prepareClientConfigFile.ts b/plugins/markdown/plugin-markdown-image/src/node/prepare/prepareClientConfigFile.ts
index af623e82db..35d9326a19 100644
--- a/plugins/markdown/plugin-markdown-image/src/node/prepare/prepareClientConfigFile.ts
+++ b/plugins/markdown/plugin-markdown-image/src/node/prepare/prepareClientConfigFile.ts
@@ -7,8 +7,8 @@ import { prepareMarkStyleFile } from './prepareMarkStyleFile.js'
 export const prepareClientConfigFile = async (
   app: App,
   {
-    lightmodeSelector = 'html[data-theme="light"]',
-    darkmodeSelector = 'html[data-theme="dark"]',
+    lightmodeSelector = '[data-theme="light"]',
+    darkmodeSelector = '[data-theme="dark"]',
     figure,
     mark,
   }: MarkdownImagePluginOptions,
diff --git a/themes/theme-default/src/client/styles/arrow.scss b/themes/theme-default/src/client/styles/arrow.scss
index 731b25af5d..9235b58ad9 100644
--- a/themes/theme-default/src/client/styles/arrow.scss
+++ b/themes/theme-default/src/client/styles/arrow.scss
@@ -13,7 +13,7 @@
 
   transition: all 0.3s;
 
-  html[data-theme='dark'] & {
+  [data-theme='dark'] & {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
   }
 
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index 0ef5e5e396..a1a0391b10 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -5,7 +5,7 @@ body {
   accent-color: var(--vp-c-accent);
 }
 
-html[data-theme='dark'] {
+[data-theme='dark'] {
   color-scheme: dark;
 }
 
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index fd4af5ec27..8512f94a2a 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -1,4 +1,4 @@
-html[data-theme='dark'] {
+[data-theme='dark'] {
   // brand colors
   --vp-c-accent: #3aa675;
   --vp-c-accent-hover: #349469;
diff --git a/themes/theme-default/templates/build.html b/themes/theme-default/templates/build.html
index 88d4f346fd..d056a4e4e3 100644
--- a/themes/theme-default/templates/build.html
+++ b/themes/theme-default/templates/build.html
@@ -9,7 +9,7 @@
         --vp-c-bg: #fff;
       }
 
-      html[data-theme='dark'] {
+      [data-theme='dark'] {
         --vp-c-bg: #22272e;
       }
 

From d90c91550a2e65b12b1d7b7ebb30640d860f68b9 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 18:05:31 +0800
Subject: [PATCH 22/63] chore: tweaks

---
 e2e/docs/.vuepress/layouts/Category.vue                       | 4 ++--
 e2e/docs/.vuepress/layouts/Tag.vue                            | 4 ++--
 .../template/blog/.vuepress/layouts/Category.vue              | 4 ++--
 tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/e2e/docs/.vuepress/layouts/Category.vue b/e2e/docs/.vuepress/layouts/Category.vue
index 6380803d2c..d78ac91ca6 100644
--- a/e2e/docs/.vuepress/layouts/Category.vue
+++ b/e2e/docs/.vuepress/layouts/Category.vue
@@ -84,10 +84,10 @@ const categoryMap = useBlogCategory('category')
 
     &.route-link-active {
       background: var(--vp-c-accent);
-      color: #fff;
+      color: var(--vp-c-white);
 
       .category-num {
-        color: #fff;
+        color: var(--vp-c-white);
       }
     }
   }
diff --git a/e2e/docs/.vuepress/layouts/Tag.vue b/e2e/docs/.vuepress/layouts/Tag.vue
index b9a356f537..7c2f4163d0 100644
--- a/e2e/docs/.vuepress/layouts/Tag.vue
+++ b/e2e/docs/.vuepress/layouts/Tag.vue
@@ -84,10 +84,10 @@ const tagMap = useBlogCategory('tag')
 
     &.route-link-active {
       background: var(--vp-c-accent);
-      color: #fff;
+      color: var(--vp-c-white);
 
       .tag-num {
-        color: #fff;
+        color: var(--vp-c-white);
       }
     }
   }
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
index ff3d14f251..444a730fc2 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
@@ -84,10 +84,10 @@ const categoryMap = useBlogCategory('category')
 
     &.route-link-active {
       background: var(--vp-c-accent);
-      color: #fff;
+      color: var(--vp-c-white);
 
       .category-num {
-        color: #fff;
+        color: var(--vp-c-white);
       }
     }
   }
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
index 8273468c13..50f051547e 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
@@ -83,10 +83,10 @@ const tagMap = useBlogCategory('tag')
 
     &.route-link-active {
       background: var(--vp-c-accent);
-      color: #fff;
+      color: var(--vp-c-white);
 
       .tag-num {
-        color: #fff;
+        color: var(--vp-c-white);
       }
     }
   }

From d4e08ca538870f837614323d5e706440d4a61bcb Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 18:07:04 +0800
Subject: [PATCH 23/63] chore: tweaks

---
 themes/theme-default/src/client/components/VPHomeHero.vue   | 4 ++--
 themes/theme-default/src/client/components/global/Badge.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/themes/theme-default/src/client/components/VPHomeHero.vue b/themes/theme-default/src/client/components/VPHomeHero.vue
index 1ed24262e4..65ece6f6a0 100644
--- a/themes/theme-default/src/client/components/VPHomeHero.vue
+++ b/themes/theme-default/src/client/components/VPHomeHero.vue
@@ -177,7 +177,7 @@ const HomeHeroImage: FunctionalComponent = () => {
   &.primary {
     border-color: var(--vp-c-accent);
     background-color: var(--vp-c-accent);
-    color: #fff;
+    color: var(--vp-c-accent-text);
 
     &:hover {
       background-color: var(--vp-c-accent-hover);
@@ -191,7 +191,7 @@ const HomeHeroImage: FunctionalComponent = () => {
 
     &:hover {
       background-color: var(--vp-c-accent-hover);
-      color: #fff;
+      color: var(--vp-c-accent-text);
     }
   }
 }
diff --git a/themes/theme-default/src/client/components/global/Badge.vue b/themes/theme-default/src/client/components/global/Badge.vue
index 65cd9d8dcd..dcfb81198c 100644
--- a/themes/theme-default/src/client/components/global/Badge.vue
+++ b/themes/theme-default/src/client/components/global/Badge.vue
@@ -40,7 +40,7 @@ defineSlots<{
   padding: 0 6px;
   border-radius: 3px;
 
-  color: #fff;
+  color: var(--vp-c-accent-text);
 
   font-weight: 600;
   font-size: 14px;

From ec2e0046cecd53962590a11dbbe3d8e14d3d2ec4 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 18:42:18 +0800
Subject: [PATCH 24/63] chore: tweaks

---
 .../plugin-catalog/src/client/styles/catalog.scss         | 8 ++++----
 .../features/plugin-catalog/src/client/styles/vars.css    | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/plugins/features/plugin-catalog/src/client/styles/catalog.scss b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
index a76adde819..e1f16ed805 100644
--- a/plugins/features/plugin-catalog/src/client/styles/catalog.scss
+++ b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
@@ -120,7 +120,7 @@
     text-decoration: none;
 
     &:hover {
-      color: var(--vp-c-accent);
+      color: var(--catalog-c-accent);
     }
   }
 }
@@ -158,7 +158,7 @@
   padding: 4px 8px;
   border-radius: 6px;
 
-  background-color: var(--vp-c-bg-elv);
+  background-color: var(--catalog-c-bg-elv);
 
   line-height: 1.5;
   overflow-wrap: break-word;
@@ -168,8 +168,8 @@
     color 0.3s;
 
   &:hover {
-    background-color: var(--vp-c-accent-hover);
-    color: var(--vp-c-bg);
+    background-color: var(--catalog-c-accent-hover);
+    color: var(--catalog-c-accent-text);
     text-decoration: none !important;
   }
 }
diff --git a/plugins/features/plugin-catalog/src/client/styles/vars.css b/plugins/features/plugin-catalog/src/client/styles/vars.css
index 134a172a7a..f73cb2cdbf 100644
--- a/plugins/features/plugin-catalog/src/client/styles/vars.css
+++ b/plugins/features/plugin-catalog/src/client/styles/vars.css
@@ -1,4 +1,8 @@
 :root {
   --catalog-c-border: #e5e5e5;
+  --catalog-c-bg-elv: var(--vp-c-bg-elv);
+  --catalog-c-accent: var(--vp-c-accent);
+  --catalog-c-accent-hover: var(--vp-c-accent-hover);
+  --catalog-c-accent-text: var(--vp-c-accent-text);
   --catalog-header-offset: var(--navbar-height, 3.6rem);
 }

From 8b630d9380892c9321b0c05c57d4dde7243d4a64 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 18:44:36 +0800
Subject: [PATCH 25/63] chore: tweaks

---
 .../features/plugin-nprogress/src/client/styles/nprogress.css   | 2 +-
 plugins/features/plugin-nprogress/src/client/styles/vars.css    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/features/plugin-nprogress/src/client/styles/nprogress.css b/plugins/features/plugin-nprogress/src/client/styles/nprogress.css
index 670603e799..a405413d18 100644
--- a/plugins/features/plugin-nprogress/src/client/styles/nprogress.css
+++ b/plugins/features/plugin-nprogress/src/client/styles/nprogress.css
@@ -11,5 +11,5 @@
   width: 100%;
   height: 2px;
 
-  background: var(--nprogress-c-text);
+  background: var(--nprogress-c);
 }
diff --git a/plugins/features/plugin-nprogress/src/client/styles/vars.css b/plugins/features/plugin-nprogress/src/client/styles/vars.css
index c85f80c5ca..bb156a63c8 100644
--- a/plugins/features/plugin-nprogress/src/client/styles/vars.css
+++ b/plugins/features/plugin-nprogress/src/client/styles/vars.css
@@ -1,4 +1,4 @@
 :root {
-  --nprogress-c-text: var(--vp-c-accent, #29d);
+  --nprogress-c: var(--vp-c-accent);
   --nprogress-z-index: 1031;
 }

From 687095ca86d1f21eb548d887446386174c08860e Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 18:45:00 +0800
Subject: [PATCH 26/63] fix: revert

---
 .../plugin-docsearch/src/client/composables/useDocsearchShim.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/search/plugin-docsearch/src/client/composables/useDocsearchShim.ts b/plugins/search/plugin-docsearch/src/client/composables/useDocsearchShim.ts
index 82da72f4ce..54584a5e40 100644
--- a/plugins/search/plugin-docsearch/src/client/composables/useDocsearchShim.ts
+++ b/plugins/search/plugin-docsearch/src/client/composables/useDocsearchShim.ts
@@ -47,7 +47,7 @@ export const useDocsearchShim = (): Partial<DocSearchProps> => {
               return
             }
             event.preventDefault()
-            router.push(resolveRoutePathFromUrl(hit.url))
+            router.push(hit.url.replace(__VUEPRESS_BASE__, '/'))
           },
           children,
         },

From d6a488aa940d0e5a9a28d29d2010ba258ecf1a24 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 18:46:40 +0800
Subject: [PATCH 27/63] chore: tweaks

---
 plugins/features/plugin-catalog/src/client/styles/catalog.scss | 2 +-
 plugins/features/plugin-catalog/src/client/styles/vars.css     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/features/plugin-catalog/src/client/styles/catalog.scss b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
index e1f16ed805..d7e564d70b 100644
--- a/plugins/features/plugin-catalog/src/client/styles/catalog.scss
+++ b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
@@ -158,7 +158,7 @@
   padding: 4px 8px;
   border-radius: 6px;
 
-  background-color: var(--catalog-c-bg-elv);
+  background-color: var(--catalog-c-bg-alt);
 
   line-height: 1.5;
   overflow-wrap: break-word;
diff --git a/plugins/features/plugin-catalog/src/client/styles/vars.css b/plugins/features/plugin-catalog/src/client/styles/vars.css
index f73cb2cdbf..739b535fbe 100644
--- a/plugins/features/plugin-catalog/src/client/styles/vars.css
+++ b/plugins/features/plugin-catalog/src/client/styles/vars.css
@@ -1,6 +1,6 @@
 :root {
   --catalog-c-border: #e5e5e5;
-  --catalog-c-bg-elv: var(--vp-c-bg-elv);
+  --catalog-c-bg-alt: var(--vp-c-bg-alt);
   --catalog-c-accent: var(--vp-c-accent);
   --catalog-c-accent-hover: var(--vp-c-accent-hover);
   --catalog-c-accent-text: var(--vp-c-accent-text);

From 2c378d0d0f8f6f6dffb48eafe244a907ff65283e Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 18:49:35 +0800
Subject: [PATCH 28/63] chore: tweaks

---
 plugins/blog/plugin-feed/templates/atom.xsl | 66 +++++++++----------
 plugins/blog/plugin-feed/templates/rss.xsl  | 70 ++++++++++-----------
 2 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/plugins/blog/plugin-feed/templates/atom.xsl b/plugins/blog/plugin-feed/templates/atom.xsl
index a1b5315aff..ac613618d9 100644
--- a/plugins/blog/plugin-feed/templates/atom.xsl
+++ b/plugins/blog/plugin-feed/templates/atom.xsl
@@ -12,27 +12,27 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
         <style>
           :root {
-            --bg-color-back: #f8f8f8;
-            --bg-color-float: #fff;
-            --text-color: #2c3e50;
-            --border-color: #eaecef;
-            --border-color-dark: #cfd4db;
-            --code-bg-color: #ecf4fa;
+            --c-bg: #f8f8f8;
+            --c-bg-elv: #fff;
+            --c-text: #2c3e50;
+            --c-border: #eaecef;
+            --c-border-dark: #cfd4db;
+            --c-accent: #3eaf7c;
+            --code-c-bg: #ecf4fa;
             --code-c-text: #383a42;
-            --brand-color: #3eaf7c;
-            --font-family-mono: consolas, monaco, "Andale Mono", "Ubuntu Mono", monospace;
+            --mono-font-family: consolas, monaco, "Andale Mono", "Ubuntu Mono", monospace;
 
             color-scheme: light dark;
           }
 
           @media (prefers-color-scheme: dark) {
             :root {
-              --bg-color-back: #0d1117;
-              --bg-color-float: #161b22;
-              --text-color: #ccc;
-              --border-color: #30363d;
-              --border-color-dark: #394048;
-              --code-bg-color: #282c34;
+              --c-bg: #0d1117;
+              --c-bg-elv: #161b22;
+              --c-text: #ccc;
+              --c-border: #30363d;
+              --c-border-dark: #394048;
+              --code-c-bg: #282c34;
               --code-c-text: #abb2bf;
             }
           }
@@ -41,7 +41,7 @@
           body {
             margin: 0;
             padding: 0;
-            background: var(--bg-color-back);
+            background: var(--c-bg);
           }
 
           html {
@@ -50,11 +50,11 @@
 
           body {
             min-height: 100vh;
-            color: var(--text-color);
+            color: var(--c-text);
           }
 
           a {
-            color: var(--brand-color);
+            color: var(--c-accent);
             font-weight: 500;
             text-decoration: none;
             overflow-wrap: break-word;
@@ -66,13 +66,13 @@
             min-width: 1em;
             margin-inline: 0.125rem;
             padding: 0.25em;
-            border: 1px solid var(--border-color-dark);
+            border: 1px solid var(--c-border-dark);
             border-radius: 0.25em;
 
-            background: var(--bg-color-back);
+            background: var(--c-bg);
             box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 15%);
 
-            font-family: var(--font-family-mono);
+            font-family: var(--mono-font-family);
             line-height: 1;
             letter-spacing: -0.1em;
             text-align: center;
@@ -84,7 +84,7 @@
             padding: 1rem;
             border-radius: 6px;
 
-            background: var(--code-bg-color);
+            background: var(--code-c-bg);
             color: var(--code-c-text);
 
             direction: ltr;
@@ -98,7 +98,7 @@
             background: rgba(127 127 127 / 12%);
 
             font-size: 0.85em;
-            font-family: var(--font-family-mono);
+            font-family: var(--mono-font-family);
             overflow-wrap: break-word;
           }
 
@@ -117,7 +117,7 @@
           }
 
           p a code {
-            color: var(--brand-color);
+            color: var(--c-accent);
             font-weight: 400;
           }
 
@@ -146,7 +146,7 @@
 
           h2 {
             padding-bottom: 0.3rem;
-            border-bottom: 1px solid var(--border-color);
+            border-bottom: 1px solid var(--c-border);
             font-size: 1.65rem;
           }
 
@@ -199,7 +199,7 @@
 
           hr {
             border: 0;
-            border-top: 1px solid var(--border-color);
+            border-top: 1px solid var(--c-border);
           }
 
           table {
@@ -210,13 +210,13 @@
           }
 
           tr:nth-child(odd) {
-            background: var(--bg-color-back);
+            background: var(--c-bg);
           }
 
           th,
           td {
             padding: 0.6em 1em;
-            border: 1px solid var(--border-color-dark);
+            border: 1px solid var(--c-border-dark);
           } div[class*="language-"] {
             position: relative;
             border-radius: 6px;
@@ -302,7 +302,7 @@
             margin: 16px auto;
             border-radius: 0.5rem;
 
-            background: var(--bg-color-float);
+            background: var(--c-bg-elv);
             box-shadow: 2px 4px 8px rgba(0 0 0 / 15%);
 
             text-align: start;
@@ -322,12 +322,12 @@
 
           .atom-header {
             padding: 8px 16px;
-            background-color: var(--brand-color);
-            color: var(--bg-color-float);
+            background-color: var(--c-accent);
+            color: var(--c-bg-elv);
           }
 
           .atom-title {
-            border-bottom: 1px solid var(--bg-color-float);
+            border-bottom: 1px solid var(--c-bg-elv);
             font-weight: 600;
             font-size: 1.5rem;
             line-height: 1.75;
@@ -373,8 +373,8 @@
             padding: 6px 12px;
             border-radius: 8px;
 
-            background: var(--brand-color);
-            color: var(--bg-color-float);
+            background: var(--c-accent);
+            color: var(--c-bg-elv);
           }
 
           footer {
diff --git a/plugins/blog/plugin-feed/templates/rss.xsl b/plugins/blog/plugin-feed/templates/rss.xsl
index 3d751082a1..75170d8057 100644
--- a/plugins/blog/plugin-feed/templates/rss.xsl
+++ b/plugins/blog/plugin-feed/templates/rss.xsl
@@ -12,27 +12,27 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
         <style>
           :root {
-            --bg-color-back: #f8f8f8;
-            --bg-color-float: #fff;
-            --text-color: #2c3e50;
-            --border-color: #eaecef;
-            --border-color-dark: #cfd4db;
-            --code-bg-color: #ecf4fa;
+            --c-bg: #f8f8f8;
+            --c-bg-elv: #fff;
+            --c-text: #2c3e50;
+            --c-border: #eaecef;
+            --c-border-dark: #cfd4db;
+            --code-c-bg: #ecf4fa;
             --code-c-text: #383a42;
-            --brand-color: #3eaf7c;
-            --font-family-mono: consolas, monaco, "Andale Mono", "Ubuntu Mono", monospace;
+            --c-accent: #3eaf7c;
+            --mono-font-family: consolas, monaco, "Andale Mono", "Ubuntu Mono", monospace;
 
             color-scheme: light dark;
           }
 
           @media (prefers-color-scheme: dark) {
             :root {
-              --bg-color-back: #0d1117;
-              --bg-color-float: #161b22;
-              --text-color: #ccc;
-              --border-color: #30363d;
-              --border-color-dark: #394048;
-              --code-bg-color: #282c34;
+              --c-bg: #0d1117;
+              --c-bg-elv: #161b22;
+              --c-text: #ccc;
+              --c-border: #30363d;
+              --c-border-dark: #394048;
+              --code-c-bg: #282c34;
               --code-c-text: #abb2bf;
             }
           }
@@ -41,7 +41,7 @@
           body {
             margin: 0;
             padding: 0;
-            background: var(--bg-color-back);
+            background: var(--c-bg);
           }
 
           html {
@@ -50,11 +50,11 @@
 
           body {
             min-height: 100vh;
-            color: var(--text-color);
+            color: var(--c-text);
           }
 
           a {
-            color: var(--brand-color);
+            color: var(--c-accent);
             font-weight: 500;
             text-decoration: none;
             overflow-wrap: break-word;
@@ -66,13 +66,13 @@
             min-width: 1em;
             margin-inline: 0.125rem;
             padding: 0.25em;
-            border: 1px solid var(--border-color-dark);
+            border: 1px solid var(--c-border-dark);
             border-radius: 0.25em;
 
-            background: var(--bg-color-back);
+            background: var(--c-bg);
             box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 15%);
 
-            font-family: var(--font-family-mono);
+            font-family: var(--mono-font-family);
             line-height: 1;
             letter-spacing: -0.1em;
             text-align: center;
@@ -84,7 +84,7 @@
             padding: 1rem;
             border-radius: 6px;
 
-            background: var(--code-bg-color);
+            background: var(--code-c-bg);
             color: var(--code-c-text);
 
             direction: ltr;
@@ -98,7 +98,7 @@
             background: rgba(127 127 127 / 12%);
 
             font-size: 0.85em;
-            font-family: var(--font-family-mono);
+            font-family: var(--mono-font-family);
             overflow-wrap: break-word;
           }
 
@@ -117,7 +117,7 @@
           }
 
           p a code {
-            color: var(--brand-color);
+            color: var(--c-accent);
             font-weight: 400;
           }
 
@@ -146,7 +146,7 @@
 
           h2 {
             padding-bottom: 0.3rem;
-            border-bottom: 1px solid var(--border-color);
+            border-bottom: 1px solid var(--c-border);
             font-size: 1.65rem;
           }
 
@@ -199,7 +199,7 @@
 
           hr {
             border: 0;
-            border-top: 1px solid var(--border-color);
+            border-top: 1px solid var(--c-border);
           }
 
           table {
@@ -210,13 +210,13 @@
           }
 
           tr:nth-child(odd) {
-            background: var(--bg-color-back);
+            background: var(--c-bg);
           }
 
           th,
           td {
             padding: 0.6em 1em;
-            border: 1px solid var(--border-color-dark);
+            border: 1px solid var(--c-border-dark);
           } div[class*="language-"] {
             position: relative;
             border-radius: 6px;
@@ -284,8 +284,8 @@
             padding: 0.5rem 1rem;
             border-radius: 0.5rem;
 
-            background: var(--brand-color);
-            color: var(--bg-color-float);
+            background: var(--c-accent);
+            color: var(--c-bg-elv);
             font-weight: bold;
           }
 
@@ -307,7 +307,7 @@
             margin: 16px auto;
             border-radius: 8px;
 
-            background: var(--bg-color-float);
+            background: var(--c-bg-elv);
             box-shadow: 2px 4px 8px rgba(0 0 0 / 15%);
 
             text-align: start;
@@ -327,12 +327,12 @@
 
           .rss-header {
             padding: 8px 16px;
-            background-color: var(--brand-color);
-            color: var(--bg-color-float);
+            background-color: var(--c-accent);
+            color: var(--c-bg-elv);
           }
 
           .rss-title {
-            border-bottom: 1px solid var(--bg-color-float);
+            border-bottom: 1px solid var(--c-bg-elv);
             font-weight: 600;
             font-size: 1.5rem;
             line-height: 1.75;
@@ -372,8 +372,8 @@
             padding: 6px 12px;
             border-radius: 8px;
 
-            background: var(--brand-color);
-            color: var(--bg-color-float);
+            background: var(--c-accent);
+            color: var(--c-bg-elv);
           }
 
           footer {

From e5675d84d96fa0a43e42f53dae6fdcd1e3b24e8f Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 18:59:08 +0800
Subject: [PATCH 29/63] chore: tweaks

---
 .../styles/default/palette.scss               | 33 -------------------
 .../theme-default/src/client/styles/vars.scss |  1 +
 tools/helper/src/client/styles/colors.scss    |  3 ++
 3 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/plugins/development/plugin-sass-palette/styles/default/palette.scss b/plugins/development/plugin-sass-palette/styles/default/palette.scss
index 391dd1fc02..c81d21f7cd 100644
--- a/plugins/development/plugin-sass-palette/styles/default/palette.scss
+++ b/plugins/development/plugin-sass-palette/styles/default/palette.scss
@@ -4,31 +4,6 @@
 
 /** ensure default theme color */
 
-// background
-$vp-bg: 'var(--c-bg, #fff)';
-
-// background light
-$vp-bgl: 'var(--c-bg-light, #f3f4f5)';
-
-// background lighter
-$vp-bglt: 'var(--c-bg-lighter, #eeeeee)';
-
-// border-color
-$vp-brc: 'var(--c-border, #eaecef)';
-
-// border-color dark
-$vp-brcd: 'var(--c-border-dark, #dfe2e5)';
-
-// theme color
-$vp-tc: 'var(--vp-c-accent, #3eaf7c)';
-$vp-tcl: 'var(--vp-c-accent-hover, #4abf8a)';
-
-// color transition
-$vp-ct: 'var(--t-color, 0.3s ease)';
-
-// transform transition
-$vp-tt: 'var(--t-transform, 0.3s ease)';
-
 /** shadow */
 $box-shadow: (
   light: #f0f1f2,
@@ -40,10 +15,6 @@ $card-shadow: (
 ) !default;
 
 /* constants */
-$black: (
-  light: #000,
-  dark: #fff,
-) !default;
 $grey-dark: (
   light: #666,
   dark: #999,
@@ -52,10 +23,6 @@ $grey-light: (
   light: #999,
   dark: #666,
 ) !default;
-$white: (
-  light: #fff,
-  dark: #000,
-) !default;
 $grey-darker: (
   light: #333,
   dark: #bbb,
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 91621a6caf..36838c420d 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -2,6 +2,7 @@
   // accent colors
   --vp-c-accent: #3eaf7c;
   --vp-c-accent-hover: #4abf8a;
+  --vp-c-accent-text: var(--vp-c-white);
 
   // background colors
   --vp-c-bg: #fff;
diff --git a/tools/helper/src/client/styles/colors.scss b/tools/helper/src/client/styles/colors.scss
index 10bc17cc6a..de640e6526 100644
--- a/tools/helper/src/client/styles/colors.scss
+++ b/tools/helper/src/client/styles/colors.scss
@@ -41,6 +41,9 @@
 }
 
 [data-theme='dark'] {
+  --vp-c-white: #000;
+  --vp-c-black: #fff;
+
   // grey
   --vp-c-grey-text: #515c67;
   --vp-c-grey-hover: #414853;

From c4e7f02c1cd2be4a8aee0c40f3346208a3ba415d Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 19:01:37 +0800
Subject: [PATCH 30/63] fix: fix copy code css variables

---
 docs/plugins/features/copy-code.md                         | 2 +-
 docs/zh/plugins/features/copy-code.md                      | 2 +-
 .../plugin-copy-code/src/client/composables/useCopyCode.ts | 1 +
 .../plugin-copy-code/src/client/styles/copy-code.scss      | 7 -------
 .../features/plugin-copy-code/src/client/styles/vars.css   | 6 ++++++
 5 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 plugins/features/plugin-copy-code/src/client/styles/vars.css

diff --git a/docs/plugins/features/copy-code.md b/docs/plugins/features/copy-code.md
index 00ecff3ec5..a4640f0e8a 100644
--- a/docs/plugins/features/copy-code.md
+++ b/docs/plugins/features/copy-code.md
@@ -187,4 +187,4 @@ export default {
 
 You can customize the icon of the _copy button_ via CSS variables:
 
-@[code{1-6} css](@vuepress/plugin-copy-code/src/client/styles/copy-code.css)
+@[code{1-6} css](@vuepress/plugin-copy-code/src/client/styles/vars.css)
diff --git a/docs/zh/plugins/features/copy-code.md b/docs/zh/plugins/features/copy-code.md
index 76f99525d3..caf98c3e97 100644
--- a/docs/zh/plugins/features/copy-code.md
+++ b/docs/zh/plugins/features/copy-code.md
@@ -185,4 +185,4 @@ export default {
 
 你可以通过 CSS 变量来自定义*复制按钮*的样式：
 
-@[code{1-6} css](@vuepress/plugin-copy-code/src/client/styles/copy-code.css)
+@[code{1-6} css](@vuepress/plugin-copy-code/src/client/styles/vars.css)
diff --git a/plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts b/plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts
index 5500bb9973..58600491d4 100644
--- a/plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts
+++ b/plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts
@@ -5,6 +5,7 @@ import { usePageData } from 'vuepress/client'
 import type { CopyCodePluginLocaleConfig } from '../../shared/index.js'
 
 import '../styles/copy-code.css'
+import '../styles/vars.css'
 
 export interface UseCopyCodeOptions {
   locales: CopyCodePluginLocaleConfig
diff --git a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
index fa37a90bb7..2ecefe43b6 100644
--- a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
+++ b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
@@ -1,10 +1,3 @@
-:root {
-  --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
-  --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
-  --copy-code-c-text: var(--code-line-number-color, #9e9e9e);
-  --copy-code-c-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
-}
-
 .vp-copy-code-button {
   position: absolute;
   top: 0.5em;
diff --git a/plugins/features/plugin-copy-code/src/client/styles/vars.css b/plugins/features/plugin-copy-code/src/client/styles/vars.css
new file mode 100644
index 0000000000..4c4040d5f0
--- /dev/null
+++ b/plugins/features/plugin-copy-code/src/client/styles/vars.css
@@ -0,0 +1,6 @@
+:root {
+  --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
+  --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
+  --copy-code-c-text: var(--code-line-number-color, #9e9e9e);
+  --copy-code-c-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
+}

From 34b6c8934eed1d861bacf621a809351f0e7ac367 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 19:11:15 +0800
Subject: [PATCH 31/63] chore: tweaks

---
 docs/themes/guidelines.md                        |  8 ++++++++
 .../src/client/styles/catalog.scss               |  6 +++---
 .../plugin-catalog/src/client/styles/vars.css    |  3 ++-
 .../pwa/plugin-pwa/src/client/styles/modal.scss  | 16 ++++++++--------
 .../pwa/plugin-pwa/src/client/styles/popup.scss  |  6 +++---
 .../pwa/plugin-pwa/src/client/styles/vars.css    |  6 +++---
 .../src/client/styles/redirect-modal.scss        |  4 ++--
 .../plugin-redirect/src/client/styles/vars.css   |  4 ++--
 8 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/docs/themes/guidelines.md b/docs/themes/guidelines.md
index 1da4cb7ef2..ce3379c748 100644
--- a/docs/themes/guidelines.md
+++ b/docs/themes/guidelines.md
@@ -56,3 +56,11 @@ Accent color and brand colors which used for interactive components.
 - `--vp-c-border`: Border color for interactive components. For example this should be used for a button outline.
 - `--vp-c-divider`: Color for separators, used to divide sections within the same components, such as having separator on "h2" heading.
 - `--vp-c-gutter`: Colors for gutter, used to divide components in the page. For example the header and the lest of the page.
+
+## Controls
+
+- `--vp-c-control-text`: Text color for focus state of interactive controls.
+- `--vp-c-control-bg`: Background color for interactive controls, such as buttons or checkboxes.
+- `--vp-c-control-hover`: Background color for hover state of interactive controls.
+- `--vp-c-control-active`: Background color for active or focus state of interactive controls.
+- `--vp-c-control-disabled`: Color for disabled state of interactive controls.
diff --git a/plugins/features/plugin-catalog/src/client/styles/catalog.scss b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
index d7e564d70b..32f7eab379 100644
--- a/plugins/features/plugin-catalog/src/client/styles/catalog.scss
+++ b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
@@ -158,7 +158,7 @@
   padding: 4px 8px;
   border-radius: 6px;
 
-  background-color: var(--catalog-c-bg-alt);
+  background-color: var(--catalog-c-control-bg);
 
   line-height: 1.5;
   overflow-wrap: break-word;
@@ -168,8 +168,8 @@
     color 0.3s;
 
   &:hover {
-    background-color: var(--catalog-c-accent-hover);
-    color: var(--catalog-c-accent-text);
+    background-color: var(--catalog-c-control-hover);
+    color: var(--catalog-c-accent);
     text-decoration: none !important;
   }
 }
diff --git a/plugins/features/plugin-catalog/src/client/styles/vars.css b/plugins/features/plugin-catalog/src/client/styles/vars.css
index 739b535fbe..fd69e888ea 100644
--- a/plugins/features/plugin-catalog/src/client/styles/vars.css
+++ b/plugins/features/plugin-catalog/src/client/styles/vars.css
@@ -1,8 +1,9 @@
 :root {
   --catalog-c-border: #e5e5e5;
-  --catalog-c-bg-alt: var(--vp-c-bg-alt);
   --catalog-c-accent: var(--vp-c-accent);
   --catalog-c-accent-hover: var(--vp-c-accent-hover);
   --catalog-c-accent-text: var(--vp-c-accent-text);
+  --catalog-c-control-bg: var(--vp-c-bg-alt);
+  --catalog-c-control-hover: var(--vp-c-bg-alt);
   --catalog-header-offset: var(--navbar-height, 3.6rem);
 }
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
index d475f9738a..81b0590619 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
@@ -40,8 +40,8 @@
   border-width: 0;
   border-radius: 1.2rem;
 
-  background: var(--pwa-button-c-bg);
-  color: var(--pwa-button-c-text);
+  background: var(--pwa-c-control-bg);
+  color: var(--pwa-c-control-text);
   outline: none;
 
   font-weight: 600;
@@ -63,7 +63,7 @@
 
   &:hover,
   &:active {
-    background: var(--pwa-button-c-bg-hover);
+    background: var(--pwa-c-control-hover);
   }
 }
 
@@ -387,7 +387,7 @@
     min-width: 80px;
     margin: 0.5rem 1rem;
     padding: 0.5rem 1rem;
-    border: 2px solid var(--pwa-button-c-bg);
+    border: 2px solid var(--pwa-c-control-bg);
     border-radius: 20px;
 
     background: transparent;
@@ -399,7 +399,7 @@
   }
 
   .install-button {
-    background: var(--pwa-button-c-bg);
+    background: var(--pwa-c-control-bg);
     color: var(--pwa-c-bg);
     transition: color 0.3s;
 
@@ -411,17 +411,17 @@
 
     &:hover,
     &:focus {
-      background: var(--pwa-button-c-bg-hover);
+      background: var(--pwa-c-control-hover);
     }
   }
 
   .cancel-button {
     background: transparent;
-    color: var(--pwa-button-c-bg);
+    color: var(--pwa-c-control-bg);
 
     &:hover,
     &:focus {
-      background: var(--pwa-button-c-bg-hover);
+      background: var(--pwa-c-control-hover);
       color: var(--pwa-c-bg);
     }
   }
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/popup.scss b/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
index b4f9d0205f..a3af4068ed 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
@@ -58,10 +58,10 @@
     margin-inline-start: 0.4rem;
     border-radius: 0.75rem;
 
-    background: var(--pwa-button-c-bg);
+    background: var(--pwa-c-control-bg);
 
     &:hover {
-      background: var(--pwa-button-c-bg-hover);
+      background: var(--pwa-c-control-hover);
     }
 
     svg {
@@ -69,7 +69,7 @@
       height: 1.2rem;
       margin: 0.15rem;
 
-      color: var(--pwa-button-c-text);
+      color: var(--pwa-c-control-text);
 
       animation: rotate 3s ease infinite;
     }
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/vars.css b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
index 09ef554ffb..a53541c242 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/vars.css
+++ b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
@@ -4,8 +4,8 @@
   --pwa-c-bg: #fff;
   --pwa-c-border: #3eaf7c;
   --pwa-c-shadow: rgb(0 0 0 / 15%);
-  --pwa-button-c-text: #fff;
-  --pwa-button-c-bg: #3eaf7c;
-  --pwa-button-c-bg-hover: #4abf8a;
+  --pwa-c-control-text: #fff;
+  --pwa-c-control-bg: #3eaf7c;
+  --pwa-c-control-hover: #4abf8a;
   --pwa-content-light-color: #666;
 }
diff --git a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
index 331c7bda9f..93cd08be9d 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
+++ b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
@@ -47,13 +47,13 @@
   border: none;
   border-radius: 8px;
 
-  background-color: var(--redirect-c-bg-lighter);
+  background-color: var(--redirect-c-control-bg);
   color: inherit;
 
   cursor: pointer;
 
   &:hover {
-    background-color: var(--redirect-c-bg-light);
+    background-color: var(--redirect-c-control-hover);
   }
 
   &.primary {
diff --git a/plugins/tools/plugin-redirect/src/client/styles/vars.css b/plugins/tools/plugin-redirect/src/client/styles/vars.css
index 1cc7a3206b..916877088a 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/vars.css
+++ b/plugins/tools/plugin-redirect/src/client/styles/vars.css
@@ -1,8 +1,8 @@
 :root {
   --redirect-z-index: 1499;
   --redirect-c-bg: #fff;
-  --redirect-c-bg-light: #f3f4f5;
-  --redirect-c-bg-lighter: #eee;
+  --redirect-c-control-bg: #f3f4f5;
+  --redirect-c-control-hover: #eee;
   --redirect-c-text: #2c3e50;
   --redirect-c-accent: #3eaf7c;
   --redirect-c-accent-hover: #4abf8a;

From c5641501207dc64d59651224acf67f726914ecbe Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 19:12:57 +0800
Subject: [PATCH 32/63] chore: tweaks

---
 plugins/features/plugin-notice/src/client/styles/notice.scss | 4 ++--
 plugins/features/plugin-notice/src/client/styles/vars.css    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/features/plugin-notice/src/client/styles/notice.scss b/plugins/features/plugin-notice/src/client/styles/notice.scss
index 454ae0c548..45bd61e190 100644
--- a/plugins/features/plugin-notice/src/client/styles/notice.scss
+++ b/plugins/features/plugin-notice/src/client/styles/notice.scss
@@ -101,13 +101,13 @@
   border: none;
   border-radius: 8px;
 
-  background-color: var(--notice-c-button);
+  background-color: var(--notice-c-control-bg);
   color: var(--notice-c-text);
 
   cursor: pointer;
 
   &:hover {
-    background-color: var(--notice-c-button-hover);
+    background-color: var(--notice-c-control-hover);
   }
 
   &.primary {
diff --git a/plugins/features/plugin-notice/src/client/styles/vars.css b/plugins/features/plugin-notice/src/client/styles/vars.css
index 1ee0e4b284..57d35c40cb 100644
--- a/plugins/features/plugin-notice/src/client/styles/vars.css
+++ b/plugins/features/plugin-notice/src/client/styles/vars.css
@@ -6,6 +6,6 @@
   --notice-c-accent: #3eaf7c;
   --notice-c-accent-hover: #71cda3;
   --notice-c-accent-text: #fff;
-  --notice-c-button: #f8f8f8;
-  --notice-c-button-hover: #efeef4;
+  --notice-c-control-bg: #f8f8f8;
+  --notice-c-control-hover: #efeef4;
 }

From f86bedefcb8367388957863adf4da78c8d7a2b37 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 19:16:03 +0800
Subject: [PATCH 33/63] chore: tweaks

---
 docs/themes/guidelines.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/themes/guidelines.md b/docs/themes/guidelines.md
index ce3379c748..3c389f238e 100644
--- a/docs/themes/guidelines.md
+++ b/docs/themes/guidelines.md
@@ -46,7 +46,8 @@ Accent color and brand colors which used for interactive components.
 
 - `--vp-c-accent`: The most solid color used mainly for colored text. It must satisfy the contrast ratio against when used on top of `--vp-c-accent-soft`.
 - `--vp-c-accent-hover`: Color used for hover state.
-- `--vp-c-accent-bg`: Color used for solid background. It must satisfy the contrast ratio with pure white (#ffffff) text on top of it.
+- `--vp-c-accent-bg`: Color used for solid background. It must satisfy the contrast ratio with `--vp-c-accent-text` on top of it.
+- `--vp-c-accent-text`: Color used for text with `--vp-c-accent-bg` background. It must satisfy the contrast ratio with `--vp-c-accent-bg`.
 - `--vp-c-accent-soft`: The color used for subtle background such as custom container or badges. It must satisfy the contrast ratio when putting `--vp-c-accent` colors on top of it.
 
   The soft color must be semi transparent alpha channel. This is crucial because it allows adding multiple "soft" colors on top of each other to create a accent, such as when having inline code block inside custom containers.

From a444a949258e04a95e35d61545c05fe2991ac5ff Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 19:18:44 +0800
Subject: [PATCH 34/63] chore: tweaks

---
 .../plugin-redirect/src/client/styles/vars.css     | 14 +++++++-------
 themes/theme-default/src/client/styles/vars.scss   | 11 -----------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/plugins/tools/plugin-redirect/src/client/styles/vars.css b/plugins/tools/plugin-redirect/src/client/styles/vars.css
index 916877088a..4513fd50b3 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/vars.css
+++ b/plugins/tools/plugin-redirect/src/client/styles/vars.css
@@ -1,10 +1,10 @@
 :root {
   --redirect-z-index: 1499;
-  --redirect-c-bg: #fff;
-  --redirect-c-control-bg: #f3f4f5;
-  --redirect-c-control-hover: #eee;
-  --redirect-c-text: #2c3e50;
-  --redirect-c-accent: #3eaf7c;
-  --redirect-c-accent-hover: #4abf8a;
-  --redirect-c-accent-text: #fff;
+  --redirect-c-bg: var(--vp-c-bg-elv);
+  --redirect-c-text: var(--vp-c-text);
+  --redirect-c-accent: var(--vp-c-accent);
+  --redirect-c-accent-hover: var(--vp-c-accent-hover);
+  --redirect-c-accent-text: var(--vp-c-accent-text);
+  --redirect-c-control-bg: var(--vp-c-control-bg);
+  --redirect-c-control-hover: var(--vp-c-control-hover);
 }
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 36838c420d..2818f80134 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -154,17 +154,6 @@ body {
   --pwa-btn-hover-bg-color: var(--vp-c-accent-hover);
 }
 
-// plugin-redirect
-.redirect-modal-mask {
-  --redirect-bg-color: var(--vp-c-bg);
-  --redirect-bg-color-light: var(--c-bg-light);
-  --redirect-bg-color-lighter: var(--c-bg-lighter);
-  --redirect-text-color: var(--vp-c-text);
-  --redirect-primary-color: var(--vp-c-accent);
-  --redirect-primary-hover-color: var(--vp-c-accent-hover);
-  --redirect-primary-text-color: var(--vp-c-bg);
-}
-
 // plugin-search
 .search-box {
   --search-bg-color: var(--vp-c-bg);

From 5bfbec3cb48515f5eb1a09720816b98d35fdf60d Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:00:56 +0800
Subject: [PATCH 35/63] chore: tweaks

---
 docs/themes/guidelines.md                     |  2 +-
 .../src/client/styles/catalog.scss            |  2 +-
 .../plugin-catalog/src/client/styles/vars.css |  2 +-
 .../src/client/styles/notice.scss             |  6 +---
 .../plugin-notice/src/client/styles/vars.css  | 15 +++++-----
 .../src/client/styles/photo-swipe.css         |  4 +--
 .../src/client/styles/vars.css                |  4 +--
 .../plugin-pwa/src/client/styles/modal.scss   | 30 +++++++++----------
 .../plugin-pwa/src/client/styles/popup.scss   |  6 ++--
 .../pwa/plugin-pwa/src/client/styles/vars.css | 12 ++++----
 .../src/client/styles/redirect-modal.scss     |  2 +-
 .../src/client/styles/vars.css                |  2 +-
 .../src/client/styles/vars-dark.scss          |  2 --
 .../theme-default/src/client/styles/vars.scss | 30 -------------------
 14 files changed, 42 insertions(+), 77 deletions(-)

diff --git a/docs/themes/guidelines.md b/docs/themes/guidelines.md
index 3c389f238e..21431f50fa 100644
--- a/docs/themes/guidelines.md
+++ b/docs/themes/guidelines.md
@@ -61,7 +61,7 @@ Accent color and brand colors which used for interactive components.
 ## Controls
 
 - `--vp-c-control-text`: Text color for focus state of interactive controls.
-- `--vp-c-control-bg`: Background color for interactive controls, such as buttons or checkboxes.
+- `--vp-c-control`: Background color for interactive controls, such as buttons or checkboxes.
 - `--vp-c-control-hover`: Background color for hover state of interactive controls.
 - `--vp-c-control-active`: Background color for active or focus state of interactive controls.
 - `--vp-c-control-disabled`: Color for disabled state of interactive controls.
diff --git a/plugins/features/plugin-catalog/src/client/styles/catalog.scss b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
index 32f7eab379..05cd112462 100644
--- a/plugins/features/plugin-catalog/src/client/styles/catalog.scss
+++ b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
@@ -158,7 +158,7 @@
   padding: 4px 8px;
   border-radius: 6px;
 
-  background-color: var(--catalog-c-control-bg);
+  background-color: var(--catalog-c-control);
 
   line-height: 1.5;
   overflow-wrap: break-word;
diff --git a/plugins/features/plugin-catalog/src/client/styles/vars.css b/plugins/features/plugin-catalog/src/client/styles/vars.css
index fd69e888ea..97744b0c7a 100644
--- a/plugins/features/plugin-catalog/src/client/styles/vars.css
+++ b/plugins/features/plugin-catalog/src/client/styles/vars.css
@@ -3,7 +3,7 @@
   --catalog-c-accent: var(--vp-c-accent);
   --catalog-c-accent-hover: var(--vp-c-accent-hover);
   --catalog-c-accent-text: var(--vp-c-accent-text);
-  --catalog-c-control-bg: var(--vp-c-bg-alt);
+  --catalog-c-control: var(--vp-c-bg-alt);
   --catalog-c-control-hover: var(--vp-c-bg-alt);
   --catalog-header-offset: var(--navbar-height, 3.6rem);
 }
diff --git a/plugins/features/plugin-notice/src/client/styles/notice.scss b/plugins/features/plugin-notice/src/client/styles/notice.scss
index 45bd61e190..31563cb0ea 100644
--- a/plugins/features/plugin-notice/src/client/styles/notice.scss
+++ b/plugins/features/plugin-notice/src/client/styles/notice.scss
@@ -1,7 +1,3 @@
-:root {
-  --notice-width: 250px;
-}
-
 .notice-fade-enter-active,
 .notice-fade-leave-active {
   transition: opacity 0.5s;
@@ -101,7 +97,7 @@
   border: none;
   border-radius: 8px;
 
-  background-color: var(--notice-c-control-bg);
+  background-color: var(--notice-c-control);
   color: var(--notice-c-text);
 
   cursor: pointer;
diff --git a/plugins/features/plugin-notice/src/client/styles/vars.css b/plugins/features/plugin-notice/src/client/styles/vars.css
index 57d35c40cb..c5bc115ed0 100644
--- a/plugins/features/plugin-notice/src/client/styles/vars.css
+++ b/plugins/features/plugin-notice/src/client/styles/vars.css
@@ -1,11 +1,12 @@
 :root {
+  --notice-width: 250px;
   --notice-z-index: 1500;
-  --notice-c-text: #2c3e50;
-  --notice-c-bg: #fff;
+  --notice-c-text: var(--vp-c-text);
+  --notice-c-bg: var(--vp-c-bg-elv);
   --notice-c-shadow: rgb(0 0 0 / 20%);
-  --notice-c-accent: #3eaf7c;
-  --notice-c-accent-hover: #71cda3;
-  --notice-c-accent-text: #fff;
-  --notice-c-control-bg: #f8f8f8;
-  --notice-c-control-hover: #efeef4;
+  --notice-c-accent: var(--vp-c-accent);
+  --notice-c-accent-hover: var(--vp-c-accent-hover);
+  --notice-c-accent-text: var(--vp-c-accent-text);
+  --notice-c-control: var(--vp-c-control);
+  --notice-c-control-hover: var(--vp-c-control-hover);
 }
diff --git a/plugins/features/plugin-photo-swipe/src/client/styles/photo-swipe.css b/plugins/features/plugin-photo-swipe/src/client/styles/photo-swipe.css
index 113d8ac55d..d679eefc77 100644
--- a/plugins/features/plugin-photo-swipe/src/client/styles/photo-swipe.css
+++ b/plugins/features/plugin-photo-swipe/src/client/styles/photo-swipe.css
@@ -25,7 +25,7 @@
   margin: 0 5px;
   border-radius: 3px;
 
-  background: var(--photo-swipe-bullet);
+  background: var(--photo-swipe-c-bullet);
 
   transition:
     width 0.3s,
@@ -34,5 +34,5 @@
 
 .photo-swipe-bullet.active {
   width: 30px;
-  background: var(--photo-swipe-bullet-active);
+  background: var(--photo-swipe-c-bullet-active);
 }
diff --git a/plugins/features/plugin-photo-swipe/src/client/styles/vars.css b/plugins/features/plugin-photo-swipe/src/client/styles/vars.css
index b721a131d3..cf147ed655 100644
--- a/plugins/features/plugin-photo-swipe/src/client/styles/vars.css
+++ b/plugins/features/plugin-photo-swipe/src/client/styles/vars.css
@@ -1,4 +1,4 @@
 :root {
-  --photo-swipe-bullet: #fff;
-  --photo-swipe-bullet-active: #3eaf7c;
+  --photo-swipe-c-bullet: var(--vp-c-bg-elv);
+  --photo-swipe-c-bullet-active: var(--vp-c-accent);
 }
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
index 81b0590619..df35657a6e 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
@@ -40,8 +40,8 @@
   border-width: 0;
   border-radius: 1.2rem;
 
-  background: var(--pwa-c-control-bg);
-  color: var(--pwa-c-control-text);
+  background: var(--pwa-c-accent);
+  color: var(--pwa-c-accent-text);
   outline: none;
 
   font-weight: 600;
@@ -63,7 +63,7 @@
 
   &:hover,
   &:active {
-    background: var(--pwa-c-control-hover);
+    background: var(--pwa-c-accent-hover);
   }
 }
 
@@ -387,7 +387,6 @@
     min-width: 80px;
     margin: 0.5rem 1rem;
     padding: 0.5rem 1rem;
-    border: 2px solid var(--pwa-c-control-bg);
     border-radius: 20px;
 
     background: transparent;
@@ -399,30 +398,29 @@
   }
 
   .install-button {
-    background: var(--pwa-c-control-bg);
-    color: var(--pwa-c-bg);
+    background: var(--pwa-c-accent);
+    color: var(--pwa-c-accent-text);
     transition: color 0.3s;
 
-    @media (max-width: 419px) {
-      span {
-        display: none;
-      }
-    }
-
     &:hover,
     &:focus {
-      background: var(--pwa-c-control-hover);
+      background: var(--pwa-c-accent-hover);
+    }
+
+    span {
+      @media (max-width: 419px) {
+        display: none;
+      }
     }
   }
 
   .cancel-button {
-    background: transparent;
-    color: var(--pwa-c-control-bg);
+    background: var(--pwa-c-control);
+    color: var(--pwa-c-control-text);
 
     &:hover,
     &:focus {
       background: var(--pwa-c-control-hover);
-      color: var(--pwa-c-bg);
     }
   }
 
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/popup.scss b/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
index a3af4068ed..6977b9d4f3 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/popup.scss
@@ -58,10 +58,10 @@
     margin-inline-start: 0.4rem;
     border-radius: 0.75rem;
 
-    background: var(--pwa-c-control-bg);
+    background: var(--pwa-c-accent);
 
     &:hover {
-      background: var(--pwa-c-control-hover);
+      background: var(--pwa-c-accent-hover);
     }
 
     svg {
@@ -69,7 +69,7 @@
       height: 1.2rem;
       margin: 0.15rem;
 
-      color: var(--pwa-c-control-text);
+      color: var(--pwa-c-accent-text);
 
       animation: rotate 3s ease infinite;
     }
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/vars.css b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
index a53541c242..064c1c3012 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/vars.css
+++ b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
@@ -1,11 +1,13 @@
 :root {
   --pwa-z-index: 10;
-  --pwa-c-text: #2c3e50;
-  --pwa-c-bg: #fff;
-  --pwa-c-border: #3eaf7c;
+  --pwa-c-bg: var(--vp-c-bg-elv);
+  --pwa-c-text: var(--vp-c-text);
   --pwa-c-shadow: rgb(0 0 0 / 15%);
-  --pwa-c-control-text: #fff;
-  --pwa-c-control-bg: #3eaf7c;
+  --pwa-c-accent: var(--vp-c-accent);
+  --pwa-c-accent-hover: var(--vp-c-accent-hover);
+  --pwa-c-accent-text: var(--vp-c-accent-text);
+  --pwa-c-control: #3eaf7c;
   --pwa-c-control-hover: #4abf8a;
+  --pwa-c-control-text: #fff;
   --pwa-content-light-color: #666;
 }
diff --git a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
index 93cd08be9d..b7dd85ae6c 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
+++ b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
@@ -47,7 +47,7 @@
   border: none;
   border-radius: 8px;
 
-  background-color: var(--redirect-c-control-bg);
+  background-color: var(--redirect-c-control);
   color: inherit;
 
   cursor: pointer;
diff --git a/plugins/tools/plugin-redirect/src/client/styles/vars.css b/plugins/tools/plugin-redirect/src/client/styles/vars.css
index 4513fd50b3..2f02f9931f 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/vars.css
+++ b/plugins/tools/plugin-redirect/src/client/styles/vars.css
@@ -5,6 +5,6 @@
   --redirect-c-accent: var(--vp-c-accent);
   --redirect-c-accent-hover: var(--vp-c-accent-hover);
   --redirect-c-accent-text: var(--vp-c-accent-text);
-  --redirect-c-control-bg: var(--vp-c-control-bg);
+  --redirect-c-control: var(--vp-c-control);
   --redirect-c-control-hover: var(--vp-c-control-hover);
 }
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 8512f94a2a..c0852bee8f 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -66,8 +66,6 @@
 
   // plugin-pwa
   body {
-    --pwa-shadow-color: rgb(0 0 0 / 30%);
-    --pwa-content-color: #ccc;
     --pwa-content-light-color: #999;
   }
 }
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 2818f80134..e634e36847 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -124,36 +124,6 @@
   --medium-zoom-bg-color: var(--vp-c-bg);
 }
 
-// plugin-notice
-.vp-notice-wrapper {
-  --notice-color: var(--vp-c-text);
-  --notice-bg-color: var(--vp-c-bg);
-  --notice-primary-color: var(--vp-c-accent);
-  --notice-primary-text-color: var(--vp-c-bg);
-  --notice-primary-hover-color: var(--vp-c-accent-hover);
-  --notice-button-color: var(--c-bg-light);
-  --notice-button-hover-color: var(--c-bg-lighter);
-}
-
-// plugin-nprogress
-#nprogress {
-  --nprogress-color: var(--vp-c-accent);
-}
-
-body {
-  // plugin-photo-swipe
-  --photo-swipe-bullet: var(--vp-c-bg);
-  --photo-swipe-bullet-active: var(--vp-c-accent);
-
-  // plugin-pwa-popup
-  --pwa-text-color: var(--vp-c-text);
-  --pwa-bg-color: var(--vp-c-bg);
-  --pwa-border-color: var(--vp-c-accent);
-  --pwa-btn-text-color: var(--vp-c-bg);
-  --pwa-btn-bg-color: var(--vp-c-accent);
-  --pwa-btn-hover-bg-color: var(--vp-c-accent-hover);
-}
-
 // plugin-search
 .search-box {
   --search-bg-color: var(--vp-c-bg);

From d90631eca1a0dae3f5a9e6e3e7bd6fdf3656938a Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:04:54 +0800
Subject: [PATCH 36/63] chore: tweaks

---
 themes/theme-default/src/client/composables/useDarkMode.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/themes/theme-default/src/client/composables/useDarkMode.ts b/themes/theme-default/src/client/composables/useDarkMode.ts
index e15336d25d..b78b2c8ee7 100644
--- a/themes/theme-default/src/client/composables/useDarkMode.ts
+++ b/themes/theme-default/src/client/composables/useDarkMode.ts
@@ -14,7 +14,6 @@ const applyDarkmodeToHTML = (isDarkMode: DarkModeRef): void => {
     // set `class="dark"` on `<html>` element
     const el = window!.document.documentElement
 
-    el.classList.toggle('dark', value)
     // set `data-theme="light|dark"` on `<html>` element
     el.dataset.theme = value ? 'dark' : 'light'
   }

From 0e10b2363b1d669239b7030b4a30c2ef27d96e0f Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:06:28 +0800
Subject: [PATCH 37/63] chore: tweaks

---
 e2e/docs/.vuepress/layouts/Category.vue                       | 4 ++--
 e2e/docs/.vuepress/layouts/Tag.vue                            | 4 ++--
 .../template/blog/.vuepress/layouts/Category.vue              | 4 ++--
 tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/e2e/docs/.vuepress/layouts/Category.vue b/e2e/docs/.vuepress/layouts/Category.vue
index d78ac91ca6..4ddf72686e 100644
--- a/e2e/docs/.vuepress/layouts/Category.vue
+++ b/e2e/docs/.vuepress/layouts/Category.vue
@@ -84,10 +84,10 @@ const categoryMap = useBlogCategory('category')
 
     &.route-link-active {
       background: var(--vp-c-accent);
-      color: var(--vp-c-white);
+      color: var(--vp-c-accent-text);
 
       .category-num {
-        color: var(--vp-c-white);
+        color: var(--vp-c-accent-text);
       }
     }
   }
diff --git a/e2e/docs/.vuepress/layouts/Tag.vue b/e2e/docs/.vuepress/layouts/Tag.vue
index 7c2f4163d0..00aadcfa83 100644
--- a/e2e/docs/.vuepress/layouts/Tag.vue
+++ b/e2e/docs/.vuepress/layouts/Tag.vue
@@ -84,10 +84,10 @@ const tagMap = useBlogCategory('tag')
 
     &.route-link-active {
       background: var(--vp-c-accent);
-      color: var(--vp-c-white);
+      color: var(--vp-c-accent-text);
 
       .tag-num {
-        color: var(--vp-c-white);
+        color: var(--vp-c-accent-text);
       }
     }
   }
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
index 444a730fc2..ecb788ec98 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
@@ -84,10 +84,10 @@ const categoryMap = useBlogCategory('category')
 
     &.route-link-active {
       background: var(--vp-c-accent);
-      color: var(--vp-c-white);
+      color: var(--vp-c-accent-text);
 
       .category-num {
-        color: var(--vp-c-white);
+        color: var(--vp-c-accent-text);
       }
     }
   }
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
index 50f051547e..b43e3d0751 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
@@ -83,10 +83,10 @@ const tagMap = useBlogCategory('tag')
 
     &.route-link-active {
       background: var(--vp-c-accent);
-      color: var(--vp-c-white);
+      color: var(--vp-c-accent-text);
 
       .tag-num {
-        color: var(--vp-c-white);
+        color: var(--vp-c-accent-text);
       }
     }
   }

From bcbb3d625a8fb7d7e9b67c53822d6fcdd405d56f Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:07:24 +0800
Subject: [PATCH 38/63] chore: tweaks

---
 tools/helper/src/client/styles/normalize.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/helper/src/client/styles/normalize.scss b/tools/helper/src/client/styles/normalize.scss
index 0734689881..c9561f1ecd 100644
--- a/tools/helper/src/client/styles/normalize.scss
+++ b/tools/helper/src/client/styles/normalize.scss
@@ -1,6 +1,6 @@
 html,
 body {
-  background: var(--vp-c-black);
+  background: var(--vp-c-bg);
 }
 
 html {

From 0600188f6d914f2bfff8273d46e0bae09cc77f1c Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:14:43 +0800
Subject: [PATCH 39/63] chore: tweaks

---
 e2e/docs/.vuepress/components/ArticleList.vue               | 6 +++---
 .../template/blog/.vuepress/components/ArticleList.vue      | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/e2e/docs/.vuepress/components/ArticleList.vue b/e2e/docs/.vuepress/components/ArticleList.vue
index 309205f35e..42a9bbc9ea 100644
--- a/e2e/docs/.vuepress/components/ArticleList.vue
+++ b/e2e/docs/.vuepress/components/ArticleList.vue
@@ -70,7 +70,6 @@ defineProps<{
   position: relative;
 
   box-sizing: border-box;
-
   width: 100%;
   margin: 0 auto 1.25rem;
   padding: 1rem 1.25rem;
@@ -99,8 +98,8 @@ defineProps<{
       content: '';
 
       position: absolute;
-      bottom: 0;
       inset-inline-start: 0;
+      bottom: 0;
 
       width: 100%;
       height: 2px;
@@ -109,7 +108,8 @@ defineProps<{
 
       visibility: hidden;
 
-      transition: transform 0.3s ease-in-out;
+      transition: transform var(--t-transform);
+
       transform: scaleX(0);
     }
 
diff --git a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
index 8e52652bf3..bc0ee3070d 100644
--- a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
@@ -60,7 +60,6 @@ defineProps({
   position: relative;
 
   box-sizing: border-box;
-
   width: 100%;
   margin: 0 auto 1.25rem;
   padding: 1rem 1.25rem;
@@ -89,8 +88,8 @@ defineProps({
       content: '';
 
       position: absolute;
-      bottom: 0;
       inset-inline-start: 0;
+      bottom: 0;
 
       width: 100%;
       height: 2px;
@@ -99,7 +98,8 @@ defineProps({
 
       visibility: hidden;
 
-      transition: transform 0.3s ease-in-out;
+      transition: transform var(--t-transform);
+
       transform: scaleX(0);
     }
 

From 1663b0aac0c88eb707c38627ee67390394e81acc Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:16:11 +0800
Subject: [PATCH 40/63] chore: tweaks

---
 .../src/client/styles/content/custom-container.scss           | 4 ++--
 .../theme-default/src/client/styles/external-link-icon.scss   | 2 +-
 themes/theme-default/src/client/styles/vars.scss              | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/themes/theme-default/src/client/styles/content/custom-container.scss b/themes/theme-default/src/client/styles/content/custom-container.scss
index 79f5d61f02..0e31b2599b 100644
--- a/themes/theme-default/src/client/styles/content/custom-container.scss
+++ b/themes/theme-default/src/client/styles/content/custom-container.scss
@@ -40,7 +40,7 @@
   }
 
   &.warning {
-    --external-link-icon-color: var(--c-warning-text-quote);
+    --external-link-c-icon: var(--c-warning-text-quote);
 
     border-color: var(--c-warning);
     background-color: var(--c-warning-bg);
@@ -74,7 +74,7 @@
   }
 
   &.danger {
-    --external-link-icon-color: var(--c-danger-text-quote);
+    --external-link-c-icon: var(--c-danger-text-quote);
 
     border-color: var(--c-danger);
     background-color: var(--c-danger-bg);
diff --git a/themes/theme-default/src/client/styles/external-link-icon.scss b/themes/theme-default/src/client/styles/external-link-icon.scss
index a577d15eb3..0ecf9cb8b4 100644
--- a/themes/theme-default/src/client/styles/external-link-icon.scss
+++ b/themes/theme-default/src/client/styles/external-link-icon.scss
@@ -10,7 +10,7 @@
     margin-top: -1px;
     margin-left: 4px;
 
-    background: var(--external-link-icon-color);
+    background: var(--external-link-c-icon);
 
     -webkit-mask-image: var(--external-link-icon);
     mask-image: var(--external-link-icon);
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index e634e36847..b784dd7dd0 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -92,7 +92,7 @@
 
   // external-link-icon
   --external-link-icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
-  --external-link-icon-color: var(--vp-c-text-mute);
+  --external-link-c-icon: var(--vp-c-text-mute);
 }
 
 // plugin-catalog

From 843af94726a9b6eca9f9e4904de46f475ce3d540 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:18:45 +0800
Subject: [PATCH 41/63] chore: tweaks

---
 themes/theme-default/src/client/styles/normalize.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index a1a0391b10..d33502c294 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -1,8 +1,8 @@
 html,
 body {
   background-color: var(--vp-c-bg);
-  transition: background-color var(--t-color);
   accent-color: var(--vp-c-accent);
+  transition: background-color var(--t-color);
 }
 
 [data-theme='dark'] {

From df9382f269849e923a6edb99cd14ed87ed335d1d Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:20:10 +0800
Subject: [PATCH 42/63] chore: tweaks

---
 e2e/docs/.vuepress/components/ArticleList.vue |  2 +-
 .../src/client/components/VPHomeFeatures.vue  |  2 +-
 .../src/client/components/VPHomeFooter.vue    |  2 +-
 .../src/client/components/VPHomeHero.vue      |  2 +-
 .../src/client/components/VPNavbar.vue        |  4 ++--
 .../src/client/components/VPPageNav.vue       |  2 +-
 .../src/client/components/VPSidebar.vue       |  8 ++++----
 .../components/VPToggleSidebarButton.vue      |  2 +-
 .../src/client/components/global/Badge.vue    |  4 ++--
 .../src/client/styles/content/code.scss       |  6 +++---
 .../styles/content/custom-container.scss      |  6 +++---
 .../src/client/styles/normalize.scss          | 20 +++++++++----------
 .../src/client/styles/plugins.scss            |  2 +-
 .../theme-default/src/client/styles/vars.scss |  4 ++--
 .../blog/.vuepress/components/ArticleList.vue |  2 +-
 15 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/e2e/docs/.vuepress/components/ArticleList.vue b/e2e/docs/.vuepress/components/ArticleList.vue
index 42a9bbc9ea..b8ae929051 100644
--- a/e2e/docs/.vuepress/components/ArticleList.vue
+++ b/e2e/docs/.vuepress/components/ArticleList.vue
@@ -108,7 +108,7 @@ defineProps<{
 
       visibility: hidden;
 
-      transition: transform var(--t-transform);
+      transition: transform var(--vp-t-transform);
 
       transform: scaleX(0);
     }
diff --git a/themes/theme-default/src/client/components/VPHomeFeatures.vue b/themes/theme-default/src/client/components/VPHomeFeatures.vue
index 8b0eeb95df..df29ff924e 100644
--- a/themes/theme-default/src/client/components/VPHomeFeatures.vue
+++ b/themes/theme-default/src/client/components/VPHomeFeatures.vue
@@ -30,7 +30,7 @@ const features = computed(() => frontmatter.value.features ?? [])
   padding: 1.2rem 0;
   border-top: 1px solid var(--c-border);
 
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 
   @media (max-width: $MQMobile) {
     flex-direction: column;
diff --git a/themes/theme-default/src/client/components/VPHomeFooter.vue b/themes/theme-default/src/client/components/VPHomeFooter.vue
index b5eb769115..dd2d52f70e 100644
--- a/themes/theme-default/src/client/components/VPHomeFooter.vue
+++ b/themes/theme-default/src/client/components/VPHomeFooter.vue
@@ -26,6 +26,6 @@ const footerHtml = computed(() => frontmatter.value.footerHtml)
 
   text-align: center;
 
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 </style>
diff --git a/themes/theme-default/src/client/components/VPHomeHero.vue b/themes/theme-default/src/client/components/VPHomeHero.vue
index 65ece6f6a0..c2003d08e5 100644
--- a/themes/theme-default/src/client/components/VPHomeHero.vue
+++ b/themes/theme-default/src/client/components/VPHomeHero.vue
@@ -167,7 +167,7 @@ const HomeHeroImage: FunctionalComponent = () => {
 
   font-size: 1.2rem;
 
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 
   @media (max-width: $MQMobileNarrow) {
     padding: 0.6rem 1.2rem;
diff --git a/themes/theme-default/src/client/components/VPNavbar.vue b/themes/theme-default/src/client/components/VPNavbar.vue
index e82e617c56..beb9001ac5 100644
--- a/themes/theme-default/src/client/components/VPNavbar.vue
+++ b/themes/theme-default/src/client/components/VPNavbar.vue
@@ -100,8 +100,8 @@ useUpdateDeviceStatus(
   line-height: var(--navbar-line-height);
 
   transition:
-    background-color var(--t-color),
-    border-color var(--t-color);
+    background-color var(--vp-t-color),
+    border-color var(--vp-t-color);
 
   @media screen and (max-width: $MQMobile) {
     padding-left: 4rem;
diff --git a/themes/theme-default/src/client/components/VPPageNav.vue b/themes/theme-default/src/client/components/VPPageNav.vue
index de71279f28..9dde59a22c 100644
--- a/themes/theme-default/src/client/components/VPPageNav.vue
+++ b/themes/theme-default/src/client/components/VPPageNav.vue
@@ -76,7 +76,7 @@ useEventListener('keydown', (event): void => {
   padding: 1rem 2rem 0;
   border-top: 1px solid var(--c-border);
 
-  transition: border-top var(--t-color);
+  transition: border-top var(--vp-t-color);
 
   @media (max-width: $MQNarrow) {
     padding-right: 1rem;
diff --git a/themes/theme-default/src/client/components/VPSidebar.vue b/themes/theme-default/src/client/components/VPSidebar.vue
index 5e25467c6b..1c95c6d9ae 100644
--- a/themes/theme-default/src/client/components/VPSidebar.vue
+++ b/themes/theme-default/src/client/components/VPSidebar.vue
@@ -41,9 +41,9 @@ defineSlots<{
   font-size: 16px;
 
   transition:
-    transform var(--t-transform),
-    background-color var(--t-color),
-    border-color var(--t-color);
+    transform var(--vp-t-transform),
+    background-color var(--vp-t-color),
+    border-color var(--vp-t-color);
 
   scrollbar-color: var(--vp-c-accent) var(--c-border);
   scrollbar-width: thin;
@@ -80,7 +80,7 @@ defineSlots<{
     display: none;
     padding: 0.5rem 0 0.75rem;
     border-bottom: 1px solid var(--c-border);
-    transition: border-color var(--t-color);
+    transition: border-color var(--vp-t-color);
 
     @media (max-width: $MQMobile) {
       display: block;
diff --git a/themes/theme-default/src/client/components/VPToggleSidebarButton.vue b/themes/theme-default/src/client/components/VPToggleSidebarButton.vue
index 3d2bc09811..2dafb0fc64 100644
--- a/themes/theme-default/src/client/components/VPToggleSidebarButton.vue
+++ b/themes/theme-default/src/client/components/VPToggleSidebarButton.vue
@@ -62,7 +62,7 @@ const themeLocale = useThemeLocaleData()
 
       background-color: var(--vp-c-text);
 
-      transition: transform var(--t-transform);
+      transition: transform var(--vp-t-transform);
 
       &:nth-child(2) {
         margin: 6px 0;
diff --git a/themes/theme-default/src/client/components/global/Badge.vue b/themes/theme-default/src/client/components/global/Badge.vue
index dcfb81198c..447918146f 100644
--- a/themes/theme-default/src/client/components/global/Badge.vue
+++ b/themes/theme-default/src/client/components/global/Badge.vue
@@ -47,8 +47,8 @@ defineSlots<{
   line-height: 18px;
 
   transition:
-    color var(--t-color),
-    background-color var(--t-color);
+    color var(--vp-t-color),
+    background-color var(--vp-t-color);
 
   &.tip {
     background-color: var(--c-badge-tip);
diff --git a/themes/theme-default/src/client/styles/content/code.scss b/themes/theme-default/src/client/styles/content/code.scss
index f2c1eaf2c8..ba07095ac9 100644
--- a/themes/theme-default/src/client/styles/content/code.scss
+++ b/themes/theme-default/src/client/styles/content/code.scss
@@ -4,8 +4,8 @@
 div[class*='language-'] {
   margin: 0.75rem 0;
   transition:
-    background-color var(--t-color),
-    color var(--t-color);
+    background-color var(--vp-t-color),
+    color var(--vp-t-color);
 
   @media (max-width: $MQMobileNarrow) {
     --code-border-radius: 0;
@@ -17,7 +17,7 @@ div[class*='language-'] {
   .line {
     &.diff,
     &.highlighted {
-      transition: background-color var(--t-color);
+      transition: background-color var(--vp-t-color);
     }
   }
 }
diff --git a/themes/theme-default/src/client/styles/content/custom-container.scss b/themes/theme-default/src/client/styles/content/custom-container.scss
index 0e31b2599b..5b5d43d172 100644
--- a/themes/theme-default/src/client/styles/content/custom-container.scss
+++ b/themes/theme-default/src/client/styles/content/custom-container.scss
@@ -1,8 +1,8 @@
 .custom-container {
   transition:
-    color var(--t-color),
-    border-color var(--t-color),
-    background-color var(--t-color);
+    color var(--vp-t-color),
+    border-color var(--vp-t-color),
+    background-color var(--vp-t-color);
 
   .custom-container-title {
     font-weight: 600;
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index d33502c294..b1d0fad2c6 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -2,7 +2,7 @@ html,
 body {
   background-color: var(--vp-c-bg);
   accent-color: var(--vp-c-accent);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 [data-theme='dark'] {
@@ -17,7 +17,7 @@ body {
 
 h2 {
   border-color: var(--c-border);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 a {
@@ -28,7 +28,7 @@ code {
   background-color: var(--c-bg-light);
   color: var(--c-text-lighter);
   font-family: var(--code-font-family);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 
   p a & {
     color: var(--c-text-accent);
@@ -37,28 +37,28 @@ code {
 
 kbd {
   border-color: var(--c-border-dark);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 blockquote {
   border-color: var(--c-border-dark);
   color: var(--vp-c-text-mute);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 hr {
   border-color: var(--c-border);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 table {
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 tr {
   &:nth-child(odd) {
-    background-color: var(--c-bg-light);
-    transition: background-color var(--t-color);
+    background-color: var(--vp-c-bg-alt);
+    transition: background-color var(--vp-t-color);
 
     code {
       background-color: var(--c-bg-dark);
@@ -69,5 +69,5 @@ tr {
 th,
 td {
   border-color: var(--c-border-dark);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
diff --git a/themes/theme-default/src/client/styles/plugins.scss b/themes/theme-default/src/client/styles/plugins.scss
index 11fbe5a224..52e2388755 100644
--- a/themes/theme-default/src/client/styles/plugins.scss
+++ b/themes/theme-default/src/client/styles/plugins.scss
@@ -9,7 +9,7 @@
   // plugin-docsearch
   /* stylelint-disable-next-line selector-class-pattern */
   .DocSearch {
-    transition: background-color var(--t-color);
+    transition: background-color var(--vp-t-color);
   }
 
   // plugin-search
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index b784dd7dd0..c31989b92e 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -74,8 +74,8 @@
   --c-code-group-tab-active-border: var(--vp-c-accent);
 
   // transition vars
-  --t-color: 0.3s ease;
-  --t-transform: 0.3s ease;
+  --vp-t-color: 0.3s ease;
+  --vp-t-transform: 0.3s ease;
 
   // font vars
   --font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', roboto, oxygen,
diff --git a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
index bc0ee3070d..b112ec8742 100644
--- a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
@@ -98,7 +98,7 @@ defineProps({
 
       visibility: hidden;
 
-      transition: transform var(--t-transform);
+      transition: transform var(--vp-t-transform);
 
       transform: scaleX(0);
     }

From b25653811546520e19d7da584b3e312af96fc4a3 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:25:55 +0800
Subject: [PATCH 43/63] chore: tweaks

---
 e2e/docs/.vuepress/components/ArticleList.vue             | 2 +-
 .../plugin-catalog/src/client/styles/catalog.scss         | 2 +-
 .../features/plugin-catalog/src/client/styles/vars.css    | 2 +-
 .../src/client/components/VPHomeFeatures.vue              | 2 +-
 .../theme-default/src/client/components/VPHomeFooter.vue  | 2 +-
 themes/theme-default/src/client/components/VPNavbar.vue   | 2 +-
 .../src/client/components/VPNavbarDropdown.vue            | 4 ++--
 themes/theme-default/src/client/components/VPPageNav.vue  | 4 ++--
 themes/theme-default/src/client/components/VPSidebar.vue  | 8 ++++----
 themes/theme-default/src/client/styles/normalize.scss     | 4 ++--
 themes/theme-default/src/client/styles/vars-dark.scss     | 2 +-
 themes/theme-default/src/client/styles/vars.scss          | 7 +------
 .../template/blog/.vuepress/components/ArticleList.vue    | 2 +-
 13 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/e2e/docs/.vuepress/components/ArticleList.vue b/e2e/docs/.vuepress/components/ArticleList.vue
index b8ae929051..f56149f2fe 100644
--- a/e2e/docs/.vuepress/components/ArticleList.vue
+++ b/e2e/docs/.vuepress/components/ArticleList.vue
@@ -73,7 +73,7 @@ defineProps<{
   width: 100%;
   margin: 0 auto 1.25rem;
   padding: 1rem 1.25rem;
-  border: 1px solid var(--c-border);
+  border: 1px solid var(--vp-c-border);
   border-radius: 0.4rem;
 
   color: var(--vp-c-text);
diff --git a/plugins/features/plugin-catalog/src/client/styles/catalog.scss b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
index 05cd112462..14d55a42d9 100644
--- a/plugins/features/plugin-catalog/src/client/styles/catalog.scss
+++ b/plugins/features/plugin-catalog/src/client/styles/catalog.scss
@@ -89,7 +89,7 @@
     &.has-children {
       margin-top: calc(1rem - var(--catalog-header-offset));
       padding-top: var(--catalog-header-offset);
-      border-bottom: 1px solid var(--catalog-c-border);
+      border-bottom: 1px solid var(--catalog-c-gutter);
 
       font-weight: 500;
       font-size: 1.3rem;
diff --git a/plugins/features/plugin-catalog/src/client/styles/vars.css b/plugins/features/plugin-catalog/src/client/styles/vars.css
index 97744b0c7a..ba6454ca80 100644
--- a/plugins/features/plugin-catalog/src/client/styles/vars.css
+++ b/plugins/features/plugin-catalog/src/client/styles/vars.css
@@ -1,9 +1,9 @@
 :root {
-  --catalog-c-border: #e5e5e5;
   --catalog-c-accent: var(--vp-c-accent);
   --catalog-c-accent-hover: var(--vp-c-accent-hover);
   --catalog-c-accent-text: var(--vp-c-accent-text);
   --catalog-c-control: var(--vp-c-bg-alt);
   --catalog-c-control-hover: var(--vp-c-bg-alt);
+  --catalog-c-gutter: var(--vp-c-gutter);
   --catalog-header-offset: var(--navbar-height, 3.6rem);
 }
diff --git a/themes/theme-default/src/client/components/VPHomeFeatures.vue b/themes/theme-default/src/client/components/VPHomeFeatures.vue
index df29ff924e..f96d06c715 100644
--- a/themes/theme-default/src/client/components/VPHomeFeatures.vue
+++ b/themes/theme-default/src/client/components/VPHomeFeatures.vue
@@ -28,7 +28,7 @@ const features = computed(() => frontmatter.value.features ?? [])
 
   margin-top: 2.5rem;
   padding: 1.2rem 0;
-  border-top: 1px solid var(--c-border);
+  border-top: 1px solid var(--vp-c-gutter);
 
   transition: border-color var(--vp-t-color);
 
diff --git a/themes/theme-default/src/client/components/VPHomeFooter.vue b/themes/theme-default/src/client/components/VPHomeFooter.vue
index dd2d52f70e..235247ca66 100644
--- a/themes/theme-default/src/client/components/VPHomeFooter.vue
+++ b/themes/theme-default/src/client/components/VPHomeFooter.vue
@@ -20,7 +20,7 @@ const footerHtml = computed(() => frontmatter.value.footerHtml)
 <style>
 .vp-footer {
   padding: 2.5rem;
-  border-top: 1px solid var(--c-border);
+  border-top: 1px solid var(--vp-c-border);
 
   color: var(--c-text-lighter);
 
diff --git a/themes/theme-default/src/client/components/VPNavbar.vue b/themes/theme-default/src/client/components/VPNavbar.vue
index beb9001ac5..2e238efa1f 100644
--- a/themes/theme-default/src/client/components/VPNavbar.vue
+++ b/themes/theme-default/src/client/components/VPNavbar.vue
@@ -93,7 +93,7 @@ useUpdateDeviceStatus(
   box-sizing: border-box;
   height: var(--navbar-height);
   padding: var(--navbar-padding-v) var(--navbar-padding-h);
-  border-bottom: 1px solid var(--c-border);
+  border-bottom: 1px solid var(--vp-c-border);
 
   background-color: var(--c-bg-navbar);
 
diff --git a/themes/theme-default/src/client/components/VPNavbarDropdown.vue b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
index bdad066006..5efbe69b3e 100644
--- a/themes/theme-default/src/client/components/VPNavbarDropdown.vue
+++ b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
@@ -161,7 +161,7 @@ watch(
     max-height: calc(100vh - 2.7rem);
     margin: 0;
     padding: 0.6rem 0;
-    border: 1px solid var(--c-border);
+    border: 1px solid var(--vp-c-border);
     border-bottom-color: var(--c-border-dark);
     border-radius: 0.25rem;
 
@@ -270,7 +270,7 @@ watch(
 .vp-navbar-dropdown-subtitle {
   margin: 0.45rem 0 0;
   padding: 1rem 0 0.45rem;
-  border-top: 1px solid var(--c-border);
+  border-top: 1px solid var(--vp-c-gutter);
   font-size: 0.9rem;
 
   .vp-navbar-dropdown-wrapper.mobile & {
diff --git a/themes/theme-default/src/client/components/VPPageNav.vue b/themes/theme-default/src/client/components/VPPageNav.vue
index 9dde59a22c..884dff7a93 100644
--- a/themes/theme-default/src/client/components/VPPageNav.vue
+++ b/themes/theme-default/src/client/components/VPPageNav.vue
@@ -74,7 +74,7 @@ useEventListener('keydown', (event): void => {
   margin-right: auto;
   margin-left: auto;
   padding: 1rem 2rem 0;
-  border-top: 1px solid var(--c-border);
+  border-top: 1px solid var(--vp-c-gutter);
 
   transition: border-top var(--vp-t-color);
 
@@ -93,7 +93,7 @@ useEventListener('keydown', (event): void => {
 
     margin: 0.25rem;
     padding: 0.25rem 0.5rem;
-    border: 1px solid var(--c-border);
+    border: 1px solid var(--vp-c-gutter);
     border-radius: 0.25rem;
 
     &:hover {
diff --git a/themes/theme-default/src/client/components/VPSidebar.vue b/themes/theme-default/src/client/components/VPSidebar.vue
index 1c95c6d9ae..44f3dcd8c3 100644
--- a/themes/theme-default/src/client/components/VPSidebar.vue
+++ b/themes/theme-default/src/client/components/VPSidebar.vue
@@ -34,7 +34,7 @@ defineSlots<{
   box-sizing: border-box;
   width: var(--sidebar-width);
   margin: 0;
-  border-right: 1px solid var(--c-border);
+  border-right: 1px solid var(--vp-c-border);
 
   background-color: var(--c-bg-sidebar);
 
@@ -45,7 +45,7 @@ defineSlots<{
     background-color var(--vp-t-color),
     border-color var(--vp-t-color);
 
-  scrollbar-color: var(--vp-c-accent) var(--c-border);
+  scrollbar-color: var(--vp-c-accent) var(--vp-c-gutter);
   scrollbar-width: thin;
 
   // narrow desktop / iPad
@@ -68,7 +68,7 @@ defineSlots<{
   }
 
   &::-webkit-scrollbar-track {
-    background-color: var(--c-border);
+    background-color: var(--vp-c-gutter);
   }
 
   &::-webkit-scrollbar-thumb {
@@ -79,7 +79,7 @@ defineSlots<{
   .vp-navbar-items {
     display: none;
     padding: 0.5rem 0 0.75rem;
-    border-bottom: 1px solid var(--c-border);
+    border-bottom: 1px solid var(--vp-c-gutter);
     transition: border-color var(--vp-t-color);
 
     @media (max-width: $MQMobile) {
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index b1d0fad2c6..ff607a5ec3 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -16,7 +16,7 @@ body {
 }
 
 h2 {
-  border-color: var(--c-border);
+  border-color: var(--vp-c-gutter);
   transition: border-color var(--vp-t-color);
 }
 
@@ -47,7 +47,7 @@ blockquote {
 }
 
 hr {
-  border-color: var(--c-border);
+  border-color: var(--vp-c-gutter);
   transition: border-color var(--vp-t-color);
 }
 
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index c0852bee8f..9e8cf2d53b 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -17,7 +17,7 @@
   --c-text-lightest: #8094a8;
 
   // border colors
-  --c-border: #3e4c5a;
+  --vp-c-border: #3e4c5a;
   --c-border-dark: #34404c;
 
   // custom container colors
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index c31989b92e..5b40190b3d 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -27,7 +27,7 @@
   --c-text-lightest: #6a8bad;
 
   // border colors
-  --c-border: #eaecef;
+  --vp-c-border: #eaecef;
   --c-border-dark: #dfe2e5;
 
   // custom container colors
@@ -95,11 +95,6 @@
   --external-link-c-icon: var(--vp-c-text-mute);
 }
 
-// plugin-catalog
-.vp-catalog-wrapper {
-  --catalog-c-border: var(--c-border);
-}
-
 // plugin-docsearch
 /* stylelint-disable-next-line selector-class-pattern */
 .DocSearch {
diff --git a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
index b112ec8742..a677ecde9a 100644
--- a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
@@ -63,7 +63,7 @@ defineProps({
   width: 100%;
   margin: 0 auto 1.25rem;
   padding: 1rem 1.25rem;
-  border: 1px solid var(--c-border);
+  border: 1px solid var(--vp-c-border);
   border-radius: 0.4rem;
 
   color: var(--vp-c-text);

From 239ba229e14dbc58d2d70bf5b37743e3b7078452 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:29:11 +0800
Subject: [PATCH 44/63] chore: tweaks

---
 .../src/client/styles/search.scss              | 18 +++++++++---------
 .../plugin-search/src/client/styles/vars.css   | 12 ++++++------
 .../theme-default/src/client/styles/vars.scss  | 12 +-----------
 3 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/plugins/search/plugin-search/src/client/styles/search.scss b/plugins/search/plugin-search/src/client/styles/search.scss
index 1283e35d43..31c393b28c 100644
--- a/plugins/search/plugin-search/src/client/styles/search.scss
+++ b/plugins/search/plugin-search/src/client/styles/search.scss
@@ -13,12 +13,12 @@
     width: var(--search-input-width);
     height: 2rem;
     padding: 0 0.5rem 0 2rem;
-    border: 1px solid var(--search-border-color);
+    border: 1px solid var(--search-c-border);
     border-radius: 2rem;
 
-    background: var(--search-bg-color) url('search.svg') 0.6rem 0.5rem no-repeat;
+    background: var(--search-c-bg) url('search.svg') 0.6rem 0.5rem no-repeat;
     background-size: 1rem;
-    color: var(--search-text-color);
+    color: var(--search-c-text);
     outline: none;
 
     font-size: 0.9rem;
@@ -38,7 +38,7 @@
     }
 
     &:focus {
-      border-color: var(--search-accent-color);
+      border-color: var(--search-c-accent);
       cursor: auto;
 
       @media (max-width: 719px) {
@@ -60,10 +60,10 @@
 
     width: var(--search-result-width);
     padding: 0.4rem;
-    border: 1px solid var(--search-border-color);
+    border: 1px solid var(--search-c-border);
     border-radius: 6px;
 
-    background: var(--search-bg-color);
+    background: var(--search-c-bg);
     list-style-type: none;
 
     @media (max-width: 419px) {
@@ -79,15 +79,15 @@
     cursor: pointer;
 
     a {
-      color: var(--search-item-text-color);
+      color: var(--search-c-item-text);
       white-space: normal;
     }
 
     &.focus {
-      background-color: var(--search-item-focus-bg-color);
+      background-color: var(--search-c-item-focus);
 
       a {
-        color: var(--search-accent-color);
+        color: var(--search-c-accent);
       }
     }
 
diff --git a/plugins/search/plugin-search/src/client/styles/vars.css b/plugins/search/plugin-search/src/client/styles/vars.css
index 09aa29ddf1..7cf2c7a097 100644
--- a/plugins/search/plugin-search/src/client/styles/vars.css
+++ b/plugins/search/plugin-search/src/client/styles/vars.css
@@ -1,10 +1,10 @@
 :root {
-  --search-bg-color: #fff;
-  --search-accent-color: #3eaf7c;
-  --search-text-color: #2c3e50;
-  --search-border-color: #eaecef;
-  --search-item-text-color: #5d81a5;
-  --search-item-focus-bg-color: #f3f4f5;
+  --search-c-bg: var(--vp-c-bg);
+  --search-c-accent: var(--vp-c-accent);
+  --search-c-text: var(--vp-c-text);
+  --search-c-border: var(--vp-c-gutter);
+  --search-c-item-text: #5d81a5;
+  --search-c-item-focus: var(--vp-c-bg-alt);
   --search-input-width: 8rem;
   --search-result-width: 20rem;
 }
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 5b40190b3d..cd42428d1e 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -114,17 +114,7 @@
   --docsearch-footer-background: var(--vp-c-bg);
 }
 
-// plugin-medium-zoom
-.medium-zoom-overlay {
-  --medium-zoom-bg-color: var(--vp-c-bg);
-}
-
 // plugin-search
 .search-box {
-  --search-bg-color: var(--vp-c-bg);
-  --search-accent-color: var(--vp-c-accent);
-  --search-text-color: var(--vp-c-text);
-  --search-border-color: var(--c-border);
-  --search-item-text-color: var(--c-text-lighter);
-  --search-item-focus-bg-color: var(--c-bg-light);
+  --search-c-item-text: var(--c-text-lighter);
 }

From 8c194510897a3a945446a3828b3226d47b1bafa0 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:31:39 +0800
Subject: [PATCH 45/63] chore: tweaks

---
 .../src/client/components/VPNavbarDropdown.vue   |  8 ++++----
 .../src/client/components/VPNavbarItems.vue      |  4 ++--
 .../src/client/components/VPSidebarItem.vue      |  6 +++---
 .../src/client/styles/normalize.scss             |  4 ++--
 .../src/client/styles/vars-dark.scss             | 16 +++++++++-------
 themes/theme-default/src/client/styles/vars.scss |  2 --
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/themes/theme-default/src/client/components/VPNavbarDropdown.vue b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
index 5efbe69b3e..fcb41f0861 100644
--- a/themes/theme-default/src/client/components/VPNavbarDropdown.vue
+++ b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
@@ -218,7 +218,7 @@ watch(
   }
 
   &:hover {
-    color: var(--c-text-accent);
+    color: var(--c-accent);
   }
 }
 
@@ -239,11 +239,11 @@ watch(
     line-height: 1.7rem;
 
     &:hover {
-      color: var(--c-text-accent);
+      color: var(--c-accent);
     }
 
     &.route-link-active {
-      color: var(--c-text-accent);
+      color: var(--c-accent);
 
       &::after {
         content: '';
@@ -256,7 +256,7 @@ watch(
         height: 0;
         border-top: 3px solid transparent;
         border-bottom: 3px solid transparent;
-        border-left: 5px solid var(--c-text-accent);
+        border-left: 5px solid var(--c-accent);
       }
     }
   }
diff --git a/themes/theme-default/src/client/components/VPNavbarItems.vue b/themes/theme-default/src/client/components/VPNavbarItems.vue
index da57eaa441..4e163e92f6 100644
--- a/themes/theme-default/src/client/components/VPNavbarItems.vue
+++ b/themes/theme-default/src/client/components/VPNavbarItems.vue
@@ -90,7 +90,7 @@ useUpdateDeviceStatus(
   a {
     &:hover,
     &.route-link-active {
-      color: var(--c-text-accent);
+      color: var(--c-accent);
     }
   }
 
@@ -98,7 +98,7 @@ useUpdateDeviceStatus(
     &:hover,
     &.route-link-active {
       margin-bottom: -2px;
-      border-bottom: 2px solid var(--c-text-accent);
+      border-bottom: 2px solid var(--c-accent);
 
       @media (max-width: $MQMobile) {
         margin-bottom: 0;
diff --git a/themes/theme-default/src/client/components/VPSidebarItem.vue b/themes/theme-default/src/client/components/VPSidebarItem.vue
index 258cc1a8c0..b623f189ba 100644
--- a/themes/theme-default/src/client/components/VPSidebarItem.vue
+++ b/themes/theme-default/src/client/components/VPSidebarItem.vue
@@ -151,8 +151,8 @@ onBeforeUnmount(() => {
   }
 
   &.active:not(p.vp-sidebar-heading) {
-    border-left-color: var(--c-text-accent);
-    color: var(--c-text-accent);
+    border-left-color: var(--c-accent);
+    color: var(--c-accent);
     font-weight: 600;
   }
 }
@@ -161,7 +161,7 @@ a.vp-sidebar-item {
   cursor: pointer;
 
   &:hover {
-    color: var(--c-text-accent);
+    color: var(--c-accent);
   }
 }
 </style>
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index ff607a5ec3..14c8a9ad17 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -21,7 +21,7 @@ h2 {
 }
 
 a {
-  color: var(--c-text-accent);
+  color: var(--c-accent);
 }
 
 code {
@@ -31,7 +31,7 @@ code {
   transition: background-color var(--vp-t-color);
 
   p a & {
-    color: var(--c-text-accent);
+    color: var(--c-accent);
   }
 }
 
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 9e8cf2d53b..11a42360ab 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -5,21 +5,23 @@
 
   // background colors
   --vp-c-bg: #22272e;
-  --c-bg-light: #2b313a;
-  --c-bg-lighter: #262c34;
-  --c-bg-dark: #343b44;
-  --c-bg-darker: #37404c;
 
   // text colors
   --vp-c-text: #adbac7;
-  --c-text-light: #96a7b7;
-  --c-text-lighter: #8b9eb0;
-  --c-text-lightest: #8094a8;
 
   // border colors
   --vp-c-border: #3e4c5a;
   --c-border-dark: #34404c;
 
+  // original ones
+  --c-bg-light: #2b313a;
+  --c-bg-lighter: #262c34;
+  --c-bg-dark: #343b44;
+  --c-bg-darker: #37404c;
+  --c-text-light: #96a7b7;
+  --c-text-lighter: #8b9eb0;
+  --c-text-lightest: #8094a8;
+
   // custom container colors
   --c-tip: #318a62;
   --c-warning: #e0ad15;
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index cd42428d1e..d6a00c94ae 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -7,7 +7,6 @@
   // background colors
   --vp-c-bg: #fff;
   --vp-c-bg-alt: #f6f6f7;
-  --vp-c-bg-hover: #f6f6f7;
 
   // text colors
   --vp-c-text: rgba(60 60 67);
@@ -21,7 +20,6 @@
   --c-bg-darker: #e6e6e6;
   --c-bg-navbar: var(--vp-c-bg);
   --c-bg-sidebar: var(--vp-c-bg);
-  --c-text-accent: var(--vp-c-accent);
   --c-text-light: #3a5169;
   --c-text-lighter: #4e6e8e;
   --c-text-lightest: #6a8bad;

From 0b36066c2e33854abbc127fdb2a954a10b8fb0f6 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:34:59 +0800
Subject: [PATCH 46/63] chore: tweaks

---
 themes/theme-default/src/client/config.ts         | 2 ++
 themes/theme-default/src/client/styles/index.scss | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/theme-default/src/client/config.ts b/themes/theme-default/src/client/config.ts
index c52fad27fe..3d394d1629 100644
--- a/themes/theme-default/src/client/config.ts
+++ b/themes/theme-default/src/client/config.ts
@@ -8,6 +8,8 @@ import { Badge, CodeGroup, CodeGroupItem } from './components/global/index.js'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
 
+import '@vuepress/helper/color.css'
+import '@vuepress/helper/normalize.css'
 import './styles/index.scss'
 
 export default defineClientConfig({
diff --git a/themes/theme-default/src/client/styles/index.scss b/themes/theme-default/src/client/styles/index.scss
index 649255b666..7e07476300 100644
--- a/themes/theme-default/src/client/styles/index.scss
+++ b/themes/theme-default/src/client/styles/index.scss
@@ -1,5 +1,3 @@
-@use '@vuepress/helper/color.css';
-@use '@vuepress/helper/normalize.css';
 @use 'vars';
 @use 'vars-dark';
 @use 'normalize';

From c65f5993bae5c08cf93f103b547273d09fae82a6 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:36:00 +0800
Subject: [PATCH 47/63] chore: tweaks

---
 themes/theme-default/src/client/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/theme-default/src/client/config.ts b/themes/theme-default/src/client/config.ts
index 3d394d1629..b48e019cb3 100644
--- a/themes/theme-default/src/client/config.ts
+++ b/themes/theme-default/src/client/config.ts
@@ -8,7 +8,7 @@ import { Badge, CodeGroup, CodeGroupItem } from './components/global/index.js'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
 
-import '@vuepress/helper/color.css'
+import '@vuepress/helper/colors.css'
 import '@vuepress/helper/normalize.css'
 import './styles/index.scss'
 

From b18c4f0b0b741f599ba8c55c4c1806b5c115bb68 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Fri, 19 Jul 2024 20:53:40 +0800
Subject: [PATCH 48/63] chore: tweaks

---
 .../src/client/styles/redirect-modal.scss     |  2 +-
 .../src/client/styles/vars.css                |  1 +
 .../client/components/VPNavbarDropdown.vue    |  9 ++++----
 .../src/client/components/VPNavbarItems.vue   |  4 ++--
 .../src/client/components/VPSidebarItem.vue   |  6 ++---
 .../src/client/styles/normalize.scss          | 10 ++++-----
 .../src/client/styles/vars-dark.scss          | 17 +++++++++++++-
 .../theme-default/src/client/styles/vars.scss | 22 ++++++++++++++-----
 8 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
index b7dd85ae6c..ea3ad0175c 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
+++ b/plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss
@@ -35,7 +35,7 @@
   border-radius: 8px;
 
   background: var(--redirect-c-bg);
-  box-shadow: 0 2px 6px 0 var(--card-shadow);
+  box-shadow: 0 2px 6px 0 var(--redirect-c-shadow);
 }
 
 .redirect-modal-action {
diff --git a/plugins/tools/plugin-redirect/src/client/styles/vars.css b/plugins/tools/plugin-redirect/src/client/styles/vars.css
index 2f02f9931f..cf9b90646d 100644
--- a/plugins/tools/plugin-redirect/src/client/styles/vars.css
+++ b/plugins/tools/plugin-redirect/src/client/styles/vars.css
@@ -7,4 +7,5 @@
   --redirect-c-accent-text: var(--vp-c-accent-text);
   --redirect-c-control: var(--vp-c-control);
   --redirect-c-control-hover: var(--vp-c-control-hover);
+  --redirect-c-shadow: var(--vp-c-shadow);
 }
diff --git a/themes/theme-default/src/client/components/VPNavbarDropdown.vue b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
index fcb41f0861..bb4ec9e745 100644
--- a/themes/theme-default/src/client/components/VPNavbarDropdown.vue
+++ b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
@@ -162,7 +162,6 @@ watch(
     margin: 0;
     padding: 0.6rem 0;
     border: 1px solid var(--vp-c-border);
-    border-bottom-color: var(--c-border-dark);
     border-radius: 0.25rem;
 
     background-color: var(--c-bg-navbar);
@@ -218,7 +217,7 @@ watch(
   }
 
   &:hover {
-    color: var(--c-accent);
+    color: var(--vp-c-accent);
   }
 }
 
@@ -239,11 +238,11 @@ watch(
     line-height: 1.7rem;
 
     &:hover {
-      color: var(--c-accent);
+      color: var(--vp-c-accent);
     }
 
     &.route-link-active {
-      color: var(--c-accent);
+      color: var(--vp-c-accent);
 
       &::after {
         content: '';
@@ -256,7 +255,7 @@ watch(
         height: 0;
         border-top: 3px solid transparent;
         border-bottom: 3px solid transparent;
-        border-left: 5px solid var(--c-accent);
+        border-left: 5px solid var(--vp-c-accent);
       }
     }
   }
diff --git a/themes/theme-default/src/client/components/VPNavbarItems.vue b/themes/theme-default/src/client/components/VPNavbarItems.vue
index 4e163e92f6..17cb9528f5 100644
--- a/themes/theme-default/src/client/components/VPNavbarItems.vue
+++ b/themes/theme-default/src/client/components/VPNavbarItems.vue
@@ -90,7 +90,7 @@ useUpdateDeviceStatus(
   a {
     &:hover,
     &.route-link-active {
-      color: var(--c-accent);
+      color: var(--vp-c-accent);
     }
   }
 
@@ -98,7 +98,7 @@ useUpdateDeviceStatus(
     &:hover,
     &.route-link-active {
       margin-bottom: -2px;
-      border-bottom: 2px solid var(--c-accent);
+      border-bottom: 2px solid var(--vp-c-accent);
 
       @media (max-width: $MQMobile) {
         margin-bottom: 0;
diff --git a/themes/theme-default/src/client/components/VPSidebarItem.vue b/themes/theme-default/src/client/components/VPSidebarItem.vue
index b623f189ba..a50c7e3593 100644
--- a/themes/theme-default/src/client/components/VPSidebarItem.vue
+++ b/themes/theme-default/src/client/components/VPSidebarItem.vue
@@ -151,8 +151,8 @@ onBeforeUnmount(() => {
   }
 
   &.active:not(p.vp-sidebar-heading) {
-    border-left-color: var(--c-accent);
-    color: var(--c-accent);
+    border-left-color: var(--vp-c-accent);
+    color: var(--vp-c-accent);
     font-weight: 600;
   }
 }
@@ -161,7 +161,7 @@ a.vp-sidebar-item {
   cursor: pointer;
 
   &:hover {
-    color: var(--c-accent);
+    color: var(--vp-c-accent);
   }
 }
 </style>
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index 14c8a9ad17..2d6100f0fb 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -21,7 +21,7 @@ h2 {
 }
 
 a {
-  color: var(--c-accent);
+  color: var(--vp-c-accent);
 }
 
 code {
@@ -31,17 +31,17 @@ code {
   transition: background-color var(--vp-t-color);
 
   p a & {
-    color: var(--c-accent);
+    color: var(--vp-c-accent);
   }
 }
 
 kbd {
-  border-color: var(--c-border-dark);
+  border-color: var(--vp-c-border-dark);
   transition: border-color var(--vp-t-color);
 }
 
 blockquote {
-  border-color: var(--c-border-dark);
+  border-color: var(--vp-c-border-dark);
   color: var(--vp-c-text-mute);
   transition: border-color var(--vp-t-color);
 }
@@ -68,6 +68,6 @@ tr {
 
 th,
 td {
-  border-color: var(--c-border-dark);
+  border-color: var(--vp-c-border-dark);
   transition: border-color var(--vp-t-color);
 }
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 11a42360ab..1622e546b6 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -5,13 +5,28 @@
 
   // background colors
   --vp-c-bg: #22272e;
+  --vp-c-bg-alt: #343b44;
+  --vp-c-bg-elv: #22272e;
 
   // text colors
   --vp-c-text: #adbac7;
+  --vp-c-text-mute: rgb(235 235 245 / 60%);
+  --vp-c-text-subtle: rgb(235 235 245 / 38%);
 
   // border colors
   --vp-c-border: #3e4c5a;
-  --c-border-dark: #34404c;
+  --vp-c-gutter: #373f4c;
+  --vp-c-border-dark: #405064;
+
+  // shadow color
+  --vp-c-shadow: rgb(0 0 0 / 30%);
+  --vp-c-shadow-hard: #2f3841;
+
+  // control colors
+  --vp-c-control: #2d333b;
+  --vp-c-control-hover: #2f3841;
+  --vp-c-control-active: #333a44;
+  --vp-c-control-disabled: #3e4c5a;
 
   // original ones
   --c-bg-light: #2b313a;
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index d6a00c94ae..c2c967040a 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -7,12 +7,28 @@
   // background colors
   --vp-c-bg: #fff;
   --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-elv: #fff;
 
   // text colors
   --vp-c-text: rgba(60 60 67);
   --vp-c-text-mute: rgb(60 60 67 / 78%);
   --vp-c-text-subtle: rgb(60 60 67 / 56%);
 
+  // border colors
+  --vp-c-border: #d7d9da;
+  --vp-c-gutter: #eaecef;
+  --vp-c-border-dark: #d1d4d7;
+
+  // shadow color
+  --vp-c-shadow: rgb(0 0 0 / 15%);
+  --vp-c-shadow-hard: #f1f3f5;
+
+  // control colors
+  --vp-c-control: #f8f9fa;
+  --vp-c-control-hover: #f1f3f5;
+  --vp-c-control-active: #e9ecef;
+  --vp-c-control-disabled: #ccc;
+
   // original ones
   --c-bg-light: #f3f4f5;
   --c-bg-lighter: #eee;
@@ -24,10 +40,6 @@
   --c-text-lighter: #4e6e8e;
   --c-text-lightest: #6a8bad;
 
-  // border colors
-  --vp-c-border: #eaecef;
-  --c-border-dark: #dfe2e5;
-
   // custom container colors
   --c-tip: #42b983;
   --c-tip-bg: var(--c-bg-light);
@@ -108,7 +120,7 @@
   --docsearch-hit-color: var(--c-text-light);
   --docsearch-hit-active-color: var(--vp-c-bg);
   --docsearch-hit-background: var(--vp-c-bg);
-  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
+  --docsearch-hit-shadow: 0 1px 3px 0 var(--vp-c-border-dark);
   --docsearch-footer-background: var(--vp-c-bg);
 }
 

From bd78c9f478505d128fa9dc561c19092d757491d1 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Sat, 20 Jul 2024 11:27:16 +0800
Subject: [PATCH 49/63] chore: tweaks

---
 .../plugin-copy-code/src/client/composables/useCopyCode.ts  | 6 +++---
 .../plugin-copy-code/src/client/styles/copy-code.scss       | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts b/plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts
index 58600491d4..a18405be00 100644
--- a/plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts
+++ b/plugins/features/plugin-copy-code/src/client/composables/useCopyCode.ts
@@ -66,7 +66,7 @@ export const useCopyCode = ({
   const page = usePageData()
 
   const insertCopyButton = (codeBlockElement: HTMLElement): void => {
-    if (codeBlockElement.hasAttribute('copy-code-registered')) return
+    if (codeBlockElement.hasAttribute('copy-code')) return
 
     const copyElement = document.createElement('button')
 
@@ -76,11 +76,11 @@ export const useCopyCode = ({
     copyElement.setAttribute('data-copied', locale.value.copied)
 
     codeBlockElement.parentElement?.insertBefore(copyElement, codeBlockElement)
-    codeBlockElement.setAttribute('copy-code-registered', '')
+    codeBlockElement.setAttribute('copy-code', '')
   }
 
   const appendCopyButton = async (): Promise<void> => {
-    document.body.classList.toggle('copy-code-disabled', !enabled.value)
+    document.body.classList.toggle('no-copy-code', !enabled.value)
     if (!enabled.value) return
 
     await nextTick()
diff --git a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
index 2ecefe43b6..74e21e36f3 100644
--- a/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
+++ b/plugins/features/plugin-copy-code/src/client/styles/copy-code.scss
@@ -84,12 +84,12 @@
     }
   }
 
-  .copy-code-disabled & {
+  .no-copy-code & {
     display: none;
   }
 }
 
-body:not(.copy-code-disabled) div[class*='language-']:hover {
+body:not(.no-copy-code) div[class*='language-']:hover {
   &::before {
     display: none;
   }

From e963f1f3168fab0dfce8cecc07ae73e0818ecb16 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Sat, 20 Jul 2024 11:32:29 +0800
Subject: [PATCH 50/63] chore: tweaks

---
 .../plugin-sass-palette/styles/default/palette.scss    | 10 ----------
 .../plugin-back-to-top/src/client/styles/vars.css      |  2 +-
 .../features/plugin-notice/src/client/styles/vars.css  |  2 +-
 plugins/pwa/plugin-pwa/src/client/styles/vars.css      |  2 +-
 tools/helper/src/client/styles/normalize.scss          |  2 +-
 5 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/plugins/development/plugin-sass-palette/styles/default/palette.scss b/plugins/development/plugin-sass-palette/styles/default/palette.scss
index c81d21f7cd..e08b5f57a1 100644
--- a/plugins/development/plugin-sass-palette/styles/default/palette.scss
+++ b/plugins/development/plugin-sass-palette/styles/default/palette.scss
@@ -4,16 +4,6 @@
 
 /** ensure default theme color */
 
-/** shadow */
-$box-shadow: (
-  light: #f0f1f2,
-  dark: #0f0e0d,
-) !default;
-$card-shadow: (
-  light: rgb(0 0 0 / 15%),
-  dark: rgb(0 0 0 / 30%),
-) !default;
-
 /* constants */
 $grey-dark: (
   light: #666,
diff --git a/plugins/features/plugin-back-to-top/src/client/styles/vars.css b/plugins/features/plugin-back-to-top/src/client/styles/vars.css
index 709a3fb0fe..75dfa28188 100644
--- a/plugins/features/plugin-back-to-top/src/client/styles/vars.css
+++ b/plugins/features/plugin-back-to-top/src/client/styles/vars.css
@@ -4,6 +4,6 @@
   --back-to-top-c-bg: var(--vp-c-bg);
   --back-to-top-c-accent: var(--vp-c-accent);
   --back-to-top-c-accent-hover: var(--vp-c-accent-hover);
-  --back-to-top-c-shadow: rgb(0 0 0 / 20%);
+  --back-to-top-c-shadow: var(--vp-c-shadow);
   --back-to-top-c-icon: currentcolor;
 }
diff --git a/plugins/features/plugin-notice/src/client/styles/vars.css b/plugins/features/plugin-notice/src/client/styles/vars.css
index c5bc115ed0..8666de15c7 100644
--- a/plugins/features/plugin-notice/src/client/styles/vars.css
+++ b/plugins/features/plugin-notice/src/client/styles/vars.css
@@ -3,7 +3,7 @@
   --notice-z-index: 1500;
   --notice-c-text: var(--vp-c-text);
   --notice-c-bg: var(--vp-c-bg-elv);
-  --notice-c-shadow: rgb(0 0 0 / 20%);
+  --notice-c-shadow: var(--vp-c-shadow);
   --notice-c-accent: var(--vp-c-accent);
   --notice-c-accent-hover: var(--vp-c-accent-hover);
   --notice-c-accent-text: var(--vp-c-accent-text);
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/vars.css b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
index 064c1c3012..3ca8cd3ba7 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/vars.css
+++ b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
@@ -2,7 +2,7 @@
   --pwa-z-index: 10;
   --pwa-c-bg: var(--vp-c-bg-elv);
   --pwa-c-text: var(--vp-c-text);
-  --pwa-c-shadow: rgb(0 0 0 / 15%);
+  --pwa-c-shadow: var(--vp-c-shadow);
   --pwa-c-accent: var(--vp-c-accent);
   --pwa-c-accent-hover: var(--vp-c-accent-hover);
   --pwa-c-accent-text: var(--vp-c-accent-text);
diff --git a/tools/helper/src/client/styles/normalize.scss b/tools/helper/src/client/styles/normalize.scss
index c9561f1ecd..ab0ad3c416 100644
--- a/tools/helper/src/client/styles/normalize.scss
+++ b/tools/helper/src/client/styles/normalize.scss
@@ -48,7 +48,7 @@ kbd {
   border: 1px solid #eee;
   border-radius: 0.25em;
 
-  box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 15%);
+  box-shadow: 1px 1px 4px 0 var(--vp-c-shadow);
 
   line-height: 1;
   letter-spacing: -0.1em;

From 0d7b075f3b363991e0a9f6017059a61f4f97c840 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Sat, 20 Jul 2024 11:58:31 +0800
Subject: [PATCH 51/63] chore: tweaks

---
 plugins/pwa/plugin-pwa/src/client/styles/modal.scss   | 6 +++---
 plugins/pwa/plugin-pwa/src/client/styles/vars.css     | 8 ++++----
 themes/theme-default/src/client/styles/vars-dark.scss | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
index df35657a6e..57922cc155 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
@@ -158,7 +158,7 @@
 
       &:hover,
       &:focus {
-        color: var(--pwa-content-light-color);
+        color: var(--pwa-c-text-light);
       }
     }
 
@@ -169,7 +169,7 @@
     h1 {
       margin-top: 0;
       margin-bottom: 7px;
-      color: var(--pwa-content-light-color);
+      color: var(--pwa-c-text-light);
       font-size: 34px;
 
       @media (max-width: 959px) {
@@ -280,7 +280,7 @@
     }
 
     li {
-      color: var(--pwa-content-light-color);
+      color: var(--pwa-c-text-light);
 
       font-weight: 600;
       font-size: 16px;
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/vars.css b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
index 3ca8cd3ba7..852e6ba8fc 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/vars.css
+++ b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
@@ -6,8 +6,8 @@
   --pwa-c-accent: var(--vp-c-accent);
   --pwa-c-accent-hover: var(--vp-c-accent-hover);
   --pwa-c-accent-text: var(--vp-c-accent-text);
-  --pwa-c-control: #3eaf7c;
-  --pwa-c-control-hover: #4abf8a;
-  --pwa-c-control-text: #fff;
-  --pwa-content-light-color: #666;
+  --pwa-c-control: var(--vp-c-control);
+  --pwa-c-control-hover: var(--vp-c-control-hover);
+  --pwa-c-control-text: var(--vp-c-control-text);
+  --pwa-c-text-light: #666;
 }
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 1622e546b6..7b146c8f6b 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -83,6 +83,6 @@
 
   // plugin-pwa
   body {
-    --pwa-content-light-color: #999;
+    --pwa-c-text-light: #999;
   }
 }

From 1880f7b96d7f97f0cc273460d2e11569e0cdfec8 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Sat, 20 Jul 2024 12:24:51 +0800
Subject: [PATCH 52/63] chore: tweaks

---
 .../src/client/components/VPNavbar.vue        |  2 +-
 .../client/components/VPNavbarDropdown.vue    |  2 +-
 .../src/client/components/VPSidebar.vue       |  2 +-
 .../theme-default/src/client/styles/vars.scss | 34 +++++++++++++++++--
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/themes/theme-default/src/client/components/VPNavbar.vue b/themes/theme-default/src/client/components/VPNavbar.vue
index 2e238efa1f..d2a8a64b8a 100644
--- a/themes/theme-default/src/client/components/VPNavbar.vue
+++ b/themes/theme-default/src/client/components/VPNavbar.vue
@@ -95,7 +95,7 @@ useUpdateDeviceStatus(
   padding: var(--navbar-padding-v) var(--navbar-padding-h);
   border-bottom: 1px solid var(--vp-c-border);
 
-  background-color: var(--c-bg-navbar);
+  background-color: var(--vp-navbar-c-bg);
 
   line-height: var(--navbar-line-height);
 
diff --git a/themes/theme-default/src/client/components/VPNavbarDropdown.vue b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
index bb4ec9e745..ec35688a54 100644
--- a/themes/theme-default/src/client/components/VPNavbarDropdown.vue
+++ b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
@@ -164,7 +164,7 @@ watch(
     border: 1px solid var(--vp-c-border);
     border-radius: 0.25rem;
 
-    background-color: var(--c-bg-navbar);
+    background-color: var(--vp-navbar-c-bg);
 
     text-align: left;
     white-space: nowrap;
diff --git a/themes/theme-default/src/client/components/VPSidebar.vue b/themes/theme-default/src/client/components/VPSidebar.vue
index 44f3dcd8c3..8294d96ab1 100644
--- a/themes/theme-default/src/client/components/VPSidebar.vue
+++ b/themes/theme-default/src/client/components/VPSidebar.vue
@@ -36,7 +36,7 @@ defineSlots<{
   margin: 0;
   border-right: 1px solid var(--vp-c-border);
 
-  background-color: var(--c-bg-sidebar);
+  background-color: var(--vp-sidebar-c-bg);
 
   font-size: 16px;
 
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index c2c967040a..e4670b4707 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -19,7 +19,7 @@
   --vp-c-gutter: #eaecef;
   --vp-c-border-dark: #d1d4d7;
 
-  // shadow color
+  // shadow colors
   --vp-c-shadow: rgb(0 0 0 / 15%);
   --vp-c-shadow-hard: #f1f3f5;
 
@@ -29,13 +29,41 @@
   --vp-c-control-active: #e9ecef;
   --vp-c-control-disabled: #ccc;
 
+  // layout colors
+  --vp-navbar-c-bg: var(--vp-c-bg);
+  --vp-sidebar-c-bg: var(--vp-c-bg);
+
+  // custom container colors
+  --vp-c-tip-text: var(--vp-c-green-text);
+  --vp-c-tip-hover: var(--vp-c-green-hover);
+  --vp-c-tip-bg: var(--vp-c-green-bg);
+  --vp-c-tip-soft: var(--vp-c-green-soft);
+  --vp-c-info-text: var(--vp-c-indigo-text);
+  --vp-c-info-hover: var(--vp-c-indigo-hover);
+  --vp-c-info-bg: var(--vp-c-indigo-bg);
+  --vp-c-info-soft: var(--vp-c-indigo-soft);
+  --vp-c-warning-text: var(--vp-c-yellow-text);
+  --vp-c-warning-hover: var(--vp-c-yellow-hover);
+  --vp-c-warning-bg: var(--vp-c-yellow-bg);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+  --vp-c-danger-text: var(--vp-c-red-text);
+  --vp-c-danger-hover: var(--vp-c-red-hover);
+  --vp-c-danger-bg: var(--vp-c-red-bg);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+  --vp-c-important-text: var(--vp-c-purple-text);
+  --vp-c-important-hover: var(--vp-c-purple-hover);
+  --vp-c-important-bg: var(--vp-c-purple-bg);
+  --vp-c-important-soft: var(--vp-c-purple-soft);
+  --vp-c-note-text: var(--vp-c-grey-text);
+  --vp-c-note-hover: var(--vp-c-grey-hover);
+  --vp-c-note-bg: var(--vp-c-grey-bg);
+  --vp-c-note-soft: var(--vp-c-grey-soft);
+
   // original ones
   --c-bg-light: #f3f4f5;
   --c-bg-lighter: #eee;
   --c-bg-dark: #ebebec;
   --c-bg-darker: #e6e6e6;
-  --c-bg-navbar: var(--vp-c-bg);
-  --c-bg-sidebar: var(--vp-c-bg);
   --c-text-light: #3a5169;
   --c-text-lighter: #4e6e8e;
   --c-text-lightest: #6a8bad;

From 19460a386df9775851ed6b205359dabfe8093132 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Sat, 20 Jul 2024 12:30:25 +0800
Subject: [PATCH 53/63] chore: tweaks

---
 themes/theme-default/src/client/styles/vars.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index e4670b4707..f6aa6a3332 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -1,3 +1,4 @@
+// === colors ===
 :root {
   // accent colors
   --vp-c-accent: #3eaf7c;
@@ -98,7 +99,7 @@
   --c-danger-text-quote: #c15b5b;
   --c-details-bg: #eee;
 
-  // badge component colors
+  // badge colors
   --c-badge-tip: var(--c-tip);
   --c-badge-warning: #ecc808;
   --c-badge-warning-text: var(--vp-c-bg);
@@ -111,10 +112,6 @@
   --c-code-group-tab-outline: var(var(--c-code-group-tab-title));
   --c-code-group-tab-active-border: var(--vp-c-accent);
 
-  // transition vars
-  --vp-t-color: 0.3s ease;
-  --vp-t-transform: 0.3s ease;
-
   // font vars
   --font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', roboto, oxygen,
     ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -128,6 +125,10 @@
   --content-width: 740px;
   --homepage-width: 960px;
 
+  // transition vars
+  --vp-t-color: 0.3s ease;
+  --vp-t-transform: 0.3s ease;
+
   // external-link-icon
   --external-link-icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
   --external-link-c-icon: var(--vp-c-text-mute);

From f8436986efbf19f265efa4f0f1991d04dd119937 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 21 Aug 2024 00:01:35 +0800
Subject: [PATCH 54/63] chore: tweaks

---
 .../plugin-search/src/client/styles/vars.css  |  2 +-
 .../src/client/components/global/CodeGroup.ts |  4 ++--
 .../src/client/styles/code-group.scss         |  8 ++++----
 .../theme-default/src/client/styles/vars.scss | 19 +++++++++----------
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/plugins/search/plugin-search/src/client/styles/vars.css b/plugins/search/plugin-search/src/client/styles/vars.css
index 7cf2c7a097..f35ee3fbaa 100644
--- a/plugins/search/plugin-search/src/client/styles/vars.css
+++ b/plugins/search/plugin-search/src/client/styles/vars.css
@@ -3,7 +3,7 @@
   --search-c-accent: var(--vp-c-accent);
   --search-c-text: var(--vp-c-text);
   --search-c-border: var(--vp-c-gutter);
-  --search-c-item-text: #5d81a5;
+  --search-c-item-text: var(--vp-c-text-subtle);
   --search-c-item-focus: var(--vp-c-bg-alt);
   --search-input-width: 8rem;
   --search-result-width: 20rem;
diff --git a/themes/theme-default/src/client/components/global/CodeGroup.ts b/themes/theme-default/src/client/components/global/CodeGroup.ts
index 11298a339b..1cfa95585a 100644
--- a/themes/theme-default/src/client/components/global/CodeGroup.ts
+++ b/themes/theme-default/src/client/components/global/CodeGroup.ts
@@ -50,11 +50,11 @@ export const CodeGroup = defineComponent({
           isDark,
           (val) => {
             groupRef.value!.style.setProperty(
-              '--c-code-group-tab-bg',
+              '--vp-c-code-tab-bg',
               val ? darkBg : lightBg,
             )
             groupRef.value!.style.setProperty(
-              '--c-code-group-tab-title',
+              '--vp-c-code-tab-title',
               val ? darkColor : lightColor,
             )
           },
diff --git a/themes/theme-default/src/client/styles/code-group.scss b/themes/theme-default/src/client/styles/code-group.scss
index a5aafc75e3..3763d9d976 100644
--- a/themes/theme-default/src/client/styles/code-group.scss
+++ b/themes/theme-default/src/client/styles/code-group.scss
@@ -14,7 +14,7 @@
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 
-  background-color: var(--c-code-group-tab-bg);
+  background-color: var(--vp-c-code-tab-bg);
 
   transition: background-color var(--t-color);
 
@@ -30,7 +30,7 @@
   border: 0;
 
   background-color: transparent;
-  color: var(--c-code-group-tab-title);
+  color: var(--vp-c-code-tab-title);
 
   font-weight: 600;
   font-size: 0.85em;
@@ -43,11 +43,11 @@
   }
 
   &:focus-visible {
-    outline: 1px solid var(--c-code-group-tab-outline);
+    outline: 1px solid;
   }
 
   &.active {
-    border-bottom: var(--c-code-group-tab-active-border) 1px solid;
+    border-bottom: var(--vp-c-code-tab-active) 1px solid;
   }
 }
 
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index b9105214dd..3279c6af49 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -60,6 +60,11 @@
   --vp-c-note-bg: var(--vp-c-grey-bg);
   --vp-c-note-soft: var(--vp-c-grey-soft);
 
+  // code group colors
+  --vp-c-code-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));
+  --vp-c-code-tab-bg: var(--code-bg-color, var(--code-c-bg));
+  --vp-c-code-tab-active: var(--vp-c-accent);
+
   // original ones
   --c-bg-light: #f3f4f5;
   --c-bg-lighter: #eee;
@@ -106,12 +111,6 @@
   --c-badge-danger: #dc2626;
   --c-badge-danger-text: var(--vp-c-bg);
 
-  // code group colors
-  --c-code-group-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));
-  --c-code-group-tab-bg: var(--code-bg-color, var(--code-c-bg));
-  --c-code-group-tab-outline: var(var(--c-code-group-tab-title));
-  --c-code-group-tab-active-border: var(--vp-c-accent);
-
   // font vars
   --font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', roboto, oxygen,
     ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -142,11 +141,11 @@
   --docsearch-highlight-color: var(--vp-c-accent);
   --docsearch-muted-color: var(--vp-c-text-mute);
   --docsearch-container-background: rgb(9 10 17 / 80%);
-  --docsearch-modal-background: var(--c-bg-light);
-  --docsearch-searchbox-background: var(--c-bg-lighter);
+  --docsearch-modal-background: var(--vp-c-bg-alt);
+  --docsearch-searchbox-background: var(--vp-c-gutter);
   --docsearch-searchbox-focus-background: var(--vp-c-bg);
   --docsearch-searchbox-shadow: inset 0 0 0 2px var(--vp-c-accent);
-  --docsearch-hit-color: var(--c-text-light);
+  --docsearch-hit-color: var(--vp-c-text-mute);
   --docsearch-hit-active-color: var(--vp-c-bg);
   --docsearch-hit-background: var(--vp-c-bg);
   --docsearch-hit-shadow: 0 1px 3px 0 var(--vp-c-border-dark);
@@ -155,5 +154,5 @@
 
 // plugin-search
 .search-box {
-  --search-c-item-text: var(--c-text-lighter);
+  --search-c-item-text: var(--vp-c-text-subtle);
 }

From 0fcb9ce6ca8379de0ead6c6eeefaff4be6d1df3f Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 21 Aug 2024 00:05:38 +0800
Subject: [PATCH 55/63] chore: tweaks

---
 themes/theme-default/src/client/styles/vars-dark.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 7b146c8f6b..70adf46336 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -72,7 +72,6 @@
   // plugin-docsearch
   /* stylelint-disable-next-line selector-class-pattern */
   .DocSearch {
-    --docsearch-logo-color: var(--vp-c-text);
     --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
     --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
       0 2px 2px 0 rgb(3 4 9 / 30%);

From fb2ae47f7e885a76754cae33e99f7fbaf7f55a62 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 21 Aug 2024 00:20:22 +0800
Subject: [PATCH 56/63] chore: tweaks

---
 .../theme-default/src/client/styles/vars.scss | 26 -------------------
 1 file changed, 26 deletions(-)

diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 3279c6af49..e1c4665067 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -34,32 +34,6 @@
   --vp-navbar-c-bg: var(--vp-c-bg);
   --vp-sidebar-c-bg: var(--vp-c-bg);
 
-  // custom container colors
-  --vp-c-tip-text: var(--vp-c-green-text);
-  --vp-c-tip-hover: var(--vp-c-green-hover);
-  --vp-c-tip-bg: var(--vp-c-green-bg);
-  --vp-c-tip-soft: var(--vp-c-green-soft);
-  --vp-c-info-text: var(--vp-c-indigo-text);
-  --vp-c-info-hover: var(--vp-c-indigo-hover);
-  --vp-c-info-bg: var(--vp-c-indigo-bg);
-  --vp-c-info-soft: var(--vp-c-indigo-soft);
-  --vp-c-warning-text: var(--vp-c-yellow-text);
-  --vp-c-warning-hover: var(--vp-c-yellow-hover);
-  --vp-c-warning-bg: var(--vp-c-yellow-bg);
-  --vp-c-warning-soft: var(--vp-c-yellow-soft);
-  --vp-c-danger-text: var(--vp-c-red-text);
-  --vp-c-danger-hover: var(--vp-c-red-hover);
-  --vp-c-danger-bg: var(--vp-c-red-bg);
-  --vp-c-danger-soft: var(--vp-c-red-soft);
-  --vp-c-important-text: var(--vp-c-purple-text);
-  --vp-c-important-hover: var(--vp-c-purple-hover);
-  --vp-c-important-bg: var(--vp-c-purple-bg);
-  --vp-c-important-soft: var(--vp-c-purple-soft);
-  --vp-c-note-text: var(--vp-c-grey-text);
-  --vp-c-note-hover: var(--vp-c-grey-hover);
-  --vp-c-note-bg: var(--vp-c-grey-bg);
-  --vp-c-note-soft: var(--vp-c-grey-soft);
-
   // code group colors
   --vp-c-code-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));
   --vp-c-code-tab-bg: var(--code-bg-color, var(--code-c-bg));

From fc0cdc3bfc0b56f30711f4de1dd235827c3b9267 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 21 Aug 2024 00:26:50 +0800
Subject: [PATCH 57/63] chore: update colors

---
 .../src/client/components/VPHomeFeatures.vue          |  5 +----
 .../src/client/components/VPHomeFooter.vue            |  2 +-
 .../src/client/components/VPHomeHero.vue              |  2 +-
 .../src/client/components/VPPageMeta.vue              |  2 +-
 .../src/client/styles/content/custom-container.scss   |  4 ++--
 themes/theme-default/src/client/styles/normalize.scss |  6 +++---
 themes/theme-default/src/client/styles/vars-dark.scss |  9 ---------
 themes/theme-default/src/client/styles/vars.scss      | 11 +----------
 8 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/themes/theme-default/src/client/components/VPHomeFeatures.vue b/themes/theme-default/src/client/components/VPHomeFeatures.vue
index 334b9b28e3..6b6a49c21d 100644
--- a/themes/theme-default/src/client/components/VPHomeFeatures.vue
+++ b/themes/theme-default/src/client/components/VPHomeFeatures.vue
@@ -51,9 +51,6 @@ const features = computed(() => frontmatter.value.features ?? [])
   h2 {
     padding-bottom: 0;
     border-bottom: none;
-
-    color: var(--c-text-light);
-
     font-weight: 500;
     font-size: 1.4rem;
 
@@ -63,7 +60,7 @@ const features = computed(() => frontmatter.value.features ?? [])
   }
 
   p {
-    color: var(--c-text-lighter);
+    color: var(--c-text-mute);
   }
 }
 </style>
diff --git a/themes/theme-default/src/client/components/VPHomeFooter.vue b/themes/theme-default/src/client/components/VPHomeFooter.vue
index 92433e076e..9a9fe946fd 100644
--- a/themes/theme-default/src/client/components/VPHomeFooter.vue
+++ b/themes/theme-default/src/client/components/VPHomeFooter.vue
@@ -23,7 +23,7 @@ const footerHtml = computed(() => frontmatter.value.footerHtml)
   padding: 2.5rem;
   border-top: 1px solid var(--vp-c-border);
 
-  color: var(--c-text-lighter);
+  color: var(--c-text-mute);
 
   text-align: center;
 
diff --git a/themes/theme-default/src/client/components/VPHomeHero.vue b/themes/theme-default/src/client/components/VPHomeHero.vue
index a15a7a619e..a0a4dcac26 100644
--- a/themes/theme-default/src/client/components/VPHomeHero.vue
+++ b/themes/theme-default/src/client/components/VPHomeHero.vue
@@ -145,7 +145,7 @@ const HomeHeroImage: FunctionalComponent = () => {
 
 .vp-hero-description {
   max-width: 35rem;
-  color: var(--c-text-lightest);
+  color: var(--c-text-mute);
   font-size: 1.6rem;
   line-height: 1.3;
 
diff --git a/themes/theme-default/src/client/components/VPPageMeta.vue b/themes/theme-default/src/client/components/VPPageMeta.vue
index 349e6e6033..ca5ac0a521 100644
--- a/themes/theme-default/src/client/components/VPPageMeta.vue
+++ b/themes/theme-default/src/client/components/VPPageMeta.vue
@@ -83,7 +83,7 @@ const contributors = useContributors()
       font-weight: 500;
 
       &:not(a) {
-        color: var(--c-text-lighter);
+        color: var(--c-text-mute);
       }
     }
 
diff --git a/themes/theme-default/src/client/styles/content/custom-container.scss b/themes/theme-default/src/client/styles/content/custom-container.scss
index 5b5d43d172..7e9e23c561 100644
--- a/themes/theme-default/src/client/styles/content/custom-container.scss
+++ b/themes/theme-default/src/client/styles/content/custom-container.scss
@@ -35,7 +35,7 @@
     }
 
     code {
-      background-color: var(--c-bg-dark);
+      background-color: var(--vp-c-gutter);
     }
   }
 
@@ -119,7 +119,7 @@
     background-color: var(--c-details-bg);
 
     code {
-      background-color: var(--c-bg-darker);
+      background-color: var(--vp-c-gutter);
     }
 
     h4 {
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index 2d6100f0fb..cdacaa3621 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -25,8 +25,8 @@ a {
 }
 
 code {
-  background-color: var(--c-bg-light);
-  color: var(--c-text-lighter);
+  background-color: var(--vp-c-bg-alt);
+  color: var(--c-text-mute);
   font-family: var(--code-font-family);
   transition: background-color var(--vp-t-color);
 
@@ -61,7 +61,7 @@ tr {
     transition: background-color var(--vp-t-color);
 
     code {
-      background-color: var(--c-bg-dark);
+      background-color: var(--vp-c-gutter);
     }
   }
 }
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 70adf46336..d44f65fa49 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -28,15 +28,6 @@
   --vp-c-control-active: #333a44;
   --vp-c-control-disabled: #3e4c5a;
 
-  // original ones
-  --c-bg-light: #2b313a;
-  --c-bg-lighter: #262c34;
-  --c-bg-dark: #343b44;
-  --c-bg-darker: #37404c;
-  --c-text-light: #96a7b7;
-  --c-text-lighter: #8b9eb0;
-  --c-text-lightest: #8094a8;
-
   // custom container colors
   --c-tip: #318a62;
   --c-warning: #e0ad15;
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index e1c4665067..1ddbcab131 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -39,18 +39,9 @@
   --vp-c-code-tab-bg: var(--code-bg-color, var(--code-c-bg));
   --vp-c-code-tab-active: var(--vp-c-accent);
 
-  // original ones
-  --c-bg-light: #f3f4f5;
-  --c-bg-lighter: #eee;
-  --c-bg-dark: #ebebec;
-  --c-bg-darker: #e6e6e6;
-  --c-text-light: #3a5169;
-  --c-text-lighter: #4e6e8e;
-  --c-text-lightest: #6a8bad;
-
   // custom container colors
   --c-tip: #42b983;
-  --c-tip-bg: var(--c-bg-light);
+  --c-tip-bg: var(--vp-c-bg-alt);
   --c-tip-title: var(--vp-c-text);
   --c-tip-text: var(--vp-c-text);
   --c-tip-text-accent: var(--c-text-accent);

From 9296f38a7b63203a143137af5c6599576e551635 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 21 Aug 2024 00:32:49 +0800
Subject: [PATCH 58/63] chore: tweaks

---
 plugins/pwa/plugin-pwa/src/client/styles/modal.scss   | 6 +++---
 plugins/pwa/plugin-pwa/src/client/styles/vars.css     | 2 +-
 themes/theme-default/src/client/styles/vars-dark.scss | 5 -----
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
index 57922cc155..630c13254e 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
@@ -158,7 +158,7 @@
 
       &:hover,
       &:focus {
-        color: var(--pwa-c-text-light);
+        color: var(--pwa-c-text-mute);
       }
     }
 
@@ -169,7 +169,7 @@
     h1 {
       margin-top: 0;
       margin-bottom: 7px;
-      color: var(--pwa-c-text-light);
+      color: var(--pwa-c-text-mute);
       font-size: 34px;
 
       @media (max-width: 959px) {
@@ -280,7 +280,7 @@
     }
 
     li {
-      color: var(--pwa-c-text-light);
+      color: var(--pwa-c-text-mute);
 
       font-weight: 600;
       font-size: 16px;
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/vars.css b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
index 852e6ba8fc..e45df481a0 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/vars.css
+++ b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
@@ -9,5 +9,5 @@
   --pwa-c-control: var(--vp-c-control);
   --pwa-c-control-hover: var(--vp-c-control-hover);
   --pwa-c-control-text: var(--vp-c-control-text);
-  --pwa-c-text-light: #666;
+  --pwa-c-text-mute: var(--vp-c-text-mute);
 }
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index d44f65fa49..5b30f677d7 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -70,9 +70,4 @@
     --docsearch-footer-shadow: inset 0 1px 0 0 rgb(73 76 106 / 50%),
       0 -4px 8px 0 rgb(0 0 0 / 20%);
   }
-
-  // plugin-pwa
-  body {
-    --pwa-c-text-light: #999;
-  }
 }

From 7f48564e04eb26f04e4cc7d130d20fd6afe21ac2 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Wed, 21 Aug 2024 00:46:21 +0800
Subject: [PATCH 59/63] chore: tweaks

---
 docs/themes/guidelines.md                     | 19 +++--
 docs/zh/themes/guidelines.md                  | 78 +++++++++++++++++++
 .../plugin-pwa/src/client/styles/modal.scss   |  2 +-
 .../pwa/plugin-pwa/src/client/styles/vars.css |  1 -
 .../src/client/styles/normalize.scss          |  6 +-
 .../src/client/styles/vars-dark.scss          |  2 +-
 .../theme-default/src/client/styles/vars.scss |  4 +-
 7 files changed, 99 insertions(+), 13 deletions(-)
 create mode 100644 docs/zh/themes/guidelines.md

diff --git a/docs/themes/guidelines.md b/docs/themes/guidelines.md
index 21431f50fa..a234e9cc34 100644
--- a/docs/themes/guidelines.md
+++ b/docs/themes/guidelines.md
@@ -32,13 +32,18 @@ A theme must implement the following color variables:
 
 - `--vp-c-text`: Default text color.
 - `--vp-c-text-mute`: Colors for muted texts, such as "inactive menu" or "info texts".
+- `--vp-c-text-subtle`: Color for subtle text, such as as "placeholders" or "caret icon".
 
 ### Background
 
 - `--vp-c-bg`: The bg color used for main screen.
 - `--vp-c-bg-alt`: The alternative bg color used in places such as "sidebar", or "code block".
 - `--vp-c-bg-elv`: The elevated bg color. This is used at parts where it "floats", such as "dialog".
-- `--vp-c-bg-soft`: The bg color to slightly distinguish some components from the page. Used for things like "carbon ads" or "table".
+
+### Shadow
+
+- `--vp-c-shadow`: The normal shadow color
+- `--vp-c-shadow-hard`: The shadow color used for hard shadow, such as "dialog".
 
 ### Accent
 
@@ -52,16 +57,20 @@ Accent color and brand colors which used for interactive components.
 
   The soft color must be semi transparent alpha channel. This is crucial because it allows adding multiple "soft" colors on top of each other to create a accent, such as when having inline code block inside custom containers.
 
-## Borders
+### Borders
 
 - `--vp-c-border`: Border color for interactive components. For example this should be used for a button outline.
+- `--vp-c-border-hard`: Darker border colors, which is used for "hard" borders closed to text, such as table and kbd.
 - `--vp-c-divider`: Color for separators, used to divide sections within the same components, such as having separator on "h2" heading.
-- `--vp-c-gutter`: Colors for gutter, used to divide components in the page. For example the header and the lest of the page.
 
-## Controls
+### Controls
 
-- `--vp-c-control-text`: Text color for focus state of interactive controls.
 - `--vp-c-control`: Background color for interactive controls, such as buttons or checkboxes.
 - `--vp-c-control-hover`: Background color for hover state of interactive controls.
 - `--vp-c-control-active`: Background color for active or focus state of interactive controls.
 - `--vp-c-control-disabled`: Color for disabled state of interactive controls.
+
+## Transition timing
+
+- `--vp-t-color`: Color transition timing.
+- `--vp-t-transform`: Transform transition timing.
diff --git a/docs/zh/themes/guidelines.md b/docs/zh/themes/guidelines.md
new file mode 100644
index 0000000000..5f73a14a80
--- /dev/null
+++ b/docs/zh/themes/guidelines.md
@@ -0,0 +1,78 @@
+# 主题指南
+
+为了避免主题开发者和用户设置不必要的选项，我们制定了一套主题创建时应遵循的指南。
+
+## DOM 结构
+
+A theme must implement the following DOM structure:
+
+一个主题必须实现以下 DOM 结构：
+
+- 容器：一个包含整个主题的元素。此元素应该有一个 `vp-container` 属性。
+- 内容：一个包含 markdown 渲染结果的元素。此元素应该有一个 `vp-content` 属性。
+
+一个主题可以有以下可选元素：
+
+- 导航栏：站点的导航栏。此元素应该有一个 `vp-navbar` 属性。
+- 侧边栏：站点的侧边栏。此元素应该有一个 `vp-sidebar` 属性。
+- 大纲：主要内容的标题或大纲。此元素应该有一个 `vp-outline` 属性。
+- 评论：评论服务（评论框和评论列表）。此元素应该有一个 `vp-comment` 属性。
+- 页脚：站点的页脚。此元素应该有一个 `vp-footer` 属性。
+
+一个主题必须：
+
+- 在暗色模式下，将 html 元素的 `data-theme` 设置为 `dark`。
+- 在亮色模式下，将 html 元素的 `data-theme` 设置为 `light`。
+
+如果主题只有一种颜色方案，主题仍然需要将 `data-theme` 设置为 `light` 或 `dark`，以指示默认颜色方案。
+
+## 颜色变量
+
+一个主题必须实现以下颜色变量：
+
+### 文字
+
+- `--vp-c-text`：默认文本颜色。
+- `--vp-c-text-mute`：用于静音文本的颜色，例如“非活动菜单”或“信息文本”。
+- `--vp-c-text-subtle`：用于细微文本的颜色，例如“占位符”或“插入符号”。
+
+### 背景
+
+- `--vp-c-bg`：用于主屏幕的背景颜色。
+- `--vp-c-bg-alt`：用于“侧边栏”或“代码块”等地方的备用背景颜色。
+- `--vp-c-bg-elv`：用于“浮动”部分的提升背景颜色，例如“对话框”。
+
+### 阴影
+
+- `--vp-c-shadow`：正常阴影颜色
+- `--vp-c-shadow-hard`：用于硬阴影的阴影颜色，例如“对话框”。
+
+### 强调
+
+用于交互组件的强调颜色和品牌颜色。
+
+- `--vp-c-accent`：主要用于彩色文本的最实色。它必须满足与放在 `--vp-c-accent-soft` 顶部时的对比度。
+- `--vp-c-accent-hover`：用于悬停状态的颜色。
+- `--vp-c-accent-bg`：用于实色背景的颜色。它必须满足与放在其顶部的 `--vp-c-accent-text` 的对比度。
+- `--vp-c-accent-text`：用于 `--vp-c-accent-bg` 背景的文本颜色。它必须满足与 `--vp-c-accent-bg` 的对比度。
+- `--vp-c-accent-soft`：用于自定义容器或徽章等细微背景的颜色。当将 `--vp-c-accent` 颜色放在其顶部时，它必须满足对比度。
+
+  软色必须是半透明的 alpha 通道。这是至关重要的，因为它允许将多个“软”颜色叠加在一起以创建强调，例如在自定义容器内部有内联代码块时。
+
+### 边框
+
+- `--vp-c-border`：交互组件的边框颜色。例如，这应该用于按钮轮廓。
+- `--vp-c-border-hard`：较暗的边框颜色，用于紧贴文本的“硬”边框，例如表格和 kbd。
+- `--vp-c-divider`：分隔符的颜色，用于在同一组件内分隔部分，例如在“h2”标题上放置分隔符。
+
+### 控件
+
+- `--vp-c-control`：用于交互控件（例如按钮或复选框）的背景颜色。
+- `--vp-c-control-hover`：用于交互控件悬停状态的背景颜色。
+- `--vp-c-control-active`：用于交互控件的活动或焦点状态的背景颜色。
+- `--vp-c-control-disabled`：用于交互控件禁用状态的颜色。
+
+## 过渡时间
+
+- `--vp-t-color`：颜色过渡时间。
+- `--vp-t-transform`：变换过渡时间。
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
index 630c13254e..aa23fe2fb5 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
+++ b/plugins/pwa/plugin-pwa/src/client/styles/modal.scss
@@ -416,7 +416,7 @@
 
   .cancel-button {
     background: var(--pwa-c-control);
-    color: var(--pwa-c-control-text);
+    color: var(--pwa-c-text);
 
     &:hover,
     &:focus {
diff --git a/plugins/pwa/plugin-pwa/src/client/styles/vars.css b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
index e45df481a0..5b1b3afc13 100644
--- a/plugins/pwa/plugin-pwa/src/client/styles/vars.css
+++ b/plugins/pwa/plugin-pwa/src/client/styles/vars.css
@@ -8,6 +8,5 @@
   --pwa-c-accent-text: var(--vp-c-accent-text);
   --pwa-c-control: var(--vp-c-control);
   --pwa-c-control-hover: var(--vp-c-control-hover);
-  --pwa-c-control-text: var(--vp-c-control-text);
   --pwa-c-text-mute: var(--vp-c-text-mute);
 }
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index cdacaa3621..f2387eb935 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -36,12 +36,12 @@ code {
 }
 
 kbd {
-  border-color: var(--vp-c-border-dark);
+  border-color: var(--vp-c-border-hard);
   transition: border-color var(--vp-t-color);
 }
 
 blockquote {
-  border-color: var(--vp-c-border-dark);
+  border-color: var(--vp-c-border-hard);
   color: var(--vp-c-text-mute);
   transition: border-color var(--vp-t-color);
 }
@@ -68,6 +68,6 @@ tr {
 
 th,
 td {
-  border-color: var(--vp-c-border-dark);
+  border-color: var(--vp-c-border-hard);
   transition: border-color var(--vp-t-color);
 }
diff --git a/themes/theme-default/src/client/styles/vars-dark.scss b/themes/theme-default/src/client/styles/vars-dark.scss
index 5b30f677d7..dda0e1375e 100644
--- a/themes/theme-default/src/client/styles/vars-dark.scss
+++ b/themes/theme-default/src/client/styles/vars-dark.scss
@@ -16,7 +16,7 @@
   // border colors
   --vp-c-border: #3e4c5a;
   --vp-c-gutter: #373f4c;
-  --vp-c-border-dark: #405064;
+  --vp-c-border-hard: #405064;
 
   // shadow color
   --vp-c-shadow: rgb(0 0 0 / 30%);
diff --git a/themes/theme-default/src/client/styles/vars.scss b/themes/theme-default/src/client/styles/vars.scss
index 1ddbcab131..cbcf757976 100644
--- a/themes/theme-default/src/client/styles/vars.scss
+++ b/themes/theme-default/src/client/styles/vars.scss
@@ -18,7 +18,7 @@
   // border colors
   --vp-c-border: #d7d9da;
   --vp-c-gutter: #eaecef;
-  --vp-c-border-dark: #d1d4d7;
+  --vp-c-border-hard: #d1d4d7;
 
   // shadow colors
   --vp-c-shadow: rgb(0 0 0 / 15%);
@@ -113,7 +113,7 @@
   --docsearch-hit-color: var(--vp-c-text-mute);
   --docsearch-hit-active-color: var(--vp-c-bg);
   --docsearch-hit-background: var(--vp-c-bg);
-  --docsearch-hit-shadow: 0 1px 3px 0 var(--vp-c-border-dark);
+  --docsearch-hit-shadow: 0 1px 3px 0 var(--vp-c-border-hard);
   --docsearch-footer-background: var(--vp-c-bg);
 }
 

From c95d3e45987ee4364a6edfd8e818924da01c5480 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Thu, 22 Aug 2024 02:24:03 +0800
Subject: [PATCH 60/63] chore: update docs

---
 docs/zh/themes/guidelines.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/zh/themes/guidelines.md b/docs/zh/themes/guidelines.md
index 5f73a14a80..11f51cc52a 100644
--- a/docs/zh/themes/guidelines.md
+++ b/docs/zh/themes/guidelines.md
@@ -4,8 +4,6 @@
 
 ## DOM 结构
 
-A theme must implement the following DOM structure:
-
 一个主题必须实现以下 DOM 结构：
 
 - 容器：一个包含整个主题的元素。此元素应该有一个 `vp-container` 属性。

From 8a9c52e667c1dbbc4b165510132525b6560fcea6 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Thu, 22 Aug 2024 02:55:41 +0800
Subject: [PATCH 61/63] chore: fix copy icon

---
 plugins/features/plugin-copy-code/src/client/styles/vars.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/features/plugin-copy-code/src/client/styles/vars.css b/plugins/features/plugin-copy-code/src/client/styles/vars.css
index 1ab9a5995d..689b780d94 100644
--- a/plugins/features/plugin-copy-code/src/client/styles/vars.css
+++ b/plugins/features/plugin-copy-code/src/client/styles/vars.css
@@ -1,6 +1,6 @@
 :root {
-  --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#808080' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
-  --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#808080' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
+  --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
+  --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
   --copy-code-c-text: var(--code-c-line-number);
   --copy-code-c-hover: var(--code-c-highlight-bg);
 }

From 9bcfbc188c1a90813fc95d9ad1b60083b47f2f10 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Thu, 22 Aug 2024 13:46:05 +0800
Subject: [PATCH 62/63] chore: fix text mute

---
 themes/theme-default/src/client/components/VPHomeFeatures.vue | 2 +-
 themes/theme-default/src/client/components/VPHomeFooter.vue   | 2 +-
 themes/theme-default/src/client/components/VPHomeHero.vue     | 2 +-
 themes/theme-default/src/client/components/VPPageMeta.vue     | 2 +-
 themes/theme-default/src/client/styles/normalize.scss         | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/themes/theme-default/src/client/components/VPHomeFeatures.vue b/themes/theme-default/src/client/components/VPHomeFeatures.vue
index 6b6a49c21d..f50f2565cd 100644
--- a/themes/theme-default/src/client/components/VPHomeFeatures.vue
+++ b/themes/theme-default/src/client/components/VPHomeFeatures.vue
@@ -60,7 +60,7 @@ const features = computed(() => frontmatter.value.features ?? [])
   }
 
   p {
-    color: var(--c-text-mute);
+    color: var(--vp-c-text-mute);
   }
 }
 </style>
diff --git a/themes/theme-default/src/client/components/VPHomeFooter.vue b/themes/theme-default/src/client/components/VPHomeFooter.vue
index 9a9fe946fd..13a7e086db 100644
--- a/themes/theme-default/src/client/components/VPHomeFooter.vue
+++ b/themes/theme-default/src/client/components/VPHomeFooter.vue
@@ -23,7 +23,7 @@ const footerHtml = computed(() => frontmatter.value.footerHtml)
   padding: 2.5rem;
   border-top: 1px solid var(--vp-c-border);
 
-  color: var(--c-text-mute);
+  color: var(--vp-c-text-mute);
 
   text-align: center;
 
diff --git a/themes/theme-default/src/client/components/VPHomeHero.vue b/themes/theme-default/src/client/components/VPHomeHero.vue
index a0a4dcac26..28b3c93c64 100644
--- a/themes/theme-default/src/client/components/VPHomeHero.vue
+++ b/themes/theme-default/src/client/components/VPHomeHero.vue
@@ -145,7 +145,7 @@ const HomeHeroImage: FunctionalComponent = () => {
 
 .vp-hero-description {
   max-width: 35rem;
-  color: var(--c-text-mute);
+  color: var(--vp-c-text-mute);
   font-size: 1.6rem;
   line-height: 1.3;
 
diff --git a/themes/theme-default/src/client/components/VPPageMeta.vue b/themes/theme-default/src/client/components/VPPageMeta.vue
index ca5ac0a521..1052e49921 100644
--- a/themes/theme-default/src/client/components/VPPageMeta.vue
+++ b/themes/theme-default/src/client/components/VPPageMeta.vue
@@ -83,7 +83,7 @@ const contributors = useContributors()
       font-weight: 500;
 
       &:not(a) {
-        color: var(--c-text-mute);
+        color: var(--vp-c-text-mute);
       }
     }
 
diff --git a/themes/theme-default/src/client/styles/normalize.scss b/themes/theme-default/src/client/styles/normalize.scss
index f2387eb935..c647fda944 100644
--- a/themes/theme-default/src/client/styles/normalize.scss
+++ b/themes/theme-default/src/client/styles/normalize.scss
@@ -26,7 +26,7 @@ a {
 
 code {
   background-color: var(--vp-c-bg-alt);
-  color: var(--c-text-mute);
+  color: var(--vp-c-text-mute);
   font-family: var(--code-font-family);
   transition: background-color var(--vp-t-color);
 

From 8070b0f88e5a4995daa56cf2e95bf55d907ee2e5 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Thu, 22 Aug 2024 13:47:06 +0800
Subject: [PATCH 63/63] chore: shrink icon size

---
 plugins/features/plugin-copy-code/src/client/styles/vars.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/features/plugin-copy-code/src/client/styles/vars.css b/plugins/features/plugin-copy-code/src/client/styles/vars.css
index 689b780d94..7b025235e6 100644
--- a/plugins/features/plugin-copy-code/src/client/styles/vars.css
+++ b/plugins/features/plugin-copy-code/src/client/styles/vars.css
@@ -1,6 +1,6 @@
 :root {
-  --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
-  --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
+  --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
+  --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
   --copy-code-c-text: var(--code-c-line-number);
   --copy-code-c-hover: var(--code-c-highlight-bg);
 }