diff --git a/docs/.vuepress/themes/components/CanIUseConfig.vue b/docs/.vuepress/themes/components/CanIUseConfig.vue
index 866239e6..18ca97cd 100644
--- a/docs/.vuepress/themes/components/CanIUseConfig.vue
+++ b/docs/.vuepress/themes/components/CanIUseConfig.vue
@@ -79,7 +79,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
   background-color: var(--vp-c-bg-safe);
   border: solid 1px var(--vp-c-divider);
   border-radius: 5px;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background border;
 }
 
@@ -120,7 +120,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
   font-size: 1em;
   background-color: var(--vp-c-bg);
   border: solid 1px var(--vp-c-divider);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: border background;
 }
 
@@ -180,7 +180,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
   padding: 3px 16px;
   background-color: var(--vp-c-bg);
   border: solid 1px var(--vp-c-divider);
-  transition: border var(--t-color), background-color var(--t-color);
+  transition: border var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .caniuse-browser-version select:first-of-type {
@@ -215,7 +215,7 @@ const { output, rendered } = useCaniuse({ feature, embedType, past, future })
   color: var(--vp-c-bg);
   background-color: var(--vp-c-brand-1);
   border-radius: 8px;
-  transition: background-color var(--t-color), color var(--t-color);
+  transition: background-color var(--vp-t-color), color var(--vp-t-color);
 }
 
 .caniuse-render-button:hover {
diff --git a/docs/.vuepress/themes/components/ColorPick.vue b/docs/.vuepress/themes/components/ColorPick.vue
index 38b9bd69..7e3bd581 100644
--- a/docs/.vuepress/themes/components/ColorPick.vue
+++ b/docs/.vuepress/themes/components/ColorPick.vue
@@ -57,7 +57,7 @@ onUnmounted(() => {
   background-color: var(--vp-c-bg-soft);
   border: solid 1px var(--vp-c-divider);
   border-radius: 32px;
-  transition: border-color var(--t-color), background-color var(--t-color);
+  transition: border-color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .pickr .pcr-button {
diff --git a/docs/.vuepress/themes/components/Demos.vue b/docs/.vuepress/themes/components/Demos.vue
index 6a33ff8a..ee672de1 100644
--- a/docs/.vuepress/themes/components/Demos.vue
+++ b/docs/.vuepress/themes/components/Demos.vue
@@ -58,7 +58,7 @@ defineProps<{
   border: solid 1px var(--vp-c-divider);
   border-radius: 8px;
   box-shadow: var(--vp-shadow-1);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: border background box-shadow;
 }
 
diff --git a/docs/.vuepress/themes/components/HeroTintPlateConfig.vue b/docs/.vuepress/themes/components/HeroTintPlateConfig.vue
index 77d74220..523f63d3 100644
--- a/docs/.vuepress/themes/components/HeroTintPlateConfig.vue
+++ b/docs/.vuepress/themes/components/HeroTintPlateConfig.vue
@@ -128,7 +128,7 @@ const output = computed(() => {
   background: linear-gradient(to bottom, #fff 0, transparent 40%, transparent 60%, #fff 140%);
 }
 
-.hero-tint-plate-wrapper .dark :deep(.bg-filter::after) {
+.hero-tint-plate-wrapper [data-theme="dark"] :deep(.bg-filter::after) {
   background: linear-gradient(to bottom, #1b1b1f 0, transparent 40%, transparent 60%, #1b1b1f 140%);
 }
 
@@ -142,7 +142,7 @@ const output = computed(() => {
   border-bottom: 1px solid var(--vp-c-divider);
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background-color, border-bottom-color, color;
 }
 
diff --git a/docs/.vuepress/themes/components/ThemeColors.vue b/docs/.vuepress/themes/components/ThemeColors.vue
index 32a156d0..54d185f2 100644
--- a/docs/.vuepress/themes/components/ThemeColors.vue
+++ b/docs/.vuepress/themes/components/ThemeColors.vue
@@ -73,6 +73,6 @@ const { lightColors, darkColors, css, reset } = useThemeColors()
 .theme-color .desc {
   font-size: 14px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 </style>
diff --git a/docs/.vuepress/themes/composables/theme-colors.ts b/docs/.vuepress/themes/composables/theme-colors.ts
index 085f3046..09f3d7e8 100644
--- a/docs/.vuepress/themes/composables/theme-colors.ts
+++ b/docs/.vuepress/themes/composables/theme-colors.ts
@@ -101,7 +101,7 @@ export function setupThemeColors() {
   }, { deep: true, immediate: true })
 
   function resolveContent(colors: ThemeColorsGroup[], type: 'light' | 'dark') {
-    const name = type === 'light' ? ':root' : '.dark'
+    const name = type === 'light' ? ':root' : '[data-theme="dark"]'
     let content = `${name} {\n`
     colors.forEach(({ name, group }) => {
       content += `\n  /**\n   * ${name}\n   * -------------------------------------------------------------------------- */\n\n`
diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md
index d942608d..fbb6edd1 100644
--- a/docs/notes/theme/config/主题配置.md
+++ b/docs/notes/theme/config/主题配置.md
@@ -267,7 +267,7 @@ interface BlogPostCover {
 - 如果该选项设置为 `false`，用户将无法切换主题。
 - 如果该选项设置为 `force-dark`，则用户将无法切换主题，但会强制将主题更改为深色。
 
-此选项注入一个内联脚本，从本地存储恢复用户设置。这确保在呈现页面之前应用 `.dark` 类以避免闪烁。
+此选项注入一个内联脚本，从本地存储恢复用户设置。这确保在呈现页面之前应用 `[data-theme="dark"]` 以避免闪烁。
 
 ### appearanceText
 
diff --git a/docs/notes/theme/guide/博客.md b/docs/notes/theme/guide/博客.md
index f14a7066..6dbd4504 100644
--- a/docs/notes/theme/guide/博客.md
+++ b/docs/notes/theme/guide/博客.md
@@ -68,7 +68,7 @@ export default defineUserConfig({
 
 <div
   style="width: 310px;margin: 0 auto;padding: 20px 20px 1px;text-align:center;border-radius: 4px;
-  background-color: var(--vp-c-bg-soft);transition: background-color var(--t-color);"
+  background-color: var(--vp-c-bg-soft);transition: background-color var(--vp-t-color);"
 >
   <VPBlogProfile />
 </div>
@@ -180,7 +180,7 @@ cover: /images/cover.jpg  # [!code ++]
 
 默认效果如下：
 
-<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--t-color)">
+<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--vp-t-color)">
 <VPPostItem
   :post="{ path: '/article/ecxnxxd0/', title: '文章标题',
   categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
@@ -204,7 +204,7 @@ cover: # [!code ++:5]
 
 效果如下:
 
-<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--t-color)">
+<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--vp-t-color)">
 <VPPostItem
   :post="{ path: '/article/ecxnxxd0/', title: '文章标题',
   categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
@@ -229,7 +229,7 @@ cover: # [!code ++:6]
 
 效果如下:
 
-<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--t-color)">
+<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--vp-t-color)">
 <VPPostItem
   :post="{ path: '/article/ecxnxxd0/', title: '文章标题',
   categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
@@ -257,7 +257,7 @@ cover: # [!code ++:5]
 
 效果如下:
 
-<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--t-color)">
+<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;transition: var(--vp-t-color)">
 <VPPostItem
   :post="{ path: '/article/ecxnxxd0/', title: '文章标题',
   categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
@@ -330,7 +330,7 @@ interface BlogPostCover {
 
 比如 `odd-left` 效果如下：
 
-<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;display: flex;flex-direction: column;gap: 24px;transition: var(--t-color)">
+<div style="background-color: var(--vp-c-bg-alt); padding: 20px 24px;display: flex;flex-direction: column;gap: 24px;transition: var(--vp-t-color)">
 <VPPostItem
   :post="{ path: '/article/ecxnxxd0/', title: '文章标题',
   categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
diff --git a/docs/notes/theme/guide/自定义样式.md b/docs/notes/theme/guide/自定义样式.md
index 986e55bf..10614928 100644
--- a/docs/notes/theme/guide/自定义样式.md
+++ b/docs/notes/theme/guide/自定义样式.md
@@ -76,7 +76,7 @@ export default defineClientConfig({
   --vp-c-text-3: rgba(60, 60, 67, 0.56);
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-c-brand-1: #8cccd5;
   --vp-c-brand-2: #6aa1b7;
   --vp-c-brand-3: #5086a1;
diff --git a/plugins/plugin-md-power/src/client/components/CodeRepl.vue b/plugins/plugin-md-power/src/client/components/CodeRepl.vue
index e05ac414..b664b81a 100644
--- a/plugins/plugin-md-power/src/client/components/CodeRepl.vue
+++ b/plugins/plugin-md-power/src/client/components/CodeRepl.vue
@@ -101,7 +101,7 @@ function runCode() {
   padding-top: 6px;
   margin: 0 -1.5rem;
   background-color: var(--vp-code-block-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .code-repl-title {
@@ -111,7 +111,7 @@ function runCode() {
   margin: 0 -1.5rem;
   background-color: var(--vp-code-block-bg);
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background, border;
 }
 
@@ -142,7 +142,7 @@ function runCode() {
   line-height: 48px;
   color: var(--vp-code-tab-active-text-color);
   white-space: nowrap;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .icon-run {
@@ -156,7 +156,7 @@ function runCode() {
   cursor: pointer;
   border: solid 1px var(--vp-c-text-3);
   border-radius: 100%;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, border;
 }
 
@@ -171,7 +171,7 @@ function runCode() {
   justify-content: space-between;
   padding: 4px 10px 4px 20px;
   border-top: solid 2px var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .output-head .title {
@@ -184,7 +184,7 @@ function runCode() {
 .output-head .output-version {
   font-size: 12px;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-head .icon-close {
@@ -193,7 +193,7 @@ function runCode() {
   margin-left: 20px;
   color: var(--vp-c-text-3);
   cursor: pointer;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-head .icon-close:hover {
@@ -227,7 +227,7 @@ function runCode() {
 .output-content .stderr pre,
 .output-content.rust .stderr pre.error {
   color: var(--vp-c-danger-1, #b8272c);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .output-content.rust .stderr pre {
@@ -237,6 +237,6 @@ function runCode() {
 .output-content .stderr + .stdout {
   margin-top: 12px;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 </style>
diff --git a/plugins/plugin-md-power/src/client/components/FileTreeItem.vue b/plugins/plugin-md-power/src/client/components/FileTreeItem.vue
index 6e0e319f..679161e2 100644
--- a/plugins/plugin-md-power/src/client/components/FileTreeItem.vue
+++ b/plugins/plugin-md-power/src/client/components/FileTreeItem.vue
@@ -60,7 +60,7 @@ onUnmounted(() => {
   background-color: var(--vp-c-bg-safe);
   border: solid 1px var(--vp-c-divider);
   border-radius: 8px;
-  transition: border var(--t-color), background-color var(--t-color);
+  transition: border var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .vp-file-tree .vp-file-tree-title {
@@ -69,7 +69,7 @@ onUnmounted(() => {
   font-weight: bold;
   color: var(--vp-c-text-1);
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: color var(--t-color), border-color var(--t-color);
+  transition: color var(--vp-t-color), border-color var(--vp-t-color);
 }
 
 .vp-file-tree ul {
@@ -106,7 +106,7 @@ onUnmounted(() => {
 .file-tree-item .tree-node.folder > .name {
   color: var(--vp-c-text-1);
   cursor: pointer;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node.folder > .name:hover {
@@ -130,7 +130,7 @@ onUnmounted(() => {
   mask: var(--icon) no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node .name.focus {
@@ -141,7 +141,7 @@ onUnmounted(() => {
   color: var(--vp-c-bg);
   background-color: var(--vp-c-brand-2);
   border-radius: 4px;
-  transition: color var(--t-color), background-color var(--t-color);
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node .name.focus:hover {
@@ -153,7 +153,7 @@ onUnmounted(() => {
   margin-left: 20px;
   overflow: hidden;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .file-tree-item .tree-node [class*="vpi-"] {
@@ -170,7 +170,7 @@ onUnmounted(() => {
   padding-left: 8px !important;
   margin: 0 0 0 6px !important;
   border-left: solid 1px var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .file-tree-item:not(.expanded) > ul {
diff --git a/plugins/plugin-md-power/src/client/components/Loading.vue b/plugins/plugin-md-power/src/client/components/Loading.vue
index 14e32ce3..10423bfe 100644
--- a/plugins/plugin-md-power/src/client/components/Loading.vue
+++ b/plugins/plugin-md-power/src/client/components/Loading.vue
@@ -30,7 +30,7 @@ defineProps<{
   font-size: 36px;
   color: currentcolor;
   background-color: inherit;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .md-power-loading.absolute {
diff --git a/plugins/plugin-md-power/src/client/components/Plot.vue b/plugins/plugin-md-power/src/client/components/Plot.vue
index 73bd5451..02e2b2c2 100644
--- a/plugins/plugin-md-power/src/client/components/Plot.vue
+++ b/plugins/plugin-md-power/src/client/components/Plot.vue
@@ -81,7 +81,7 @@ function onClick() {
   transition: color ease 0.25s, background-color ease 0.25s;
 }
 
-.dark .vp-plot {
+[data-theme="dark"] .vp-plot {
   background-color: var(--vp-c-bg-plot-dark, #fff);
 }
 
@@ -90,8 +90,8 @@ function onClick() {
   color: var(--vp-c-plot-light, #fff);
 }
 
-.dark .vp-plot.hover:hover,
-.dark .vp-plot.active {
+[data-theme="dark"] .vp-plot.hover:hover,
+[data-theme="dark"] .vp-plot.active {
   color: var(--vp-c-plot-dark, #000);
 }
 </style>
diff --git a/theme/src/client/components/Blog/VPBlog.vue b/theme/src/client/components/Blog/VPBlog.vue
index 127a099c..7e324005 100644
--- a/theme/src/client/components/Blog/VPBlog.vue
+++ b/theme/src/client/components/Blog/VPBlog.vue
@@ -102,7 +102,7 @@ const { theme, page } = useData()
   position: relative;
   min-height: calc(100vh - var(--vp-footer-height, 0px));
   padding: calc(var(--vp-nav-height) + 32px) 16px 32px;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 @media(min-width: 419px) {
diff --git a/theme/src/client/components/Blog/VPBlogArchives.vue b/theme/src/client/components/Blog/VPBlogArchives.vue
index 7c3d523b..f463db72 100644
--- a/theme/src/client/components/Blog/VPBlogArchives.vue
+++ b/theme/src/client/components/Blog/VPBlogArchives.vue
@@ -43,7 +43,7 @@ const { archives } = useArchives()
   font-weight: 700;
   color: var(--vp-c-brand-1);
   background-color: var(--vp-c-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .archives-title .icon {
@@ -54,7 +54,7 @@ const { archives } = useArchives()
   padding: 16px;
   margin: 0 -16px 24px;
   background-color: var(--vp-c-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .archive-title {
@@ -64,7 +64,7 @@ const { archives } = useArchives()
   font-size: 18px;
   font-weight: 700;
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: border-bottom var(--t-color);
+  transition: border-bottom var(--vp-t-color);
 }
 
 @media (min-width: 768px) {
@@ -77,7 +77,7 @@ const { archives } = useArchives()
     margin: 0 0 24px;
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
-    transition: var(--t-color);
+    transition: var(--vp-t-color);
     transition-property: box-shadow, background-color;
   }
 
@@ -89,7 +89,7 @@ const { archives } = useArchives()
     padding-left: 24px;
     margin: 0 -24px;
     border-bottom: solid 1px var(--vp-c-divider);
-    transition: border-bottom var(--t-color);
+    transition: border-bottom var(--vp-t-color);
   }
 }
 
diff --git a/theme/src/client/components/Blog/VPBlogCategories.vue b/theme/src/client/components/Blog/VPBlogCategories.vue
index 79609a8a..30f1782a 100644
--- a/theme/src/client/components/Blog/VPBlogCategories.vue
+++ b/theme/src/client/components/Blog/VPBlogCategories.vue
@@ -31,7 +31,7 @@ const { categories } = useBlogCategory()
   padding: 16px;
   margin: 0 -16px 32px;
   background-color: var(--vp-c-bg);
-  transition: background-color var(--t-color), box-shadow var(--t-color);
+  transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
 }
 
 @media (min-width: 768px) {
@@ -57,7 +57,7 @@ const { categories } = useBlogCategory()
   font-weight: 700;
   color: var(--vp-c-text-1);
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: color var(--t-color), border-color var(--t-color);
+  transition: color var(--vp-t-color), border-color var(--vp-t-color);
 }
 
 .categories-title .icon {
@@ -69,7 +69,7 @@ const { categories } = useBlogCategory()
     padding: 0 24px 12px;
     margin: 0 -24px;
     border-bottom: solid 1px var(--vp-c-divider);
-    transition: border-bottom var(--t-color);
+    transition: border-bottom var(--vp-t-color);
   }
 }
 
diff --git a/theme/src/client/components/Blog/VPBlogExtract.vue b/theme/src/client/components/Blog/VPBlogExtract.vue
index 96789091..ea68a092 100644
--- a/theme/src/client/components/Blog/VPBlogExtract.vue
+++ b/theme/src/client/components/Blog/VPBlogExtract.vue
@@ -123,7 +123,7 @@ const showBlogExtract = computed(() => {
   border-top-left-radius: 99px;
   border-bottom-left-radius: 99px;
   box-shadow: var(--vp-shadow-2);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background-color, border, box-shadow;
 }
 
@@ -131,7 +131,7 @@ const showBlogExtract = computed(() => {
   display: block;
   font-size: 16px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 @media (min-width: 768px) {
@@ -182,7 +182,7 @@ const showBlogExtract = computed(() => {
   transform: translateY(100%);
 }
 
-.dark .blog-modal-container {
+[data-theme="dark"] .blog-modal-container {
   box-shadow:
     0 -3px 12px rgba(0, 0, 0, 0.3),
     0 -1px 4px rgba(0, 0, 0, 0.27);
@@ -232,7 +232,7 @@ const showBlogExtract = computed(() => {
   font-weight: 600;
   color: var(--vp-c-brand-1);
   border-radius: 8px;
-  transition: all var(--t-color);
+  transition: all var(--vp-t-color);
 }
 
 .nav-link .icon {
@@ -255,7 +255,7 @@ const showBlogExtract = computed(() => {
   justify-content: center;
   font-size: 14px;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .profile-location p,
diff --git a/theme/src/client/components/Blog/VPBlogNav.vue b/theme/src/client/components/Blog/VPBlogNav.vue
index d245f005..9171ee7d 100644
--- a/theme/src/client/components/Blog/VPBlogNav.vue
+++ b/theme/src/client/components/Blog/VPBlogNav.vue
@@ -83,7 +83,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
   background-color: var(--vp-c-bg);
   border-radius: 8px;
   box-shadow: var(--vp-shadow-1);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background-color, color, box-shadow, transform;
   transform: scale(1);
 }
@@ -117,7 +117,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
 .nav-link .total {
   padding-right: 8px;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .nav-link .icon {
@@ -125,7 +125,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
   height: 1em;
   font-size: 1.2em;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .nav-link .icon-logo {
diff --git a/theme/src/client/components/Blog/VPBlogProfile.vue b/theme/src/client/components/Blog/VPBlogProfile.vue
index 2e1e2b73..20ce7e1c 100644
--- a/theme/src/client/components/Blog/VPBlogProfile.vue
+++ b/theme/src/client/components/Blog/VPBlogProfile.vue
@@ -50,7 +50,7 @@ const imageUrl = computed(() => {
   background-color: var(--vp-c-bg);
   border-radius: 8px;
   box-shadow: var(--vp-shadow-1);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background-color, color, box-shadow;
 }
 
@@ -74,7 +74,7 @@ const imageUrl = computed(() => {
 .vp-blog-profile h3,
 .vp-blog-profile p {
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-blog-profile .circle img {
@@ -90,7 +90,7 @@ const imageUrl = computed(() => {
   margin-top: 16px;
   font-size: 14px;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .profile-location p,
@@ -106,7 +106,7 @@ const imageUrl = computed(() => {
   padding-top: 12px;
   margin-top: 12px;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border var(--t-color);
+  transition: border var(--vp-t-color);
 }
 
 .profile-social :deep(.vp-social-link) {
diff --git a/theme/src/client/components/Blog/VPBlogTags.vue b/theme/src/client/components/Blog/VPBlogTags.vue
index a7ff27bd..2fb1febf 100644
--- a/theme/src/client/components/Blog/VPBlogTags.vue
+++ b/theme/src/client/components/Blog/VPBlogTags.vue
@@ -57,7 +57,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
   padding: 20px 16px;
   margin: 0 -16px;
   background-color: var(--vp-c-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .tags-container {
@@ -71,7 +71,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
   font-size: 20px;
   font-weight: 700;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .tags-title .icon {
@@ -100,7 +100,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
   background-color: var(--vp-tag-color);
   border: solid 1px var(--vp-tag-color);
   border-radius: 6px;
-  transition: all var(--t-color);
+  transition: all var(--vp-t-color);
 }
 
 .tag-title {
@@ -110,7 +110,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
   font-size: 20px;
   font-weight: 600;
   border-bottom: 1px solid var(--vp-c-divider);
-  transition: border-bottom var(--t-color);
+  transition: border-bottom var(--vp-t-color);
 }
 
 .tag-count {
@@ -119,7 +119,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
   margin-left: 4px;
   color: var(--vp-c-bg);
   border-left: 1px solid var(--vp-c-bg);
-  transition: color var(--t-color), border-left var(--t-color);
+  transition: color var(--vp-t-color), border-left var(--vp-t-color);
 }
 
 .tags .tag:hover,
@@ -142,7 +142,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
     background-color: var(--vp-c-bg);
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
-    transition: var(--t-color);
+    transition: var(--vp-t-color);
     transition-property: background-color, box-shadow;
   }
 
diff --git a/theme/src/client/components/Blog/VPCategories.vue b/theme/src/client/components/Blog/VPCategories.vue
index 450c5192..1f7dfaf5 100644
--- a/theme/src/client/components/Blog/VPCategories.vue
+++ b/theme/src/client/components/Blog/VPCategories.vue
@@ -40,7 +40,7 @@ defineProps<{
   width: fit-content;
   max-width: 100%;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-categories-item .post:hover {
diff --git a/theme/src/client/components/Blog/VPCategoriesGroup.vue b/theme/src/client/components/Blog/VPCategoriesGroup.vue
index beb9d548..c87e43a8 100644
--- a/theme/src/client/components/Blog/VPCategoriesGroup.vue
+++ b/theme/src/client/components/Blog/VPCategoriesGroup.vue
@@ -72,7 +72,7 @@ onMounted(() => {
   display: block;
   content: "";
   border-left: 1px solid var(--vp-c-divider);
-  transition: border var(--t-color);
+  transition: border var(--vp-t-color);
 }
 
 .vp-category-group .folder {
@@ -83,7 +83,7 @@ onMounted(() => {
   font-weight: 600;
   color: var(--vp-c-text-2);
   cursor: pointer;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-category-group .folder:hover {
diff --git a/theme/src/client/components/Blog/VPPagination.vue b/theme/src/client/components/Blog/VPPagination.vue
index 820b86d0..4e2fc5b2 100644
--- a/theme/src/client/components/Blog/VPPagination.vue
+++ b/theme/src/client/components/Blog/VPPagination.vue
@@ -55,7 +55,7 @@ const { theme } = useData()
   padding: 16px;
   margin: 0 -16px;
   background-color: var(--vp-c-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .btn {
@@ -66,7 +66,7 @@ const { theme } = useData()
   color: var(--vp-c-text-2);
   background-color: transparent;
   border-radius: 4px;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, background-color;
 }
 
@@ -89,7 +89,7 @@ const { theme } = useData()
     background-color: var(--vp-c-bg);
     border-radius: 6px;
     box-shadow: var(--vp-shadow-1);
-    transition: var(--t-color);
+    transition: var(--vp-t-color);
     transition-property: background-color, box-shadow;
   }
 
diff --git a/theme/src/client/components/Blog/VPPostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
index 9b35e0b8..87c84672 100644
--- a/theme/src/client/components/Blog/VPPostItem.vue
+++ b/theme/src/client/components/Blog/VPPostItem.vue
@@ -128,7 +128,7 @@ const coverStyles = computed(() => {
   padding: 16px;
   margin: 0 -16px;
   background-color: var(--vp-c-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-blog-post-item.has-cover:where(.left, .right) {
@@ -216,7 +216,7 @@ const coverStyles = computed(() => {
   color: var(--vp-c-text-2);
   background-color: var(--vp-c-brand-soft);
   border-radius: 4px;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, background-color;
 }
 
@@ -226,7 +226,7 @@ const coverStyles = computed(() => {
   margin-right: 8px;
   margin-left: 3px;
   color: var(--vp-c-text-3);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color;
 }
 
@@ -237,7 +237,7 @@ const coverStyles = computed(() => {
   font-size: 18px;
   font-weight: 600;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .blog-post-item-content h3 a {
@@ -263,7 +263,7 @@ const coverStyles = computed(() => {
     margin: 0;
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
-    transition: var(--t-color);
+    transition: var(--vp-t-color);
     transition-property: background-color, color, box-shadow;
     will-change: transform;
   }
@@ -285,7 +285,7 @@ const coverStyles = computed(() => {
   font-size: 14px;
   font-weight: 400;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .blog-post-item-content .post-meta > div {
@@ -313,7 +313,7 @@ const coverStyles = computed(() => {
   color: var(--vp-tag-color);
   background-color: var(--vp-tag-bg);
   border-radius: 3px;
-  transition: color var(--t-color), background-color var(--t-color);
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .blog-post-item-content .post-meta .tag-list .tag:last-of-type {
@@ -325,7 +325,7 @@ const coverStyles = computed(() => {
   height: 14px;
   margin: 0.3rem;
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .blog-post-item-content .post-meta a {
@@ -348,7 +348,7 @@ const coverStyles = computed(() => {
 
 .excerpt.vp-doc :deep(p strong) {
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .excerpt.vp-doc :deep([class^="language-"]) {
diff --git a/theme/src/client/components/Blog/VPShortPostList.vue b/theme/src/client/components/Blog/VPShortPostList.vue
index 3aec1152..a48f9d48 100644
--- a/theme/src/client/components/Blog/VPShortPostList.vue
+++ b/theme/src/client/components/Blog/VPShortPostList.vue
@@ -36,7 +36,7 @@ defineProps<{
   align-items: center;
   justify-content: space-between;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-blog-short-post-list .post-title {
@@ -45,7 +45,7 @@ defineProps<{
   margin-right: 14px;
   overflow: hidden;
   font-weight: 600;
-  transition: all var(--t-color);
+  transition: all var(--vp-t-color);
 
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
@@ -54,7 +54,7 @@ defineProps<{
 
 .vp-blog-short-post-list .post-time {
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-blog-short-post-list li:hover .post-title {
diff --git a/theme/src/client/components/Home/VPHome.vue b/theme/src/client/components/Home/VPHome.vue
index 1aaddf87..3dff8337 100644
--- a/theme/src/client/components/Home/VPHome.vue
+++ b/theme/src/client/components/Home/VPHome.vue
@@ -114,7 +114,7 @@ onUnmounted(() => {
 }
 
 .vp-home .layout {
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-home .layout:nth-child(odd) {
diff --git a/theme/src/client/components/Home/VPHomeBanner.vue b/theme/src/client/components/Home/VPHomeBanner.vue
index 0a3ce0b1..c2be7935 100644
--- a/theme/src/client/components/Home/VPHomeBanner.vue
+++ b/theme/src/client/components/Home/VPHomeBanner.vue
@@ -73,7 +73,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  transition: all var(--t-color);
+  transition: all var(--vp-t-color);
 }
 
 .vp-home-banner .banner-mask {
@@ -83,7 +83,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
   width: 100%;
   height: 100%;
   background-color: rgb(0, 0, 0);
-  transition: opacity var(--t-color);
+  transition: opacity var(--vp-t-color);
 }
 
 .vp-home-banner .container {
diff --git a/theme/src/client/components/Home/VPHomeCustom.vue b/theme/src/client/components/Home/VPHomeCustom.vue
index ad4b94d6..cd1fa03f 100644
--- a/theme/src/client/components/Home/VPHomeCustom.vue
+++ b/theme/src/client/components/Home/VPHomeCustom.vue
@@ -8,6 +8,6 @@ const props = defineProps<PlumeThemeHomeCustom>()
 
 <template>
   <VPHomeBox class="vp-home-custom" v-bind="props">
-    <Content class="vp-doc" />
+    <Content class="vp-doc" vp-content />
   </VPHomeBox>
 </template>
diff --git a/theme/src/client/components/Home/VPHomeFeature.vue b/theme/src/client/components/Home/VPHomeFeature.vue
index b69a0581..10d13f78 100644
--- a/theme/src/client/components/Home/VPHomeFeature.vue
+++ b/theme/src/client/components/Home/VPHomeFeature.vue
@@ -66,7 +66,7 @@ const isIconify = computed(() => {
   background-color: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-bg-soft);
   border-radius: 12px;
-  transition: border-color var(--t-color), background-color var(--t-color);
+  transition: border-color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .vp-home-feature.link:hover {
@@ -94,7 +94,7 @@ const isIconify = computed(() => {
   font-size: 24px;
   background-color: var(--vp-c-default-soft);
   border-radius: 6px;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .title {
diff --git a/theme/src/client/components/Home/VPHomeFeatures.vue b/theme/src/client/components/Home/VPHomeFeatures.vue
index 472460cf..42c17782 100644
--- a/theme/src/client/components/Home/VPHomeFeatures.vue
+++ b/theme/src/client/components/Home/VPHomeFeatures.vue
@@ -68,7 +68,7 @@ const grid = computed(() => {
   font-weight: 900;
   color: var(--vp-c-text-1);
   text-align: center;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .description {
@@ -77,7 +77,7 @@ const grid = computed(() => {
   line-height: 1.7;
   color: var(--vp-c-text-1);
   text-align: center;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 @media (min-width: 768px) {
diff --git a/theme/src/client/components/Home/VPHomeHero.vue b/theme/src/client/components/Home/VPHomeHero.vue
index 3071a8e1..3848e931 100644
--- a/theme/src/client/components/Home/VPHomeHero.vue
+++ b/theme/src/client/components/Home/VPHomeHero.vue
@@ -147,7 +147,7 @@ useHomeHeroTintPlate(
 
 .hero-tagline {
   color: var(--vp-c-home-hero-tagline, var(--vp-c-text-2));
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .hero-text {
@@ -156,7 +156,7 @@ useHomeHeroTintPlate(
   font-weight: 500;
   color: var(--vp-c-home-hero-text, var(--vp-c-text-3));
   white-space: pre-wrap;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .actions {
@@ -206,7 +206,7 @@ useHomeHeroTintPlate(
   height: 100%;
   content: "";
   background: linear-gradient(to bottom, var(--vp-home-hero-bg-filter) 0, transparent 45%, transparent 55%, var(--vp-home-hero-bg-filter) 140%);
-  transition: --vp-home-hero-bg-filter var(--t-color);
+  transition: --vp-home-hero-bg-filter var(--vp-t-color);
 }
 
 .bg-filter canvas {
diff --git a/theme/src/client/components/Home/VPHomeProfile.vue b/theme/src/client/components/Home/VPHomeProfile.vue
index 472daee0..ca3ff8f5 100644
--- a/theme/src/client/components/Home/VPHomeProfile.vue
+++ b/theme/src/client/components/Home/VPHomeProfile.vue
@@ -70,6 +70,6 @@ const profile = computed(() => {
   line-height: 1.5;
   color: var(--vp-c-text-2);
   white-space: pre-wrap;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 </style>
diff --git a/theme/src/client/components/Home/VPHomeTextImage.vue b/theme/src/client/components/Home/VPHomeTextImage.vue
index 1ecf0c0f..e7d856ae 100644
--- a/theme/src/client/components/Home/VPHomeTextImage.vue
+++ b/theme/src/client/components/Home/VPHomeTextImage.vue
@@ -92,21 +92,21 @@ const maxWidth = computed(() => {
   font-size: 16px;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .content-text ul h3 {
   margin: 0;
   font-size: 16px;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .content-text ul p {
   margin: 0;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .content-text ul li :only-child {
diff --git a/theme/src/client/components/Nav/VPNavBar.vue b/theme/src/client/components/Nav/VPNavBar.vue
index eaaf385e..362221b6 100644
--- a/theme/src/client/components/Nav/VPNavBar.vue
+++ b/theme/src/client/components/Nav/VPNavBar.vue
@@ -33,7 +33,7 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="vp-navbar" :class="classes">
+  <div class="vp-navbar" :class="classes" vp-navbar>
     <div class="wrapper">
       <div class="container">
         <div class="title">
@@ -79,7 +79,7 @@ watchPostEffect(() => {
   height: var(--vp-nav-height);
   white-space: nowrap;
   pointer-events: none;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background-color, color, border-bottom;
 }
 
@@ -134,7 +134,7 @@ watchPostEffect(() => {
 .title {
   flex-shrink: 0;
   height: calc(var(--vp-nav-height) - 1px);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .container > .title,
@@ -197,7 +197,7 @@ watchPostEffect(() => {
 
   height: var(--vp-nav-height);
 
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 @media (min-width: 960px) {
@@ -229,7 +229,7 @@ watchPostEffect(() => {
   margin-left: 8px;
   content: "";
   background-color: var(--vp-c-divider);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .menu + .appearance::before,
@@ -269,7 +269,7 @@ watchPostEffect(() => {
 .divider-line {
   width: 100%;
   height: 1px;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-navbar:not(.home) .divider-line {
diff --git a/theme/src/client/components/Nav/VPNavBarExtra.vue b/theme/src/client/components/Nav/VPNavBarExtra.vue
index ffd1c9a2..8a057003 100644
--- a/theme/src/client/components/Nav/VPNavBarExtra.vue
+++ b/theme/src/client/components/Nav/VPNavBarExtra.vue
@@ -89,7 +89,7 @@ const hasExtraContent = computed(
   font-weight: 700;
   line-height: 32px;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .item.appearance,
diff --git a/theme/src/client/components/Nav/VPNavBarHamburger.vue b/theme/src/client/components/Nav/VPNavBarHamburger.vue
index fe6e226e..56893694 100644
--- a/theme/src/client/components/Nav/VPNavBarHamburger.vue
+++ b/theme/src/client/components/Nav/VPNavBarHamburger.vue
@@ -55,7 +55,7 @@ defineEmits<(e: 'click') => void>()
   background-color: var(--vp-c-text-1);
   transition:
     top 0.25s,
-    background-color var(--t-color),
+    background-color var(--vp-t-color),
     transform 0.25s;
 }
 
@@ -116,7 +116,7 @@ defineEmits<(e: 'click') => void>()
   background-color: var(--vp-c-text-2);
   transition:
     top 0.25s,
-    background-color var(--t-color),
+    background-color var(--vp-t-color),
     transform 0.25s;
 }
 </style>
diff --git a/theme/src/client/components/Nav/VPNavBarMenuLink.vue b/theme/src/client/components/Nav/VPNavBarMenuLink.vue
index 8b6b0166..4ec26229 100644
--- a/theme/src/client/components/Nav/VPNavBarMenuLink.vue
+++ b/theme/src/client/components/Nav/VPNavBarMenuLink.vue
@@ -42,7 +42,7 @@ const { page } = useData()
   font-weight: 500;
   line-height: var(--vp-nav-height);
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .navbar-menu-link.active {
diff --git a/theme/src/client/components/Nav/VPNavBarTitle.vue b/theme/src/client/components/Nav/VPNavBarTitle.vue
index 3030c35b..15cf7c10 100644
--- a/theme/src/client/components/Nav/VPNavBarTitle.vue
+++ b/theme/src/client/components/Nav/VPNavBarTitle.vue
@@ -36,7 +36,7 @@ const routeLocale = useRouteLocale()
   font-weight: 600;
   color: var(--vp-c-text-1);
   border-bottom: 1px solid transparent;
-  transition: opacity var(--t-color), color var(--t-color), border-bottom var(--t-color);
+  transition: opacity var(--vp-t-color), color var(--vp-t-color), border-bottom var(--vp-t-color);
 }
 
 @media (min-width: 960px) {
diff --git a/theme/src/client/components/Nav/VPNavBarTranslations.vue b/theme/src/client/components/Nav/VPNavBarTranslations.vue
index e351634f..2789f1b2 100644
--- a/theme/src/client/components/Nav/VPNavBarTranslations.vue
+++ b/theme/src/client/components/Nav/VPNavBarTranslations.vue
@@ -44,6 +44,6 @@ const { currentLang, localeLinks } = useLangs()
   font-weight: 700;
   line-height: 32px;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 </style>
diff --git a/theme/src/client/components/Nav/VPNavScreen.vue b/theme/src/client/components/Nav/VPNavScreen.vue
index 216813aa..6c89ad37 100644
--- a/theme/src/client/components/Nav/VPNavScreen.vue
+++ b/theme/src/client/components/Nav/VPNavScreen.vue
@@ -48,7 +48,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   overflow-y: auto;
   pointer-events: auto;
   background-color: var(--vp-nav-screen-bg-color);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .container {
@@ -59,12 +59,12 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 .vp-nav-screen.fade-enter-active,
 .vp-nav-screen.fade-leave-active {
-  transition: opacity var(--t-color);
+  transition: opacity var(--vp-t-color);
 }
 
 .vp-nav-screen.fade-enter-active .container,
 .vp-nav-screen.fade-leave-active .container {
-  transition: transform var(--t-color);
+  transition: transform var(--vp-t-color);
 }
 
 .vp-nav-screen.fade-enter-from,
diff --git a/theme/src/client/components/Nav/VPNavScreenAppearance.vue b/theme/src/client/components/Nav/VPNavScreenAppearance.vue
index e1018b9d..75b5b354 100644
--- a/theme/src/client/components/Nav/VPNavScreenAppearance.vue
+++ b/theme/src/client/components/Nav/VPNavScreenAppearance.vue
@@ -25,7 +25,7 @@ const { theme } = useData()
   padding: 12px 14px 12px 16px;
   background-color: var(--vp-c-bg-soft);
   border-radius: 8px;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background-color;
 }
 
diff --git a/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
index e7ae9b4e..eed0824d 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
@@ -60,7 +60,7 @@ function toggle() {
   height: 48px;
   overflow: hidden;
   border-bottom: 1px solid var(--vp-c-divider);
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .vp-nav-screen-menu-group .items {
@@ -86,7 +86,7 @@ function toggle() {
   font-weight: 500;
   line-height: 24px;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .button:hover {
diff --git a/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
index 4a70ce46..afbfb5dd 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
@@ -33,7 +33,7 @@ const closeScreen = inject('close-screen') as () => void
   font-weight: 400;
   line-height: 32px;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-nav-screen-menu-group-link:hover {
diff --git a/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
index b003907b..febed163 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
@@ -34,6 +34,6 @@ defineProps<{
   font-weight: 700;
   line-height: 32px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 </style>
diff --git a/theme/src/client/components/Nav/VPNavScreenMenuLink.vue b/theme/src/client/components/Nav/VPNavScreenMenuLink.vue
index 09dad49c..acd373d7 100644
--- a/theme/src/client/components/Nav/VPNavScreenMenuLink.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuLink.vue
@@ -35,8 +35,8 @@ const closeScreen = inject('close-screen') as () => void
   color: var(--vp-c-text-1);
   border-bottom: 1px solid var(--vp-c-divider);
   transition:
-    border-color var(--t-color),
-    color var(--t-color);
+    border-color var(--vp-t-color),
+    color var(--vp-t-color);
 }
 
 .vp-nav-screen-menu-link:hover {
diff --git a/theme/src/client/components/Nav/VPNavScreenTranslations.vue b/theme/src/client/components/Nav/VPNavScreenTranslations.vue
index 08a610ab..a152bae1 100644
--- a/theme/src/client/components/Nav/VPNavScreenTranslations.vue
+++ b/theme/src/client/components/Nav/VPNavScreenTranslations.vue
@@ -49,7 +49,7 @@ function toggle() {
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .icon {
@@ -72,6 +72,6 @@ function toggle() {
   font-size: 13px;
   line-height: 32px;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 </style>
diff --git a/theme/src/client/components/VPBackToTop.vue b/theme/src/client/components/VPBackToTop.vue
index 1564930b..e01e284e 100644
--- a/theme/src/client/components/VPBackToTop.vue
+++ b/theme/src/client/components/VPBackToTop.vue
@@ -88,8 +88,8 @@ function handleClick() {
   border-radius: 100%;
   box-shadow: var(--vp-shadow-2);
   transition:
-    background-color var(--t-color),
-    box-shadow var(--t-color);
+    background-color var(--vp-t-color),
+    box-shadow var(--vp-t-color);
 }
 
 .vp-back-to-top .percent,
@@ -98,7 +98,7 @@ function handleClick() {
   top: 0;
   left: 0;
   opacity: 0;
-  transition: opacity 0.5s ease, color var(--t-color);
+  transition: opacity 0.5s ease, color var(--vp-t-color);
 }
 
 .vp-back-to-top .percent.show,
diff --git a/theme/src/client/components/VPBackdrop.vue b/theme/src/client/components/VPBackdrop.vue
index 92bc244c..51730c11 100644
--- a/theme/src/client/components/VPBackdrop.vue
+++ b/theme/src/client/components/VPBackdrop.vue
@@ -23,7 +23,7 @@ defineProps<{
   left: 0;
   z-index: var(--vp-z-index-backdrop);
   background: var(--vp-backdrop-bg-color);
-  transition: opacity var(--t-color);
+  transition: opacity var(--vp-t-color);
 }
 
 .vp-backdrop.fade-enter-from,
diff --git a/theme/src/client/components/VPButton.vue b/theme/src/client/components/VPButton.vue
index aa8e991f..75d282cd 100644
--- a/theme/src/client/components/VPButton.vue
+++ b/theme/src/client/components/VPButton.vue
@@ -58,7 +58,7 @@ function linkTo(e: Event) {
   text-align: center;
   white-space: nowrap;
   border: 1px solid transparent;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: border, color, background-color;
 }
 
diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index 31b42c45..2748af0b 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -85,7 +85,7 @@ watch(
     >
       <slot name="doc-top" />
       <div class="container">
-        <div v-if="enableAside" class="aside" :class="{ 'left-aside': leftAside }">
+        <div v-if="enableAside" class="aside" :class="{ 'left-aside': leftAside }" vp-outline>
           <div class="aside-curtain" />
           <div ref="asideEl" class="aside-container">
             <div class="aside-content">
@@ -123,6 +123,7 @@ watch(
               <Content
                 v-else class="vp-doc plume-content"
                 :class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']"
+                vp-content
               />
             </main>
             <VPDocFooter v-if="isPageDecrypted">
@@ -130,7 +131,7 @@ watch(
                 <slot name="doc-footer-before" />
               </template>
             </VPDocFooter>
-            <CommentService v-if="hasComments" :darkmode="isDark" />
+            <CommentService v-if="hasComments" :darkmode="isDark" vp-comment />
             <slot name="doc-after" />
           </div>
         </div>
@@ -250,7 +251,7 @@ watch(
   width: 224px;
   height: 32px;
   background: linear-gradient(transparent, var(--vp-aside-curtain-bg) 70%);
-  transition: --vp-aside-curtain-bg var(--t-color);
+  transition: --vp-aside-curtain-bg var(--vp-t-color);
 }
 
 .aside-content {
diff --git a/theme/src/client/components/VPDocAsideOutline.vue b/theme/src/client/components/VPDocAsideOutline.vue
index 4e7084fb..8fe91186 100644
--- a/theme/src/client/components/VPDocAsideOutline.vue
+++ b/theme/src/client/components/VPDocAsideOutline.vue
@@ -59,7 +59,7 @@ function handlePrint() {
   font-size: 13px;
   font-weight: 500;
   border-left: 1px solid var(--vp-c-divider);
-  transition: border-left var(--t-color);
+  transition: border-left var(--vp-t-color);
 }
 
 .outline-marker {
@@ -74,8 +74,8 @@ function handlePrint() {
   opacity: 0;
   transition:
     top 0.25s cubic-bezier(0, 1, 0.5, 1),
-    background-color var(--t-color),
-    opacity var(--t-color);
+    background-color var(--vp-t-color),
+    opacity var(--vp-t-color);
 }
 
 .outline-title {
diff --git a/theme/src/client/components/VPDocBreadcrumbs.vue b/theme/src/client/components/VPDocBreadcrumbs.vue
index c6111f39..098c605a 100644
--- a/theme/src/client/components/VPDocBreadcrumbs.vue
+++ b/theme/src/client/components/VPDocBreadcrumbs.vue
@@ -96,7 +96,7 @@ function resolveSidebar(
   padding-left: 8px;
   margin-bottom: 2rem;
   border-left: solid 2px var(--vp-c-brand-1);
-  transition: border-left var(--t-color);
+  transition: border-left var(--vp-t-color);
 }
 
 .vp-breadcrumb ol {
@@ -117,7 +117,7 @@ function resolveSidebar(
 .vp-breadcrumb .breadcrumb {
   font-weight: bold;
   color: var(--vp-c-brand-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-breadcrumb .breadcrumb:hover {
@@ -131,6 +131,6 @@ function resolveSidebar(
 .vp-breadcrumb .vpi-chevron-right {
   margin-left: 4px;
   color: var(--vp-c-border);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 </style>
diff --git a/theme/src/client/components/VPDocFooter.vue b/theme/src/client/components/VPDocFooter.vue
index 3b1d18c8..89a83e3a 100644
--- a/theme/src/client/components/VPDocFooter.vue
+++ b/theme/src/client/components/VPDocFooter.vue
@@ -107,7 +107,7 @@ const showFooter = computed(() => {
   line-height: 32px;
   color: var(--vp-c-brand-1);
   border: 0;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .edit-link-button:hover {
@@ -130,7 +130,7 @@ const showFooter = computed(() => {
   font-weight: 500;
   line-height: 24px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 @media (min-width: 640px) {
@@ -164,16 +164,16 @@ const showFooter = computed(() => {
   padding-right: 10px;
   font-weight: 500;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .contributors-info {
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 
   .contributor {
     color: var(--vp-c-text-3);
-    transition: color var(--t-color);
+    transition: color var(--vp-t-color);
   }
 }
 
@@ -183,7 +183,7 @@ const showFooter = computed(() => {
   padding-top: 24px;
   margin-top: 10px;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color);
+  transition: border-top var(--vp-t-color);
 }
 
 @media (min-width: 640px) {
@@ -206,7 +206,7 @@ const showFooter = computed(() => {
   padding: 11px 16px 13px;
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .pager-link:hover {
@@ -224,7 +224,7 @@ const showFooter = computed(() => {
   font-weight: 500;
   line-height: 20px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .title {
@@ -233,6 +233,6 @@ const showFooter = computed(() => {
   font-weight: 500;
   line-height: 20px;
   color: var(--vp-c-brand-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 </style>
diff --git a/theme/src/client/components/VPDocMeta.vue b/theme/src/client/components/VPDocMeta.vue
index 6fc036f5..0ee2715b 100644
--- a/theme/src/client/components/VPDocMeta.vue
+++ b/theme/src/client/components/VPDocMeta.vue
@@ -75,7 +75,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
   font-weight: 600;
   line-height: 1.5;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc-title.padding {
@@ -92,7 +92,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
   font-size: 14px;
   color: var(--vp-c-text-3);
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: color var(--t-color), border-bottom var(--t-color);
+  transition: color var(--vp-t-color), border-bottom var(--vp-t-color);
 }
 
 .vp-doc-meta p {
@@ -110,7 +110,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
 .vp-doc-meta .author .icon,
 .vp-doc-meta .author span {
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc-meta .tag {
diff --git a/theme/src/client/components/VPDocOutlineItem.vue b/theme/src/client/components/VPDocOutlineItem.vue
index 676be346..a336ba68 100644
--- a/theme/src/client/components/VPDocOutlineItem.vue
+++ b/theme/src/client/components/VPDocOutlineItem.vue
@@ -47,7 +47,7 @@ function handleClick({ target: el }: Event) {
   color: var(--vp-c-text-2);
   text-overflow: ellipsis;
   white-space: nowrap;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .outline-link:hover,
diff --git a/theme/src/client/components/VPEncryptForm.vue b/theme/src/client/components/VPEncryptForm.vue
index 74fbc831..e07c151f 100644
--- a/theme/src/client/components/VPEncryptForm.vue
+++ b/theme/src/client/components/VPEncryptForm.vue
@@ -84,7 +84,7 @@ async function onSubmit() {
   border: 1px solid var(--vp-c-border);
   border-radius: 4px;
   outline: none;
-  transition: border-color var(--t-color), background-color var(--t-color);
+  transition: border-color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .encrypt-input:focus {
@@ -106,7 +106,7 @@ async function onSubmit() {
   border: none;
   border-radius: 4px;
   outline: none;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .encrypt-button:hover {
diff --git a/theme/src/client/components/VPEncryptGlobal.vue b/theme/src/client/components/VPEncryptGlobal.vue
index 07ae46cc..c9bc3b57 100644
--- a/theme/src/client/components/VPEncryptGlobal.vue
+++ b/theme/src/client/components/VPEncryptGlobal.vue
@@ -36,7 +36,7 @@ const title = computed(() => profile.value?.name || site.value.title)
   width: 100%;
   overflow-y: auto;
   background-color: var(--vp-c-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 @media (min-width: 768px) {
@@ -95,6 +95,6 @@ const title = computed(() => profile.value?.name || site.value.title)
   line-height: 1.5;
   color: var(--vp-c-text-1);
   text-align: center;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 </style>
diff --git a/theme/src/client/components/VPEncryptPage.vue b/theme/src/client/components/VPEncryptPage.vue
index d1da1bac..7b616afb 100644
--- a/theme/src/client/components/VPEncryptPage.vue
+++ b/theme/src/client/components/VPEncryptPage.vue
@@ -36,7 +36,7 @@ const { theme } = useData()
     border: solid 1px var(--vp-c-divider);
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
-    transition: var(--t-color);
+    transition: var(--vp-t-color);
     transition-property: box-shadow, border-color;
   }
 
diff --git a/theme/src/client/components/VPFlyout.vue b/theme/src/client/components/VPFlyout.vue
index 6f55433a..6f96261d 100644
--- a/theme/src/client/components/VPFlyout.vue
+++ b/theme/src/client/components/VPFlyout.vue
@@ -58,7 +58,7 @@ function onBlur() {
 <style scoped>
 .vp-flyout {
   position: relative;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .text {
@@ -68,14 +68,14 @@ function onBlur() {
   font-weight: 500;
   line-height: normal;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .icon {
   width: 20px;
   height: 20px;
   fill: currentcolor;
-  transition: fill var(--t-color);
+  transition: fill var(--vp-t-color);
 }
 
 .menu {
@@ -129,7 +129,7 @@ function onBlur() {
   height: var(--vp-nav-height);
   padding: 0 10px;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .option-icon {
diff --git a/theme/src/client/components/VPFooter.vue b/theme/src/client/components/VPFooter.vue
index 1bf70314..67677920 100644
--- a/theme/src/client/components/VPFooter.vue
+++ b/theme/src/client/components/VPFooter.vue
@@ -22,6 +22,7 @@ onMounted(() => {
     ref="footer"
     class="vp-footer"
     :class="{ 'has-sidebar': hasSidebar }"
+    vp-footer
   >
     <div class="container">
       <p
@@ -45,7 +46,7 @@ onMounted(() => {
   padding: 24px;
   background-color: var(--vp-c-bg);
   border-top: 1px solid var(--vp-c-gutter);
-  transition: border-top var(--t-color), background-color var(--t-color);
+  transition: border-top var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .footer-no-border .vp-footer {
@@ -55,7 +56,7 @@ onMounted(() => {
 
 .vp-footer p {
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-footer :deep(a) {
@@ -63,8 +64,8 @@ onMounted(() => {
   text-decoration-line: underline;
   text-underline-offset: 2px;
   transition:
-    color var(--t-color),
-    text-underline-offset var(--t-color);
+    color var(--vp-t-color),
+    text-underline-offset var(--vp-t-color);
 }
 
 .vp-footer :deep(a:hover) {
diff --git a/theme/src/client/components/VPFriends.vue b/theme/src/client/components/VPFriends.vue
index 0678cbef..2a81c32a 100644
--- a/theme/src/client/components/VPFriends.vue
+++ b/theme/src/client/components/VPFriends.vue
@@ -59,7 +59,7 @@ const groups = computed(() => matter.value.groups || [])
   color: var(--vp-c-text-1);
   text-align: center;
   outline: none;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-friends .description {
@@ -68,7 +68,7 @@ const groups = computed(() => matter.value.groups || [])
   line-height: 28px;
   color: var(--vp-c-text-1);
   text-align: center;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .friends-list {
@@ -130,7 +130,7 @@ const groups = computed(() => matter.value.groups || [])
   line-height: 32px;
   color: var(--vp-c-brand-1);
   border: 0;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .edit-link-button:hover {
diff --git a/theme/src/client/components/VPFriendsGroup.vue b/theme/src/client/components/VPFriendsGroup.vue
index a846f00c..a58c2ffd 100644
--- a/theme/src/client/components/VPFriendsGroup.vue
+++ b/theme/src/client/components/VPFriendsGroup.vue
@@ -42,7 +42,7 @@ defineProps<{
   text-align: center;
   border-top: solid 1px var(--vp-c-divider);
   outline: none;
-  transition: color var(--t-color), border-color var(--t-color);
+  transition: color var(--vp-t-color), border-color var(--vp-t-color);
 }
 
 .vp-friends-group .description {
@@ -50,7 +50,7 @@ defineProps<{
   line-height: 28px;
   color: var(--vp-c-text-1);
   text-align: center;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .friends-list {
diff --git a/theme/src/client/components/VPFriendsItem.vue b/theme/src/client/components/VPFriendsItem.vue
index 9836512c..7f7978c9 100644
--- a/theme/src/client/components/VPFriendsItem.vue
+++ b/theme/src/client/components/VPFriendsItem.vue
@@ -71,7 +71,7 @@ const friendStyle = computed(() => {
   margin-bottom: 8px;
   background-color: var(--vp-friends-bg-color);
   border-radius: 6px;
-  transition: all var(--t-color);
+  transition: all var(--vp-t-color);
 }
 
 .avatar-link {
@@ -100,7 +100,7 @@ const friendStyle = computed(() => {
   font-size: 20px;
   font-weight: 700;
   color: var(--vp-friends-name-color);
-  transition: color var(--t-color), border-bottom var(--t-color);
+  transition: color var(--vp-t-color), border-bottom var(--vp-t-color);
 }
 
 .content :deep(.vp-social-links) {
@@ -122,7 +122,7 @@ const friendStyle = computed(() => {
   overflow: hidden;
   line-height: 1.5;
   color: var(--vp-friends-text-color);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
diff --git a/theme/src/client/components/VPImage.vue b/theme/src/client/components/VPImage.vue
index 9d4f6902..bbd8e5fd 100644
--- a/theme/src/client/components/VPImage.vue
+++ b/theme/src/client/components/VPImage.vue
@@ -41,11 +41,11 @@ export default {
 </template>
 
 <style scoped>
-html:not(.dark) .vp-image.dark {
+html:not([data-theme="dark"]) .vp-image.dark {
   display: none;
 }
 
-.dark .vp-image.light {
+[data-theme="dark"] .vp-image.light {
   display: none;
 }
 </style>
diff --git a/theme/src/client/components/VPLocalNav.vue b/theme/src/client/components/VPLocalNav.vue
index 72bc5eb0..f8efa9a9 100644
--- a/theme/src/client/components/VPLocalNav.vue
+++ b/theme/src/client/components/VPLocalNav.vue
@@ -82,9 +82,9 @@ const showLocalNav = computed(() => {
   border-top: 1px solid var(--vp-c-gutter);
   border-bottom: 1px solid var(--vp-c-gutter);
   transition:
-    border-color var(--t-color),
-    background-color var(--t-color),
-    border var(--t-color);
+    border-color var(--vp-t-color),
+    background-color var(--vp-t-color),
+    border var(--vp-t-color);
 }
 
 .vp-local-nav.fixed {
diff --git a/theme/src/client/components/VPLocalNavOutlineDropdown.vue b/theme/src/client/components/VPLocalNavOutlineDropdown.vue
index 961165f4..e4ba0d31 100644
--- a/theme/src/client/components/VPLocalNavOutlineDropdown.vue
+++ b/theme/src/client/components/VPLocalNavOutlineDropdown.vue
@@ -83,7 +83,7 @@ function scrollToTop() {
   font-weight: 500;
   line-height: 24px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-local-nav-outline-dropdown button:hover {
@@ -125,7 +125,7 @@ function scrollToTop() {
   border: 1px solid var(--vp-c-border);
   border-radius: 8px;
   box-shadow: var(--vp-shadow-3);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background-color, border, box-shadow;
 }
 
diff --git a/theme/src/client/components/VPMenu.vue b/theme/src/client/components/VPMenu.vue
index fd47243b..6f4e1fd1 100644
--- a/theme/src/client/components/VPMenu.vue
+++ b/theme/src/client/components/VPMenu.vue
@@ -35,7 +35,7 @@ defineProps<{
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
   box-shadow: var(--vp-shadow-3);
-  transition: background-color var(--t-color), border var(--t-color);
+  transition: background-color var(--vp-t-color), border var(--vp-t-color);
 }
 
 .vp-menu :deep(.group) {
@@ -46,7 +46,7 @@ defineProps<{
 .vp-menu :deep(.group + .group) {
   padding: 11px 12px 12px;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color);
+  transition: border-top var(--vp-t-color);
 }
 
 .vp-menu :deep(.group:last-child) {
@@ -56,7 +56,7 @@ defineProps<{
 .vp-menu :deep(.group + .item) {
   padding: 11px 16px 0;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color);
+  transition: border-top var(--vp-t-color);
 }
 
 .vp-menu :deep(.item) {
@@ -70,7 +70,7 @@ defineProps<{
   font-weight: 500;
   line-height: 28px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-menu :deep(.action) {
diff --git a/theme/src/client/components/VPMenuGroup.vue b/theme/src/client/components/VPMenuGroup.vue
index 72d84b04..6146a14a 100644
--- a/theme/src/client/components/VPMenuGroup.vue
+++ b/theme/src/client/components/VPMenuGroup.vue
@@ -27,7 +27,7 @@ defineProps<{
   padding: 12px 12px 0;
   margin: 12px -12px 0;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color);
+  transition: border-top var(--vp-t-color);
 }
 
 .vp-menu-group:first-child {
@@ -47,7 +47,7 @@ defineProps<{
   font-weight: 600;
   line-height: 32px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .title :deep(.vp-icon),
diff --git a/theme/src/client/components/VPMenuLink.vue b/theme/src/client/components/VPMenuLink.vue
index 0781cb12..d9dae409 100644
--- a/theme/src/client/components/VPMenuLink.vue
+++ b/theme/src/client/components/VPMenuLink.vue
@@ -34,7 +34,7 @@ const { page } = useData()
   padding: 12px 12px 0;
   margin: 12px -12px 0;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color);
+  transition: border-top var(--vp-t-color);
 }
 
 .link {
@@ -47,8 +47,8 @@ const { page } = useData()
   white-space: nowrap;
   border-radius: 6px;
   transition:
-    background-color var(--t-color),
-    color var(--t-color);
+    background-color var(--vp-t-color),
+    color var(--vp-t-color);
 }
 
 .link:hover {
diff --git a/theme/src/client/components/VPPage.vue b/theme/src/client/components/VPPage.vue
index be69d50b..81815593 100644
--- a/theme/src/client/components/VPPage.vue
+++ b/theme/src/client/components/VPPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vp-page">
     <slot name="page-top" />
-    <Content class="plume-content" />
+    <Content class="vp-doc plume-content" vp-content />
     <slot name="page-bottom" />
   </div>
 </template>
diff --git a/theme/src/client/components/VPSidebar.vue b/theme/src/client/components/VPSidebar.vue
index 5da8d57e..f0607a5e 100644
--- a/theme/src/client/components/VPSidebar.vue
+++ b/theme/src/client/components/VPSidebar.vue
@@ -53,6 +53,7 @@ onMounted(() => {
       ref="navEl"
       class="vp-sidebar"
       :class="{ open }"
+      vp-sidebar
       @click.stop
     >
       <div class="curtain" />
@@ -95,9 +96,9 @@ onMounted(() => {
   box-shadow: var(--vp-c-shadow-3);
   opacity: 0;
   transition:
-    opacity var(--t-color),
-    background-color var(--t-color),
-    box-shadow var(--t-color),
+    opacity var(--vp-t-color),
+    background-color var(--vp-t-color),
+    box-shadow var(--vp-t-color),
     transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
   transform: translateX(-100%);
 
@@ -113,7 +114,7 @@ onMounted(() => {
   transform: translateX(0);
 }
 
-.dark .vp-sidebar {
+[data-theme="dark"] .vp-sidebar {
   box-shadow: var(--vp-shadow-1);
 }
 
@@ -157,7 +158,7 @@ onMounted(() => {
     margin-right: -32px;
     margin-left: -32px;
     background-color: var(--vp-sidebar-bg-color);
-    transition: background-color var(--t-color);
+    transition: background-color var(--vp-t-color);
   }
 }
 
diff --git a/theme/src/client/components/VPSidebarGroup.vue b/theme/src/client/components/VPSidebarGroup.vue
index ac9b7e1e..f11ed54a 100644
--- a/theme/src/client/components/VPSidebarGroup.vue
+++ b/theme/src/client/components/VPSidebarGroup.vue
@@ -44,7 +44,7 @@ onBeforeUnmount(() => {
 .group + .group {
   padding-top: 10px;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border var(--t-color);
+  transition: border var(--vp-t-color);
 }
 
 @media (min-width: 960px) {
diff --git a/theme/src/client/components/VPSidebarItem.vue b/theme/src/client/components/VPSidebarItem.vue
index b5c2e0fc..4391db53 100644
--- a/theme/src/client/components/VPSidebarItem.vue
+++ b/theme/src/client/components/VPSidebarItem.vue
@@ -138,7 +138,7 @@ function onCaretClick() {
   bottom: 6px;
   left: -17px;
   width: 1px;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-sidebar-item.level-2.is-active > .item > .indicator,
@@ -158,7 +158,7 @@ function onCaretClick() {
   padding: 4px 0;
   font-size: 14px;
   line-height: 24px;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-sidebar-item.level-0 .text {
@@ -217,14 +217,14 @@ function onCaretClick() {
   margin-right: -7px;
   color: var(--vp-c-text-3);
   cursor: pointer;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .item :deep(.vp-icon) {
   margin: 0 0.25rem 0 0;
   font-size: 0.9em;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .item :deep(.vp-icon-img) {
@@ -262,7 +262,7 @@ function onCaretClick() {
   width: 18px;
   height: 18px;
   fill: currentcolor;
-  transition: transform var(--t-color);
+  transition: transform var(--vp-t-color);
   transform: rotate(90deg);
 }
 
@@ -277,7 +277,7 @@ function onCaretClick() {
 .vp-sidebar-item.level-5 .items {
   padding-left: 16px;
   border-left: 1px solid var(--vp-c-divider);
-  transition: border-left var(--t-color);
+  transition: border-left var(--vp-t-color);
 }
 
 .vp-sidebar-item.collapsed .items {
diff --git a/theme/src/client/components/VPSocialLink.vue b/theme/src/client/components/VPSocialLink.vue
index 10296e29..b73a1971 100644
--- a/theme/src/client/components/VPSocialLink.vue
+++ b/theme/src/client/components/VPSocialLink.vue
@@ -32,7 +32,7 @@ const svg = computed(() => {
   width: 36px;
   height: 36px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-social-link:hover {
diff --git a/theme/src/client/components/VPSwitch.vue b/theme/src/client/components/VPSwitch.vue
index 54d9a44a..962ddf0f 100644
--- a/theme/src/client/components/VPSwitch.vue
+++ b/theme/src/client/components/VPSwitch.vue
@@ -59,7 +59,7 @@
   color: var(--vp-c-text-2);
 }
 
-.dark .icon :deep([class^="vpi-"]) {
+[data-theme="dark"] .icon :deep([class^="vpi-"]) {
   color: var(--vp-c-text-1);
   transition: opacity 0.25s !important;
 }
diff --git a/theme/src/client/components/VPSwitchAppearance.vue b/theme/src/client/components/VPSwitchAppearance.vue
index 8c84d6a8..0e74f163 100644
--- a/theme/src/client/components/VPSwitchAppearance.vue
+++ b/theme/src/client/components/VPSwitchAppearance.vue
@@ -39,15 +39,15 @@ watchPostEffect(() => {
   opacity: 0;
 }
 
-.dark .sun {
+[data-theme="dark"] .sun {
   opacity: 0;
 }
 
-.dark .moon {
+[data-theme="dark"] .moon {
   opacity: 1;
 }
 
-.dark .vp-switch-appearance :deep(.check) {
+[data-theme="dark"] .vp-switch-appearance :deep(.check) {
   /* rtl:ignore */
   transform: translateX(18px);
 }
diff --git a/theme/src/client/components/global/VPBadge.vue b/theme/src/client/components/global/VPBadge.vue
index 82bac9a7..354a4bea 100644
--- a/theme/src/client/components/global/VPBadge.vue
+++ b/theme/src/client/components/global/VPBadge.vue
@@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
   line-height: 22px;
   border: 1px solid transparent;
   border-radius: 12px;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, background-color, border-color;
   transform: translateY(-2px);
 }
diff --git a/theme/src/client/components/global/VPCard.vue b/theme/src/client/components/global/VPCard.vue
index b0c133db..02a8bc35 100644
--- a/theme/src/client/components/global/VPCard.vue
+++ b/theme/src/client/components/global/VPCard.vue
@@ -42,7 +42,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
   border: solid 1px var(--vp-c-divider);
   border-radius: 8px;
   box-shadow: var(--vp-shadow-1);
-  transition: border-color var(--t-color), box-shadow var(--t-color);
+  transition: border-color var(--vp-t-color), box-shadow var(--vp-t-color);
 }
 
 .vp-card-wrapper:hover {
@@ -62,7 +62,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
   font-size: 20px;
   font-weight: 700;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-card-wrapper .body :first-child {
diff --git a/theme/src/client/components/global/VPImageCard.vue b/theme/src/client/components/global/VPImageCard.vue
index 375cddfc..30e4c56d 100644
--- a/theme/src/client/components/global/VPImageCard.vue
+++ b/theme/src/client/components/global/VPImageCard.vue
@@ -60,7 +60,7 @@ const date = computed(() => {
 .vp-image-card {
   margin: 16px 0;
   box-shadow: var(--vp-shadow-2);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: box-shadow;
 }
 
@@ -91,7 +91,7 @@ const date = computed(() => {
   background-color: rgba(0, 0, 0, 0.5);
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  transition: transform var(--t-color);
+  transition: transform var(--vp-t-color);
   transform: translateY(calc(100% - 60px));
 }
 
diff --git a/theme/src/client/components/global/VPLinkCard.vue b/theme/src/client/components/global/VPLinkCard.vue
index 4bcad02a..64f26e4c 100644
--- a/theme/src/client/components/global/VPLinkCard.vue
+++ b/theme/src/client/components/global/VPLinkCard.vue
@@ -39,7 +39,7 @@ defineProps<{
   border: solid 1px var(--vp-c-divider);
   border-radius: 8px;
   box-shadow: var(--vp-shadow-1);
-  transition: border-color var(--t-color), box-shadow var(--t-color), background-color var(--t-color);
+  transition: border-color var(--vp-t-color), box-shadow var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .vp-link-card:hover {
diff --git a/theme/src/client/composables/dark-mode.ts b/theme/src/client/composables/dark-mode.ts
index f273a23e..b3a658b8 100644
--- a/theme/src/client/composables/dark-mode.ts
+++ b/theme/src/client/composables/dark-mode.ts
@@ -24,6 +24,9 @@ export function setupDarkMode(app: App): void {
       : appearance
         ? useDark({
           storageKey: 'vuepress-theme-appearance',
+          attribute: 'data-theme',
+          valueLight: 'light',
+          valueDark: 'dark',
           disableTransition,
           initialValue: () =>
             typeof appearance === 'string' ? appearance : 'auto',
diff --git a/theme/src/client/features/components/RepoCard.vue b/theme/src/client/features/components/RepoCard.vue
index 12fa2936..13f81d07 100644
--- a/theme/src/client/features/components/RepoCard.vue
+++ b/theme/src/client/features/components/RepoCard.vue
@@ -46,7 +46,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
   margin: 16px 0;
   border: solid 1px var(--vp-c-divider);
   border-radius: 8px;
-  transition: border-color var(--t-color);
+  transition: border-color var(--vp-t-color);
 }
 
 .vp-repo-card:hover {
@@ -78,7 +78,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
   font-weight: 600;
   color: var(--vp-c-brand-1);
   text-decoration: none;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-repo-card .repo-name a:hover {
@@ -93,7 +93,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
   color: var(--vp-c-text-2);
   border: solid 1px var(--vp-c-divider);
   border-radius: 22px;
-  transition: color var(--t-color), border var(--t-color);
+  transition: color var(--vp-t-color), border var(--vp-t-color);
 }
 
 .vp-repo-card .repo-desc {
@@ -101,7 +101,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
   font-size: 14px;
   line-height: 22px;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-repo-card .repo-info {
@@ -118,12 +118,12 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
   gap: 0 4px;
   align-items: center;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-repo-card .repo-info p [class^="vpi-github-"] {
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-repo-card .repo-language {
@@ -137,7 +137,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7a.75.75 0 1 1-1.072 1.05A2.5 2.5 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.5 2.5 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.25.25 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z'/%3E%3C/svg%3E");
 
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
   transform: translateY(2px);
 }
 
diff --git a/theme/src/client/layouts/Layout.vue b/theme/src/client/layouts/Layout.vue
index e3690f46..0dcaa397 100644
--- a/theme/src/client/layouts/Layout.vue
+++ b/theme/src/client/layouts/Layout.vue
@@ -31,6 +31,7 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
   <div
     v-if="frontmatter.pageLayout !== false && frontmatter.pageLayout !== 'custom'" class="theme-plume vp-layout"
     :class="frontmatter.pageClass"
+    vp-container
   >
     <VPEncryptGlobal v-if="!isGlobalDecrypted" />
 
@@ -175,7 +176,7 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
       <slot name="layout-bottom" />
     </template>
   </div>
-  <Content v-else />
+  <Content v-else vp-container vp-content />
 </template>
 
 <style scoped>
diff --git a/theme/src/client/layouts/NotFound.vue b/theme/src/client/layouts/NotFound.vue
index 556fced5..4b086965 100644
--- a/theme/src/client/layouts/NotFound.vue
+++ b/theme/src/client/layouts/NotFound.vue
@@ -115,7 +115,7 @@ const { theme } = useData()
   height: 1px;
   margin: 24px auto 18px;
   background-color: var(--vp-c-divider);
-  transition: background-color  var(--t-color);
+  transition: background-color  var(--vp-t-color);
 }
 
 .quote {
@@ -124,7 +124,7 @@ const { theme } = useData()
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .action {
@@ -139,7 +139,7 @@ const { theme } = useData()
   color: var(--vp-c-brand-1);
   border: 1px solid var(--vp-c-brand-1);
   border-radius: 16px;
-  transition: color var(--t-color), border-color var(--t-color);
+  transition: color var(--vp-t-color), border-color var(--vp-t-color);
 }
 
 .link:hover {
diff --git a/theme/src/client/styles/code.css b/theme/src/client/styles/code.css
index ebf10ecc..0565838d 100644
--- a/theme/src/client/styles/code.css
+++ b/theme/src/client/styles/code.css
@@ -1,8 +1,8 @@
-.dark .vp-code span {
+[data-theme="dark"] .vp-code span {
   color: var(--shiki-dark, rgba(235, 235, 245, 0.6));
 }
 
-html:not(.dark) .vp-code span {
+html:not([data-theme="dark"]) .vp-code span {
   color: var(--shiki-light, rgba(60, 60, 67, 0.78));
 }
 
@@ -12,7 +12,7 @@ html:not(.dark) .vp-code span {
   margin: 16px -24px;
   overflow-x: auto;
   background-color: var(--vp-code-block-bg);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 @media (min-width: 640px) {
@@ -41,7 +41,7 @@ html:not(.dark) .vp-code span {
   font-size: 0.75rem;
   color: var(--vp-code-line-number-color);
   content: attr(data-title);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc div[class*="language-"] code {
@@ -52,7 +52,7 @@ html:not(.dark) .vp-code span {
   font-size: var(--vp-code-font-size);
   line-height: var(--vp-code-line-height);
   color: var(--vp-code-block-color);
-  transition: background-color var(--t-color), color var(--t-color);
+  transition: background-color var(--vp-t-color), color var(--vp-t-color);
 
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
@@ -121,7 +121,7 @@ html:not(.dark) .vp-code span {
 
   /* rtl:ignore */
   border-right: 1px solid var(--vp-code-block-divider-color);
-  transition: border-right var(--t-color), color var(--t-color);
+  transition: border-right var(--vp-t-color), color var(--vp-t-color);
 }
 
 .vp-doc div[class*="language-"].line-numbers-mode .line-numbers .line-number {
@@ -347,7 +347,7 @@ html:not(.dark) .vp-code span {
   height: 44px;
   cursor: pointer;
   background: linear-gradient(to bottom, transparent 0%, var(--vp-code-bg-collapsed-lines) 50%, var(--vp-code-bg-collapsed-lines) 100%);
-  transition: --vp-code-bg-collapsed-lines var(--t-color);
+  transition: --vp-code-bg-collapsed-lines var(--vp-t-color);
 }
 
 .vp-doc div[class*="language-"].has-collapsed .collapsed-lines:hover {
diff --git a/theme/src/client/styles/content.css b/theme/src/client/styles/content.css
index 00d655b4..c3dae243 100644
--- a/theme/src/client/styles/content.css
+++ b/theme/src/client/styles/content.css
@@ -31,7 +31,7 @@
   line-height: 32px;
   letter-spacing: -0.02em;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color), color var(--t-color);
+  transition: border-top var(--vp-t-color), color var(--vp-t-color);
 }
 
 .vp-doc h2:first-of-type {
@@ -73,7 +73,7 @@
   color: var(--vp-c-brand-1);
   content: var(--vp-header-anchor-symbol);
   opacity: 0;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc .header-anchor:hover {
@@ -123,7 +123,7 @@
 .vp-doc summary {
   margin: 16px 0;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc p {
@@ -135,7 +135,7 @@
   margin: 16px 0;
   color: var(--vp-c-text-2);
   border-left: 2px solid var(--vp-c-divider);
-  transition: border-color var(--t-color), color var(--t-color);
+  transition: border-color var(--vp-t-color), color var(--vp-t-color);
 }
 
 .vp-doc blockquote > p {
@@ -148,7 +148,7 @@
   color: var(--vp-c-brand-1);
   text-decoration: underline;
   text-underline-offset: 2px;
-  transition: color var(--t-color), opacity var(--t-color), text-underline-offset var(--t-color);
+  transition: color var(--vp-t-color), opacity var(--vp-t-color), text-underline-offset var(--vp-t-color);
 }
 
 @media print {
@@ -205,7 +205,7 @@
 .vp-doc tr {
   background-color: var(--vp-c-bg);
   border-top: 1px solid var(--vp-c-divider);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: background-color, border-top;
 }
 
@@ -217,7 +217,7 @@
 .vp-doc td {
   padding: 8px 16px;
   border: 1px solid var(--vp-c-divider);
-  transition: border var(--t-color);
+  transition: border var(--vp-t-color);
 }
 
 .vp-doc th {
@@ -226,7 +226,7 @@
   color: var(--vp-c-text-2);
   text-align: left;
   background-color: var(--vp-c-bg-soft);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, background-color, border;
 }
 
@@ -241,7 +241,7 @@
   margin: 16px 0;
   border: none;
   border-top: 1px solid var(--vp-c-divider);
-  transition: border-top var(--t-color);
+  transition: border-top var(--vp-t-color);
 }
 
 /**
@@ -251,14 +251,14 @@
 .vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
   font-size: var(--vp-code-font-size);
   color: var(--vp-code-color);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc :not(pre) > code {
   padding: 3px 6px;
   background-color: var(--vp-code-bg);
   border-radius: 4px;
-  transition: color var(--t-color), background-color var(--t-color);
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
 .vp-doc h1 > code,
@@ -270,7 +270,7 @@
 
 .vp-doc a > code {
   color: var(--vp-code-link-color);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc a:hover > code {
diff --git a/theme/src/client/styles/custom-block.css b/theme/src/client/styles/custom-block.css
index 111247fc..cee42bec 100644
--- a/theme/src/client/styles/custom-block.css
+++ b/theme/src/client/styles/custom-block.css
@@ -7,7 +7,7 @@
   border: solid 1px var(--vp-c-divider);
   border-radius: 8px;
   box-shadow: var(--vp-shadow-2);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: border, box-shadow;
 }
 
@@ -17,7 +17,7 @@
   justify-content: flex-start;
   min-height: 0;
   border-bottom: solid 1px var(--vp-c-divider);
-  transition: border-bottom var(--t-color);
+  transition: border-bottom var(--vp-t-color);
 }
 
 .vp-doc .demo-wrapper .demo-container {
@@ -28,7 +28,7 @@
   background-color: var(--vp-c-bg-alt);
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-doc .demo-wrapper.has-title .demo-head {
@@ -67,7 +67,7 @@
   height: 10px;
   background-color: #ccc;
   border-radius: 100%;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-doc .demo-wrapper .demo-ctrl i:nth-child(1) {
@@ -93,7 +93,7 @@
   background-color: var(--vp-c-bg-alt);
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, background-color;
 }
 
@@ -113,7 +113,7 @@
   width: 8px;
   height: 8px;
   content: " ";
-  transition: background var(--t-color);
+  transition: background var(--vp-t-color);
 }
 
 .vp-doc .demo-wrapper .demo-title::before {
@@ -175,7 +175,7 @@
   background-color: var(--vp-c-bg-soft);
   border: solid 1px var(--vp-c-divider);
   border-radius: 100%;
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, background-color, border-color;
 }
 
@@ -188,7 +188,7 @@
   width: 1px;
   content: "";
   background-color: var(--vp-c-divider);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-doc .vp-steps > ol > li > :first-child,
diff --git a/theme/src/client/styles/md-enhance.css b/theme/src/client/styles/md-enhance.css
index ced3d094..544bbb43 100644
--- a/theme/src/client/styles/md-enhance.css
+++ b/theme/src/client/styles/md-enhance.css
@@ -158,7 +158,7 @@
   overflow-y: hidden;
   background-color: var(--vp-code-tab-bg);
   box-shadow: inset 0 -1px var(--vp-code-tab-divider);
-  transition: background-color var(--t-color), box-shadow var(--t-color);
+  transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
 }
 
 @media (max-width: 639px) {
@@ -176,7 +176,7 @@
   color: var(--vp-code-tab-text-color);
   white-space: nowrap;
   border-bottom: 1px solid transparent;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc .vp-code-tab-nav::before {
@@ -195,7 +195,7 @@
   content: "";
   background: transparent;
   border-radius: 2px;
-  transition: background var(--t-color);
+  transition: background var(--vp-t-color);
 }
 
 .vp-doc .vp-code-tab-nav.active {
@@ -227,7 +227,7 @@
 .vp-doc .vp-code-demo {
   overflow: hidden;
   border: solid 1px var(--vp-c-divider);
-  transition: border var(--t-color);
+  transition: border var(--vp-t-color);
 }
 
 @media (max-width: 419px) {
@@ -243,7 +243,7 @@
 
 .vp-doc .vp-code-demo .vp-code-demo-header {
   padding: 8px 12px;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-doc .vp-code-demo .vp-code-demo-code-wrapper {
@@ -254,7 +254,7 @@
 .vp-doc .vp-code-demo .vp-code-demo-toggle-button {
   margin: 0 12px 0 8px;
   background-color: var(--vp-c-gray-2);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-doc .vp-code-demo .vp-code-demo-toggle-button:hover {
@@ -280,7 +280,7 @@
   margin-bottom: 0;
   border-bottom: 2px dashed var(--vp-c-divider);
   border-radius: 0;
-  transition: border-bottom var(--t-color);
+  transition: border-bottom var(--vp-t-color);
 }
 
 .vp-doc .vp-code-demo .vp-code-demo-codes div[class*="language-"]:first-of-type {
@@ -307,7 +307,7 @@
   margin-bottom: 16px;
   overflow: hidden;
   border: solid 1px var(--vp-c-divider);
-  transition: border var(--t-color);
+  transition: border var(--vp-t-color);
 }
 
 @media (max-width: 419px) {
@@ -325,13 +325,13 @@
   padding: 8px 12px;
   font-size: 16px;
   line-height: 1.7;
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-doc .vp-md-demo .vp-md-demo-toggle-button {
   margin: 0 12px 0 8px;
   background-color: var(--vp-c-gray-2);
-  transition: background-color var(--t-color);
+  transition: background-color var(--vp-t-color);
 }
 
 .vp-doc .vp-md-demo .vp-md-demo-toggle-button:hover {
@@ -349,7 +349,7 @@
 
 .vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"] {
   border-bottom: 2px dashed var(--vp-c-divider);
-  transition: border-bottom var(--t-color);
+  transition: border-bottom var(--vp-t-color);
 }
 
 .vp-doc .vp-md-demo .vp-md-demo-codes div[class*="language-"]:first-of-type {
@@ -414,14 +414,14 @@
   margin: 1.5rem -0.75rem;
   overflow: hidden;
   border: 1px solid var(--vp-c-divider);
-  transition: border var(--t-color);
+  transition: border var(--vp-t-color);
 }
 
 .vp-doc .vp-tabs-nav {
   padding: 0 12px;
   background-color: var(--vp-code-tab-bg);
   box-shadow: inset 0 -1px var(--vp-code-tab-divider);
-  transition: background-color var(--t-color), box-shadow var(--t-color);
+  transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
 }
 
 .vp-doc .vp-tab-nav {
@@ -433,7 +433,7 @@
   color: var(--vp-code-tab-text-color);
   white-space: nowrap;
   border-bottom: 1px solid transparent;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .vp-doc .vp-tab-nav::before {
@@ -452,7 +452,7 @@
   content: "";
   background: transparent;
   border-radius: 2px;
-  transition: background var(--t-color);
+  transition: background var(--vp-t-color);
 }
 
 .vp-doc .vp-tab-nav.active {
@@ -506,7 +506,7 @@
   border-radius: 6px;
   box-shadow: var(--vp-shadow-1);
   opacity: 0.75;
-  transition: border var(--t-color), box-shadow var(--t-color);
+  transition: border var(--vp-t-color), box-shadow var(--vp-t-color);
 }
 
 .vp-doc .footnotes::before {
@@ -613,7 +613,7 @@
   width: 1.5rem;
   height: 1.5rem;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .mermaid-actions .preview-button:hover,
diff --git a/theme/src/client/styles/normalize.css b/theme/src/client/styles/normalize.css
index d36f24dd..30839406 100644
--- a/theme/src/client/styles/normalize.css
+++ b/theme/src/client/styles/normalize.css
@@ -44,7 +44,7 @@ body {
   -webkit-text-size-adjust: 100%;
 }
 
-html.dark {
+html[data-theme="dark"] {
   color-scheme: dark;
 }
 
@@ -64,7 +64,7 @@ body {
 html,
 body {
   color: var(--vp-c-text-1);
-  transition: var(--t-color);
+  transition: var(--vp-t-color);
   transition-property: color, background-color;
 
   scrollbar-width: thin;
@@ -229,19 +229,19 @@ table {
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 input::-ms-input-placeholder,
 textarea::-ms-input-placeholder {
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 input::placeholder,
 textarea::placeholder {
   color: var(--vp-c-text-3);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 input::-webkit-outer-spin-button,
diff --git a/theme/src/client/styles/search.css b/theme/src/client/styles/search.css
index bcec7ed3..1afd8847 100644
--- a/theme/src/client/styles/search.css
+++ b/theme/src/client/styles/search.css
@@ -31,7 +31,7 @@
   --docsearch-footer-background: var(--vp-c-bg);
 }
 
-.dark .DocSearch {
+[data-theme="dark"] .DocSearch {
   --docsearch-modal-shadow: none;
   --docsearch-footer-shadow: none;
   --docsearch-logo-color: var(--vp-c-text-2);
@@ -49,7 +49,7 @@
   padding: 0;
   margin: 0;
   background: var(--docsearch-searchbox-background);
-  transition: border-color var(--t-color), background var(--t-color);
+  transition: border-color var(--vp-t-color), background var(--vp-t-color);
 }
 
 .vp-navbar-search .DocSearch-Button:hover {
@@ -80,7 +80,7 @@
   height: 16px;
   color: var(--vp-c-text-1);
   fill: currentcolor;
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .DocSearch-Button:hover .DocSearch-Search-Icon {
@@ -94,7 +94,7 @@
   font-size: 13px;
   font-weight: 500;
   color: var(--vp-c-text-2);
-  transition: color var(--t-color);
+  transition: color var(--vp-t-color);
 }
 
 .DocSearch-Button:hover .DocSearch-Button-Placeholder {
@@ -127,7 +127,7 @@
   /* rtl:begin:ignore */
   border-right: none;
   border-radius: 4px 0 0 4px;
-  transition: color var(--t-color), border-color var(--t-color);
+  transition: color var(--vp-t-color), border-color var(--vp-t-color);
 }
 
 .DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
@@ -163,7 +163,7 @@
   display: none;
 }
 
-.dark .DocSearch-Footer {
+[data-theme="dark"] .DocSearch-Footer {
   border-top: 1px solid var(--vp-c-divider);
 }
 
@@ -172,7 +172,7 @@
   border: 1px solid var(--vp-c-brand-1);
 }
 
-.dark .DocSearch-Form {
+[data-theme="dark"] .DocSearch-Form {
   background-color: var(--vp-c-bg-soft);
 }
 
diff --git a/theme/src/client/styles/vars.css b/theme/src/client/styles/vars.css
index 149fdc34..5cc81261 100644
--- a/theme/src/client/styles/vars.css
+++ b/theme/src/client/styles/vars.css
@@ -8,7 +8,7 @@
   --vp-c-neutral-inverse: var(--vp-c-white);
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-c-neutral: var(--vp-c-white);
   --vp-c-neutral-inverse: var(--vp-c-black);
 }
@@ -74,7 +74,7 @@
   --vp-c-sponsor: #db2777;
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-c-gray-1: #515c67;
   --vp-c-gray-2: #414853;
   --vp-c-gray-3: #32363f;
@@ -128,7 +128,7 @@
   --vp-c-bg-safe: #f6f8fa;
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-c-bg: #1b1b1f;
   --vp-c-bg-alt: #161618;
   --vp-c-bg-elv: #202127;
@@ -154,7 +154,7 @@
   --vp-c-gutter: #e2e2e3;
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-c-border: #3c3f44;
   --vp-c-divider: #2e2e32;
   --vp-c-gutter: #000;
@@ -179,7 +179,7 @@
   --vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-c-text-1: rgba(255, 255, 245, 0.86);
   --vp-c-text-2: rgba(235, 235, 245, 0.6);
   --vp-c-text-3: rgba(235, 235, 245, 0.38);
@@ -297,7 +297,7 @@
   --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.27), 0 1px 2px rgba(0, 0, 0, 0.22);
   --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.27);
   --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
@@ -305,6 +305,14 @@
   --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.38);
 }
 
+/**
+ * Transitions
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-t-color: 250ms ease;
+  --vp-t-transform: var(--vp-t-color);
+}
+
 /**
  * Z-indexes
  * -------------------------------------------------------------------------- */
@@ -399,7 +407,7 @@
   --vp-button-alt-active-bg: var(--vp-c-default-1);
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-button-brand-bg: var(--vp-c-brand-2);
   --vp-button-brand-hover-bg: var(--vp-c-brand-1);
   --vp-button-brand-active-bg: var(--vp-c-brand-3);
@@ -554,14 +562,14 @@
   --code-tabs-nav-hover-color: var(--vp-code-block-bg);
 }
 
-.dark {
+[data-theme="dark"] {
   --code-tabs-nav-bg-color: #3a404c;
   --code-tabs-nav-hover-color: #434a57;
 }
 
 /* md enhance hints */
 :root,
-html.dark {
+[data-theme="dark"] {
   /* important */
   --important-title-color: var(--vp-c-text-1);
   --important-bg-color: var(--vp-c-purple-soft);
@@ -612,7 +620,6 @@ html.dark {
 }
 
 :root {
-  --t-color: 250ms ease;
   --code-bg-color: var(--vp-code-block-bg);
   --medium-zoom-bg-color: var(--vp-c-bg);
 }
@@ -641,7 +648,29 @@ html.dark {
   --vp-mark-color-soft: var(--vp-c-brand-soft);
 }
 
-.dark {
+[data-theme="dark"] {
   --vp-mark-color: var(--vp-c-brand-3);
   --vp-mark-color-soft: var(--vp-c-brand-soft);
 }
+
+/**
+ * Compatible with `vuepress` guidelines
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-c-accent: var(--vp-c-brand-1);
+  --vp-c-accent-hover: var(--vp-c-brand-2);
+  --vp-c-accent-bg: var(--vp-c-brand-3);
+  --vp-c-accent-text: var(--vp-c-brand-1);
+  --vp-c-accent-soft: var(--vp-c-brand-soft);
+
+  --vp-c-text: var(--vp-c-text-1);
+  --vp-c-text-mute: var(--vp-c-text-2);
+  --vp-c-text-subtle: var(--vp-c-text-3);
+
+  --vp-c-shadow: var(--vp-shadow-3);
+  --vp-c-border-hard: var(--vp-c-border);
+
+  --vp-c-control: var(--vp-c-default-3);
+  --vp-c-control-hover: var(--vp-c-default-2);
+  --vp-c-control-disabled: var(--vp-c-default-soft);
+}
diff --git a/theme/src/node/config/resolvePageHead.ts b/theme/src/node/config/resolvePageHead.ts
index 9cedae9b..4d571506 100644
--- a/theme/src/node/config/resolvePageHead.ts
+++ b/theme/src/node/config/resolvePageHead.ts
@@ -12,12 +12,12 @@ export function resolvePageHead(page: Page, localeOptions: PlumeThemeLocaleOptio
       'script',
       { id: 'check-dark-mode' },
       appearance === 'force-dark'
-        ? `document.documentElement.classList.add('dark')`
+        ? `document.documentElement.dataset.theme = 'dark'`
         : `;(function () {
         const um= localStorage.getItem('vuepress-theme-appearance') || '${appearance}';
         const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (um === 'dark' || (um !== 'light' && sm)) {
-          document.documentElement.classList.add('dark');
+        const isDark = um === 'dark' || (um !== 'light' && sm);
+        document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
         }
       })();`.replace(/^\s+|\s+$/gm, '').replace(/\n/g, ''),
     ])