diff --git a/theme/src/client/components/Flyout/MenuLink.vue b/theme/src/client/components/Flyout/MenuLink.vue
index f30ce824..9d2311e1 100644
--- a/theme/src/client/components/Flyout/MenuLink.vue
+++ b/theme/src/client/components/Flyout/MenuLink.vue
@@ -48,11 +48,11 @@ const page = usePageData()
 }
 
 .link:hover {
-  color: var(--vp-c-brand);
-  background-color: var(--vp-c-bg-elv-mute);
+  color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-default-soft);
 }
 
 .link.active {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/theme/src/client/components/Flyout/index.vue b/theme/src/client/components/Flyout/index.vue
index 6bcc3106..4fc3c2b9 100644
--- a/theme/src/client/components/Flyout/index.vue
+++ b/theme/src/client/components/Flyout/index.vue
@@ -69,7 +69,7 @@ export default {
 }
 
 .flyout-wrapper:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
   transition: color 0.25s;
 }
 
@@ -82,11 +82,11 @@ export default {
 }
 
 .flyout-wrapper.active .text {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .flyout-wrapper.active:hover .text {
-  color: var(--vp-c-brand-dark);
+  color: var(--vp-c-brand-2);
 }
 
 .flyout-wrapper:hover .menu,
diff --git a/theme/src/client/components/LocalNav.vue b/theme/src/client/components/LocalNav.vue
index ff5a8e5b..70cb4b39 100644
--- a/theme/src/client/components/LocalNav.vue
+++ b/theme/src/client/components/LocalNav.vue
@@ -72,6 +72,7 @@ const classes = computed(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-top: 1px solid var(--vp-c-gutter);
   border-bottom: 1px solid var(--vp-c-gutter);
   padding-top: var(--vp-layout-top-height, 0px);
   width: 100%;
diff --git a/theme/src/client/components/LocalNavOutlineDropdown.vue b/theme/src/client/components/LocalNavOutlineDropdown.vue
index d5c60f6e..bc58bfdb 100644
--- a/theme/src/client/components/LocalNavOutlineDropdown.vue
+++ b/theme/src/client/components/LocalNavOutlineDropdown.vue
@@ -120,7 +120,7 @@ function scrollToTop() {
   right: 16px;
   left: 16px;
   display: grid;
-  /* gap: 1px; */
+  gap: 1px;
   border: 1px solid var(--vp-c-border);
   border-radius: 8px;
   background-color: var(--vp-c-gutter);
diff --git a/theme/src/client/components/Nav/NavBarMenuLink.vue b/theme/src/client/components/Nav/NavBarMenuLink.vue
index f96723e3..29ec2619 100644
--- a/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/theme/src/client/components/Nav/NavBarMenuLink.vue
@@ -42,10 +42,10 @@ const page = usePageData()
 }
 
 .navbar-menu-link.active {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .navbar-menu-link:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavBarSearch.vue b/theme/src/client/components/Nav/NavBarSearch.vue
index a5e071ac..0a313531 100644
--- a/theme/src/client/components/Nav/NavBarSearch.vue
+++ b/theme/src/client/components/Nav/NavBarSearch.vue
@@ -24,7 +24,7 @@
 }
 
 .DocSearch {
-  --docsearch-primary-color: var(--vp-c-brand);
+  --docsearch-primary-color: var(--vp-c-brand-1);
   --docsearch-highlight-color: var(--docsearch-primary-color);
   --docsearch-text-color: var(--vp-c-text-1);
   --docsearch-muted-color: var(--vp-c-text-2);
@@ -41,7 +41,7 @@
   --docsearch-modal-shadow: none;
   --docsearch-footer-shadow: none;
   --docsearch-logo-color: var(--vp-c-text-2);
-  --docsearch-hit-background: var(--vp-c-bg-soft-mute);
+  --docsearch-hit-background: var(--vp-c-default-soft);
   --docsearch-hit-color: var(--vp-c-text-2);
   --docsearch-hit-shadow: none;
 }
@@ -83,7 +83,7 @@
   }
 
   .DocSearch-Button:hover {
-    border-color: var(--vp-c-brand);
+    border-color: var(--vp-c-brand-1);
     background: var(--vp-c-bg-alt);
   }
 }
@@ -200,11 +200,11 @@
 }
 
 .DocSearch-Form {
-  border: 1px solid var(--vp-c-brand);
+  border: 1px solid var(--vp-c-brand-1);
   background-color: var(--vp-c-white);
 }
 
 .dark .DocSearch-Form {
-  background-color: var(--vp-c-bg-soft-mute);
+  background-color: var(--vp-c-bg-soft);
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
index ef2c0bc9..141529c1 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroup.vue
@@ -81,7 +81,7 @@ function toggle() {
 
 .nav-screen-menu-group.open .button {
   padding-bottom: 6px;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .nav-screen-menu-group.open .button-icon {
@@ -103,7 +103,7 @@ function toggle() {
 }
 
 .button:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .button-text i {
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue b/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
index a1a767ef..864e1c4d 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
@@ -34,6 +34,6 @@ const closeScreen = inject('close-screen') as () => void
 }
 
 .nav-screen-menu-group-link:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavScreenMenuLink.vue b/theme/src/client/components/Nav/NavScreenMenuLink.vue
index 77d9f85a..fab1a638 100644
--- a/theme/src/client/components/Nav/NavScreenMenuLink.vue
+++ b/theme/src/client/components/Nav/NavScreenMenuLink.vue
@@ -31,6 +31,6 @@ const closeScreen = inject('close-screen') as () => void
 }
 
 .nav-screen-menu-link:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/theme/src/client/components/PageAside.vue b/theme/src/client/components/PageAside.vue
index 35c42525..4cea0a63 100644
--- a/theme/src/client/components/PageAside.vue
+++ b/theme/src/client/components/PageAside.vue
@@ -81,7 +81,7 @@ function handleClick({ target: el }: Event) {
   opacity: 0;
   width: 1px;
   height: 18px;
-  background-color: var(--vp-c-brand);
+  background-color: var(--vp-c-brand-1);
   transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s,
     opacity 0.25s;
 }
diff --git a/theme/src/client/components/PageMeta.vue b/theme/src/client/components/PageMeta.vue
index 8b33f988..3c1f0173 100644
--- a/theme/src/client/components/PageMeta.vue
+++ b/theme/src/client/components/PageMeta.vue
@@ -65,7 +65,7 @@ const hasMeta = computed(() => tags.value.length || createTime.value)
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 2rem;
-  border-left: solid 4px var(--vp-c-brand);
+  border-left: solid 4px var(--vp-c-brand-1);
   padding-left: 1rem;
 }
 
@@ -75,7 +75,7 @@ const hasMeta = computed(() => tags.value.length || createTime.value)
 }
 
 .page-category-wrapper .category:hover {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .page-category-wrapper .dot {
diff --git a/theme/src/client/components/PostItem.vue b/theme/src/client/components/PostItem.vue
index 5b3676b2..e9c2df9a 100644
--- a/theme/src/client/components/PostItem.vue
+++ b/theme/src/client/components/PostItem.vue
@@ -78,7 +78,7 @@ const createTime = computed(() => {
   }
 
   h3:hover {
-    color: var(--vp-c-brand);
+    color: var(--vp-c-brand-1);
 
     .sticky {
       color: var(--vp-c-text-2);
@@ -100,7 +100,7 @@ const createTime = computed(() => {
     line-height: 1;
     font-size: 13px;
     color: var(--vp-c-text-2);
-    background-color: var(--vp-c-bg-soft-mute);
+    background-color: var(--vp-c-default-soft);
   }
 }
 
diff --git a/theme/src/client/components/SidebarItem.vue b/theme/src/client/components/SidebarItem.vue
index 29c50385..0de0c974 100644
--- a/theme/src/client/components/SidebarItem.vue
+++ b/theme/src/client/components/SidebarItem.vue
@@ -137,7 +137,7 @@ function onCaretClick() {
 .sidebar-item.level-3.is-active > .item > .indicator,
 .sidebar-item.level-4.is-active > .item > .indicator,
 .sidebar-item.level-5.is-active > .item > .indicator {
-  background-color: var(--vp-c-brand);
+  background-color: var(--vp-c-brand-1);
 }
 
 .link {
@@ -173,7 +173,7 @@ function onCaretClick() {
 .sidebar-item.level-3.is-link > .item > .link:hover .text,
 .sidebar-item.level-4.is-link > .item > .link:hover .text,
 .sidebar-item.level-5.is-link > .item > .link:hover .text {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .sidebar-item.level-0.has-active > .item > .link > .text,
@@ -191,7 +191,7 @@ function onCaretClick() {
 .sidebar-item.level-3.is-active > .item .link > .text,
 .sidebar-item.level-4.is-active > .item .link > .text,
 .sidebar-item.level-5.is-active > .item .link > .text {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
 }
 
 .caret {
diff --git a/theme/src/client/components/SkipLink.vue b/theme/src/client/components/SkipLink.vue
index 3fdab9cf..ca343fca 100644
--- a/theme/src/client/components/SkipLink.vue
+++ b/theme/src/client/components/SkipLink.vue
@@ -50,7 +50,7 @@ function focusOnTargetAnchor({ target }: Event) {
   font-size: 12px;
   font-weight: bold;
   text-decoration: none;
-  color: var(--vp-c-brand);
+  color: var(--vp-c-brand-1);
   box-shadow: var(--vp-shadow-3);
   background-color: var(--vp-c-bg);
 }
diff --git a/theme/src/client/components/Switch.vue b/theme/src/client/components/Switch.vue
index b754b2d0..690d0424 100644
--- a/theme/src/client/components/Switch.vue
+++ b/theme/src/client/components/Switch.vue
@@ -22,7 +22,7 @@
 }
 
 .switch-wrapper:hover {
-  border-color: var(--vp-input-hover-border-color);
+  border-color: var(--vp-c-brand-1);
 }
 
 .check {
diff --git a/theme/src/client/components/global/Badge.vue b/theme/src/client/components/global/Badge.vue
index 7155e377..9a791457 100644
--- a/theme/src/client/components/global/Badge.vue
+++ b/theme/src/client/components/global/Badge.vue
@@ -28,18 +28,24 @@ withDefaults(defineProps<Props>(), {
   transform: translateY(-2px);
 }
 
-h1 .badge-view,
-h2 .badge-view,
-h3 .badge-view,
+h1 .badge-view {
+  margin-top: 4px;
+  vertical-align: top;
+}
+h2 .badge-view {
+  margin-top: 3px;
+  padding: 0 8px;
+  vertical-align: top;
+}
+h3 .badge-view {
+  vertical-align: middle;
+}
+
 h4 .badge-view,
 h5 .badge-view,
 h6 .badge-view {
-  vertical-align: top;
-}
-
-h2 .badge-view {
-  border-radius: 11px;
-  line-height: 20px;
+  vertical-align: middle;
+  line-height: 18px;
 }
 
 .badge-view.info {
diff --git a/theme/src/client/styles/code.scss b/theme/src/client/styles/code.scss
index c021d0ab..8fd4fe2b 100644
--- a/theme/src/client/styles/code.scss
+++ b/theme/src/client/styles/code.scss
@@ -6,7 +6,7 @@
 }
 
 html:not(.dark) .vp-code span {
-  color: var(--shiki-light, rgba(60, 60, 67, 0.92));
+  color: var(--shiki-light, rgba(60, 60, 67, 0.78));
 }
 
 code[class*='language-'],
@@ -65,20 +65,6 @@ pre[class*='language-'] {
     scrollbar-color: var(--c-brand) var(--c-border);
     font-size: 14px;
 
-    &::-webkit-scrollbar {
-      width: 7px;
-      height: 7px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: var(--vp-code-block-bg);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba(220, 220, 220, 0.35);
-      border-radius: 3px;
-    }
-
     code {
       color: #fff;
       padding: 0;
@@ -139,7 +125,7 @@ div[class*='language-'] {
     line-height: 1.5;
 
     .highlight-line {
-      background-color: rgba(142, 150, 170, 0.14);
+      background-color: var(--vp-c-default-soft);
     }
   }
 
diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
index 48773a41..f0a33a07 100644
--- a/theme/src/client/styles/content.scss
+++ b/theme/src/client/styles/content.scss
@@ -26,7 +26,6 @@
   letter-spacing: -0.02em;
   line-height: 32px;
   font-size: 24px;
-  transition: all var(--t-color);
 }
 
 .plume-content h2:first-of-type {
@@ -116,13 +115,16 @@
 
 .plume-content a {
   font-weight: 500;
-  color: var(--vp-c-brand);
-  text-decoration-style: dotted;
-  transition: color 0.25s;
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition:
+    color 0.25s,
+    opacity 0.25s;
 }
 
 .plume-content a:hover {
-  color: var(--vp-c-brand-dark);
+  color: var(--vp-c-brand-2);
 }
 
 .plume-content strong {
@@ -168,6 +170,7 @@
 }
 
 .plume-content tr {
+  background-color: var(--vp-c-bg);
   border-top: 1px solid var(--vp-c-divider);
   transition: background-color 0.5s;
 }
@@ -254,15 +257,15 @@
 /* inline code */
 .plume-content :not(pre, h1, h2, h3, h4, h5, h6) > code {
   font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
 }
 
 .plume-content :not(pre) > code {
   border-radius: 4px;
   padding: 3px 6px;
-  color: var(--vp-c-text-code);
-  background-color: var(--vp-c-mute);
+  background-color: var(--vp-code-bg);
   transition:
-    color 0.5s,
+    color 0.25s,
     background-color 0.5s;
 }
 
@@ -273,254 +276,13 @@
 }
 
 .plume-content a > code {
-  color: var(--vp-c-brand);
-  transition: color 0.25s;
+  color: var(--vp-code-link-color);
 }
 
 .plume-content a:hover > code {
-  color: var(--vp-c-brand-dark);
+  color: var(--vp-code-link-hover-color);
 }
 
 .plume-content .vp-code-tabs-nav {
   margin: 0.85rem 0 0;
 }
-
-// .plume-content div[class*='language-'] {
-//   position: relative;
-//   margin: 16px -24px;
-//   background-color: var(--vp-code-block-bg);
-//   overflow-x: auto;
-//   transition: background-color 0.5s;
-// }
-
-// @media (min-width: 640px) {
-//   .plume-content div[class*='language-'] {
-//     border-radius: 8px;
-//     margin: 16px 0;
-//   }
-// }
-
-// @media (max-width: 639px) {
-//   .plume-content li div[class*='language-'] {
-//     border-radius: 8px 0 0 8px;
-//   }
-// }
-
-// .plume-content div[class*='language-'] + div[class*='language-'],
-// .plume-content div[class$='-api'] + div[class*='language-'],
-// .plume-content
-//   div[class*='language-']
-//   + div[class$='-api']
-//   > div[class*='language-'] {
-//   margin-top: -8px;
-// }
-
-// .plume-content [class*='language-'] pre,
-// .plume-content [class*='language-'] code {
-//   /*rtl:ignore*/
-//   direction: ltr;
-//   /*rtl:ignore*/
-//   text-align: left;
-//   white-space: pre;
-//   word-spacing: normal;
-//   word-break: normal;
-//   word-wrap: normal;
-//   -moz-tab-size: 4;
-//   -o-tab-size: 4;
-//   tab-size: 4;
-//   -webkit-hyphens: none;
-//   -moz-hyphens: none;
-//   -ms-hyphens: none;
-//   hyphens: none;
-// }
-
-// .plume-content [class*='language-'] pre {
-//   position: relative;
-//   z-index: 1;
-//   margin: 0;
-//   padding: 16px 0;
-//   background: transparent;
-//   overflow-x: auto;
-// }
-
-// .plume-content [class*='language-'] code {
-//   display: block;
-//   padding: 0 24px;
-//   width: fit-content;
-//   min-width: 100%;
-//   line-height: var(--vp-code-line-height);
-//   font-size: var(--vp-code-font-size);
-//   color: var(--vp-code-block-color);
-//   transition: color 0.5s;
-// }
-
-// .plume-content [class*='language-'] code .highlighted {
-//   background-color: var(--vp-code-line-highlight-color);
-//   transition: background-color 0.5s;
-//   margin: 0 -24px;
-//   padding: 0 24px;
-//   width: calc(100% + 2 * 24px);
-//   display: inline-block;
-// }
-
-// .plume-content [class*='language-'] code .highlighted.error {
-//   background-color: var(--vp-code-line-error-color);
-// }
-
-// .plume-content [class*='language-'] code .highlighted.warning {
-//   background-color: var(--vp-code-line-warning-color);
-// }
-
-// .plume-content [class*='language-'] code .diff {
-//   transition: background-color 0.5s;
-//   margin: 0 -24px;
-//   padding: 0 24px;
-//   width: calc(100% + 2 * 24px);
-//   display: inline-block;
-// }
-
-// .plume-content [class*='language-'] code .diff::before {
-//   position: absolute;
-//   left: 10px;
-// }
-
-// .plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
-//   filter: blur(0.095rem);
-//   opacity: 0.4;
-//   transition: filter 0.35s, opacity 0.35s;
-// }
-
-// .plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
-//   opacity: 0.7;
-//   transition: filter 0.35s, opacity 0.35s;
-// }
-
-// .plume-content
-//   [class*='language-']:hover
-//   .has-focused-lines
-//   .line:not(.has-focus) {
-//   filter: blur(0);
-//   opacity: 1;
-// }
-
-// .plume-content [class*='language-'] code .diff.remove {
-//   background-color: var(--vp-code-line-diff-remove-color);
-//   opacity: 0.7;
-// }
-
-// .plume-content [class*='language-'] code .diff.remove::before {
-//   content: '-';
-//   color: var(--vp-code-line-diff-remove-symbol-color);
-// }
-
-// .plume-content [class*='language-'] code .diff.add {
-//   background-color: var(--vp-code-line-diff-add-color);
-// }
-
-// .plume-content [class*='language-'] code .diff.add::before {
-//   content: '+';
-//   color: var(--vp-code-line-diff-add-symbol-color);
-// }
-
-// .plume-content div[class*='language-'].line-numbers-mode {
-//   /*rtl:ignore*/
-//   padding-left: 32px;
-// }
-
-// .plume-content .line-numbers {
-//   position: absolute;
-//   top: 0;
-//   bottom: 0;
-//   /*rtl:ignore*/
-//   left: 0;
-//   z-index: 3;
-//   /*rtl:ignore*/
-//   border-right: 1px solid var(--vp-code-block-divider-color);
-//   padding-top: 16px;
-//   width: 32px;
-//   text-align: center;
-//   font-family: var(--vp-font-family-mono);
-//   line-height: var(--vp-code-line-height);
-//   font-size: var(--vp-code-font-size);
-//   color: var(--vp-code-line-number-color);
-//   transition: border-color 0.5s, color 0.5s;
-// }
-
-// .plume-content [class*='language-'] > button.copy {
-//   /*rtl:ignore*/
-//   direction: ltr;
-//   position: absolute;
-//   top: 8px;
-//   /*rtl:ignore*/
-//   right: 8px;
-//   z-index: 3;
-//   display: block;
-//   justify-content: center;
-//   align-items: center;
-//   border-radius: 4px;
-//   width: 40px;
-//   height: 40px;
-//   background-color: var(--vp-code-block-bg);
-//   opacity: 0;
-//   cursor: pointer;
-//   background-image: var(--vp-icon-copy);
-//   background-position: 50%;
-//   background-size: 20px;
-//   background-repeat: no-repeat;
-//   transition: opacity 0.4s;
-// }
-
-// .plume-content [class*='language-']:hover > button.copy,
-// .plume-content [class*='language-'] > button.copy:focus {
-//   opacity: 1;
-// }
-
-// .plume-content [class*='language-'] > button.copy:hover {
-//   background-color: var(--vp-code-copy-code-hover-bg);
-// }
-
-// .plume-content [class*='language-'] > button.copy.copied,
-// .plume-content [class*='language-'] > button.copy:hover.copied {
-//   /*rtl:ignore*/
-//   border-radius: 0 4px 4px 0;
-//   background-color: var(--vp-code-copy-code-hover-bg);
-//   background-image: var(--vp-icon-copied);
-// }
-
-// .plume-content [class*='language-'] > button.copy.copied::before,
-// .plume-content [class*='language-'] > button.copy:hover.copied::before {
-//   position: relative;
-//   /*rtl:ignore*/
-//   left: -65px;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   /*rtl:ignore*/
-//   border-radius: 4px 0 0 4px;
-//   width: 64px;
-//   height: 40px;
-//   text-align: center;
-//   font-size: 12px;
-//   font-weight: 500;
-//   color: var(--vp-code-copy-code-active-text);
-//   background-color: var(--vp-code-copy-code-hover-bg);
-//   white-space: nowrap;
-//   content: 'Copied';
-// }
-
-// .plume-content [class*='language-'] > span.lang {
-//   position: absolute;
-//   top: 6px;
-//   /*rtl:ignore*/
-//   right: 12px;
-//   z-index: 2;
-//   font-size: 12px;
-//   font-weight: 500;
-//   color: var(--vp-c-text-dark-3);
-//   transition: color 0.4s, opacity 0.4s;
-// }
-
-// .plume-content [class*='language-']:hover > button.copy + span.lang,
-// .plume-content [class*='language-'] > button.copy:focus + span.lang {
-//   opacity: 0;
-// }
diff --git a/theme/src/client/styles/index.scss b/theme/src/client/styles/index.scss
index e33c5be3..1862dbe9 100644
--- a/theme/src/client/styles/index.scss
+++ b/theme/src/client/styles/index.scss
@@ -5,5 +5,6 @@
 @use 'utils';
 @use 'content';
 @use 'code';
+@use 'md-enhance';
 
 @use '@vuepress/plugin-palette/style';
diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
new file mode 100644
index 00000000..0dbad564
--- /dev/null
+++ b/theme/src/client/styles/md-enhance.scss
@@ -0,0 +1,90 @@
+.plume-content .hint-container {
+  border-radius: 8px;
+  padding: 16px 16px 8px;
+  line-height: 24px;
+  font-size: var(--vp-custom-block-font-size);
+  color: var(--vp-c-text-2);
+}
+
+.plume-content .hint-container .hint-container-title {
+  font-weight: 600;
+  margin-top: 0;
+}
+
+.hint-container.note {
+  color: var(--vp-custom-block-info-text);
+}
+
+.hint-container.tip {
+  color: var(--vp-custom-block-tip-text);
+}
+
+.hint-container.warning {
+  color: var(--vp-custom-block-warning-text);
+}
+
+.hint-container.caution {
+  color: var(--vp-custom-block-danger-text);
+}
+
+.hint-container.detail {
+  color: var(--vp-custom-block-detail-text);
+}
+
+.plume-content .hint-container.details summary {
+  margin: -1.5rem -1.5rem -1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  color: var(--vp-c-text-1);
+}
+
+.plume-content .hint-container.details summary + p {
+  margin: 8px 0;
+}
+
+.plume-content .hint-container p + p {
+  margin: 8px 0;
+}
+
+.plume-content .hint-container code {
+  font-size: var(--vp-custom-block-code-font-size);
+}
+
+.plume-content .hint-container {
+  &.note,
+  &.tip,
+  &.detail,
+  &.important {
+    a,
+    code {
+      color: var(--vp-c-brand-1);
+    }
+    a:hover {
+      color: var(--vp-c-brand-2);
+    }
+  }
+  &.warning {
+    a,
+    code {
+      color: var(--vp-c-warning-1);
+    }
+    a:hover {
+      color: var(--vp-c-warning-2);
+    }
+  }
+  &.caution {
+    a,
+    code {
+      color: var(--vp-c-danger-1);
+    }
+    a:hover {
+      color: var(--vp-c-danger-2);
+    }
+  }
+
+  th,
+  blockquote > p {
+    font-size: var(--vp-custom-block-font-size);
+    color: inherit;
+  }
+}
diff --git a/theme/src/client/styles/normalize.scss b/theme/src/client/styles/normalize.scss
index 0a41c4ee..c74c801c 100644
--- a/theme/src/client/styles/normalize.scss
+++ b/theme/src/client/styles/normalize.scss
@@ -256,3 +256,12 @@ p {
 vite-error-overlay {
   z-index: 9999;
 }
+
+mjx-container {
+  display: inline-block;
+  margin: auto 2px -2px;
+}
+
+mjx-container > svg {
+  margin: auto;
+}
diff --git a/theme/src/client/styles/vars.scss b/theme/src/client/styles/vars.scss
index 5c05d544..6fe762cf 100644
--- a/theme/src/client/styles/vars.scss
+++ b/theme/src/client/styles/vars.scss
@@ -1,155 +1,233 @@
 /**
- * Colors Base
- *
- * These are the pure base color presets. Most of the time, you should not be
- * using these colors directly in the theme but rather use "Colors Theme"
- * instead because those are "Theme (light or dark)" dependant.
+ * Colors: Solid
  * -------------------------------------------------------------------------- */
 
 :root {
   --vp-c-white: #ffffff;
   --vp-c-black: #000000;
 
-  --vp-c-gray: #8e8e93;
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
+}
 
-  --vp-c-text-light-1: rgba(60, 60, 67, 0.92);
-  --vp-c-text-light-2: rgba(60, 60, 67, 0.7);
-  --vp-c-text-light-3: rgba(60, 60, 67, 0.33);
+.dark {
+  --vp-c-neutral: var(--vp-c-white);
+  --vp-c-neutral-inverse: var(--vp-c-black);
+}
 
-  --vp-c-text-dark-1: rgba(255, 255, 245, 0.86);
-  --vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
-  --vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
+/**
+ * Colors: Palette
+ *
+ * The primitive colors used for accent colors. These colors are referenced
+ * by functional colors such as "Text", "Background", or "Brand".
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *    It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *    top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *    or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *    on top of it.
+ *
+ *    The soft color must be semi transparent alpha channel. This is crucial
+ *    because it allows adding multiple "soft" colors on top of each other
+ *    to create a accent, such as when having inline code block inside
+ *    custom containers.
+ * -------------------------------------------------------------------------- */
 
-  --vp-c-green: #10b981;
-  --vp-c-green-light: #34d399;
-  --vp-c-green-lighter: #6ee7b7;
-  --vp-c-green-dark: #059669;
-  --vp-c-green-darker: #047857;
-  --vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
-  --vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
-  --vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
+:root {
+  --vp-c-gray-1: #dddde3;
+  --vp-c-gray-2: #e4e4e9;
+  --vp-c-gray-3: #ebebef;
+  --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
 
-  --vp-c-yellow: #eab308;
-  --vp-c-yellow-light: #facc15;
-  --vp-c-yellow-lighter: #fde047;
-  --vp-c-yellow-dark: #ca8a04;
-  --vp-c-yellow-darker: #a16207;
-  --vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
-  --vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
-  --vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
+  --vp-c-turquoise-1: #5086a1;
+  --vp-c-turquoise-2: #6aa1b7;
+  --vp-c-turquoise-3: #8cccd5;
+  --vp-c-turquoise-soft: rgba(131, 208, 218, 0.314);
 
-  --vp-c-red: #f43f5e;
-  --vp-c-red-light: #fb7185;
-  --vp-c-red-lighter: #fda4af;
-  --vp-c-red-dark: #e11d48;
-  --vp-c-red-darker: #be123c;
-  --vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
-  --vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
-  --vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
+  --vp-c-green-1: #18794e;
+  --vp-c-green-2: #299764;
+  --vp-c-green-3: #30a46c;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.14);
+
+  --vp-c-yellow-1: #915930;
+  --vp-c-yellow-2: #946300;
+  --vp-c-yellow-3: #9f6a00;
+  --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
+
+  --vp-c-red-1: #b8272c;
+  --vp-c-red-2: #d5393e;
+  --vp-c-red-3: #e0575b;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.14);
 
   --vp-c-sponsor: #db2777;
 }
 
+.dark {
+  --vp-c-gray-1: #515c67;
+  --vp-c-gray-2: #414853;
+  --vp-c-gray-3: #32363f;
+  --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
+
+  --vp-c-turquoise-1: #8cccd5;
+  --vp-c-turquoise-2: #6aa1b7;
+  --vp-c-turquoise-3: #5086a1;
+  --vp-c-turquoise-soft: rgba(131, 208, 218, 0.314);
+
+  --vp-c-green-1: #3dd68c;
+  --vp-c-green-2: #30a46c;
+  --vp-c-green-3: #298459;
+  --vp-c-green-soft: rgba(16, 185, 129, 0.16);
+
+  --vp-c-yellow-1: #f9b44e;
+  --vp-c-yellow-2: #da8b17;
+  --vp-c-yellow-3: #a46a0a;
+  --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
+
+  --vp-c-red-1: #f66f81;
+  --vp-c-red-2: #f14158;
+  --vp-c-red-3: #b62a3c;
+  --vp-c-red-soft: rgba(244, 63, 94, 0.16);
+}
+
 /**
- * Colors Theme
+ * Colors: Background
+ *
+ * - `bg`: The bg color used for main screen.
+ *
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
+ *   or "code block".
+ *
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
+ *   such as "dialog".
+ *
+ * - `bg-soft`: The bg color to slightly distinguish some components from
+ *   the page. Used for things like "carbon ads" or "table".
  * -------------------------------------------------------------------------- */
 
 :root {
   --vp-c-bg: #ffffff;
-
-  --vp-c-bg-elv: #ffffff;
-  --vp-c-bg-elv-up: #ffffff;
-  --vp-c-bg-elv-down: #f6f6f7;
-  --vp-c-bg-elv-mute: #f6f6f7;
-
-  --vp-c-bg-soft: #f6f6f7;
-  --vp-c-bg-soft-up: #ffffff;
-  --vp-c-bg-soft-down: #e3e3e5;
-  --vp-c-bg-soft-mute: #e3e3e5;
-
   --vp-c-bg-alt: #f6f6f7;
-
-  --vp-c-border: rgba(60, 60, 67, 0.29);
-  --vp-c-divider: rgba(60, 60, 67, 0.12);
-  --vp-c-gutter: rgba(60, 60, 67, 0.12);
-
-  --vp-c-neutral: var(--vp-c-black);
-  --vp-c-neutral-inverse: var(--vp-c-white);
-
-  --vp-c-text-1: var(--vp-c-text-light-1);
-  --vp-c-text-2: var(--vp-c-text-light-2);
-  --vp-c-text-3: var(--vp-c-text-light-3);
-
-  --vp-c-text-inverse-1: var(--vp-c-text-dark-1);
-  --vp-c-text-inverse-2: var(--vp-c-text-dark-2);
-  --vp-c-text-inverse-3: var(--vp-c-text-dark-3);
-
-  --vp-c-text-hero-name: var(--vp-c-text-dark-1);
-  --vp-c-text-hero-tagline: var(--vp-c-text-dark-2);
-  --vp-c-text-hero-text: var(--vp-c-text-dark-1);
-
-  --vp-c-text-code: #476582;
-
-  --vp-c-brand: var(--vp-c-green);
-  --vp-c-brand-light: var(--vp-c-green-light);
-  --vp-c-brand-lighter: var(--vp-c-green-lighter);
-  --vp-c-brand-dark: var(--vp-c-green-dark);
-  --vp-c-brand-darker: var(--vp-c-green-darker);
-
-  --vp-c-mute: #f6f6f7;
-  --vp-c-mute-light: #f9f9fc;
-  --vp-c-mute-lighter: #ffffff;
-  --vp-c-mute-dark: #e3e3e5;
-  --vp-c-mute-darker: #d7d7d9;
-
-  --search-bg-color: var(--vp-c-bg-elv-mute);
-  --search-text-color: var(--vp-c-text-2);
-  --search-item-text-color: var(--vp-c-text-1);
-  --search-item-focus-bg-color: var(--vp-c-bg-alt);
-  --search-input-width: 8rem;
-  --search-result-width: 20rem;
-  --search-border-color: var(--vp-c-divider);
-
-  --c-brand: var(--vp-c-brand);
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: #f6f6f7;
 }
 
-html.dark {
-  --vp-c-bg: #1e1e20;
-
-  --vp-c-bg-elv: #252529;
-  --vp-c-bg-elv-up: #313136;
-  --vp-c-bg-elv-down: #1e1e20;
-  --vp-c-bg-elv-mute: #313136;
-
-  --vp-c-bg-soft: #252529;
-  --vp-c-bg-soft-up: #313136;
-  --vp-c-bg-soft-down: #1e1e20;
-  --vp-c-bg-soft-mute: #313136;
-
+.dark {
+  --vp-c-bg: #1b1b1f;
   --vp-c-bg-alt: #161618;
+  --vp-c-bg-elv: #202127;
+  --vp-c-bg-soft: #202127;
+}
 
-  --vp-c-border: rgba(82, 82, 89, 0.68);
-  --vp-c-divider: rgba(82, 82, 89, 0.32);
+/**
+ * Colors: Borders
+ *
+ * - `divider`: This is used for separators. This is used to divide sections
+ *   within the same components, such as having separator on "h2" heading.
+ *
+ * - `border`: This is designed for borders on interactive components.
+ *   For example this should be used for a button outline.
+ *
+ * - `gutter`: This is used to divide components in the page. For example
+ *   the header and the lest of the page.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-border: #c2c2c4;
+  --vp-c-divider: #e2e2e3;
+  --vp-c-gutter: #e2e2e3;
+}
+
+.dark {
+  --vp-c-border: #3c3f44;
+  --vp-c-divider: #2e2e32;
   --vp-c-gutter: #000000;
+}
 
-  --vp-c-neutral: var(--vp-c-white);
-  --vp-c-neutral-inverse: var(--vp-c-black);
+/**
+ * Colors: Text
+ *
+ * - `text-1`: Used for primary text.
+ *
+ * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
+ *
+ * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
+ * -------------------------------------------------------------------------- */
 
-  --vp-c-text-1: var(--vp-c-text-dark-1);
-  --vp-c-text-2: var(--vp-c-text-dark-2);
-  --vp-c-text-3: var(--vp-c-text-dark-3);
+:root {
+  --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, 0.78);
+  --vp-c-text-3: rgba(60, 60, 67, 0.56);
 
-  --vp-c-text-inverse-1: var(--vp-c-text-light-1);
-  --vp-c-text-inverse-2: var(--vp-c-text-light-2);
-  --vp-c-text-inverse-3: var(--vp-c-text-light-3);
+  --vp-c-text-dark-1: rgba(255, 255, 245, 0.86);
+  --vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
+  --vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
+}
 
-  --vp-c-text-code: #c9def1;
+.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);
+}
 
-  --vp-c-mute: #313136;
-  --vp-c-mute-light: #3a3a3c;
-  --vp-c-mute-lighter: #505053;
-  --vp-c-mute-dark: #2c2c30;
-  --vp-c-mute-darker: #252529;
+/**
+ * Colors: Function
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ *
+ * To understand the scaling system, refer to "Colors: Palette" section.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-turquoise-1);
+  --vp-c-brand-2: var(--vp-c-turquoise-2);
+  --vp-c-brand-3: var(--vp-c-turquoise-3);
+  --vp-c-brand-soft: var(--vp-c-turquoise-soft);
+
+  /* DEPRECATED: Use `--vp-c-brand-1` instead. */
+  --vp-c-brand: var(--vp-c-brand-1);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
 }
 
 /**
@@ -182,21 +260,12 @@ html.dark {
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-z-index-local-nav: 10;
-  --vp-z-index-nav: 20;
-  --vp-z-index-layout-top: 30;
-  --vp-z-index-backdrop: 40;
-  --vp-z-index-sidebar: 50;
-  --vp-z-index-footer: 60;
-}
-
-/**
- * Icons
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
-  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
+  --vp-z-index-footer: 10;
+  --vp-z-index-local-nav: 20;
+  --vp-z-index-nav: 30;
+  --vp-z-index-layout-top: 40;
+  --vp-z-index-backdrop: 50;
+  --vp-z-index-sidebar: 60;
 }
 
 /**
@@ -207,6 +276,14 @@ html.dark {
   --vp-layout-max-width: 1440px;
 }
 
+/**
+ * Component: Header Anchor
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-header-anchor-symbol: '#';
+}
+
 /**
  * Component: Code
  * -------------------------------------------------------------------------- */
@@ -214,46 +291,42 @@ html.dark {
 :root {
   --vp-code-line-height: 1.7;
   --vp-code-font-size: 0.875em;
+  --vp-code-color: var(--vp-c-brand-1);
+  --vp-code-link-color: var(--vp-c-brand-1);
+  --vp-code-link-hover-color: var(--vp-c-brand-2);
+  --vp-code-bg: var(--vp-c-default-soft);
 
-  --vp-code-block-color: var(--vp-c-text-dark-1);
-  // --vp-code-block-bg: #292b30;
-  --vp-code-block-bg: #f6f6f7;
-  --vp-code-block-divider-color: #e2e2e3;
+  --vp-code-block-color: var(--vp-c-text-2);
+  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-code-block-divider-color: var(--vp-c-gutter);
 
-  --code-tabs-nav-text-color: var(--vp-c-text-light-2);
-  --code-tabs-nav-bg-color: #e6e6e7;
-  --code-tabs-nav-hover-color: var(--vp-code-block-bg);
+  --vp-code-lang-color: var(--vp-c-text-3);
 
-  --vp-code-line-highlight-color: rgba(142, 150, 170, 0.14);
-  --vp-code-line-number-color: var(--vp-c-text-light-3);
+  --vp-code-line-highlight-color: var(--vp-c-default-soft);
+  --vp-code-line-number-color: var(--vp-c-text-3);
 
-  --vp-code-line-diff-add-color: var(--vp-c-green-dimm-2);
-  --vp-code-line-diff-add-symbol-color: var(--vp-c-green);
+  --vp-code-line-diff-add-color: var(--vp-c-green-soft);
+  --vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);
 
-  --vp-code-line-diff-remove-color: var(--vp-c-red-dimm-2);
-  --vp-code-line-diff-remove-symbol-color: var(--vp-c-red);
+  --vp-code-line-diff-remove-color: var(--vp-c-red-soft);
+  --vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);
 
-  --vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);
-  --vp-code-line-error-color: var(--vp-c-red-dimm-2);
+  --vp-code-line-warning-color: var(--vp-c-yellow-soft);
+  --vp-code-line-error-color: var(--vp-c-red-soft);
 
-  --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
-  --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
+  --vp-code-copy-code-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-bg: var(--vp-c-bg-soft);
+  --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
+  --vp-code-copy-code-hover-bg: var(--vp-c-bg);
+  --vp-code-copy-code-active-text: var(--vp-c-text-2);
+  --vp-code-copy-copied-text-content: 'Copied';
 
   --vp-code-tab-divider: var(--vp-code-block-divider-color);
-  --vp-code-tab-text-color: var(--vp-c-text-dark-2);
+  --vp-code-tab-text-color: var(--vp-c-text-2);
   --vp-code-tab-bg: var(--vp-code-block-bg);
-  --vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);
-  --vp-code-tab-active-text-color: var(--vp-c-text-dark-1);
-  --vp-code-tab-active-bar-color: var(--vp-c-brand);
-}
-
-html.dark {
-  --vp-code-block-bg: #161618;
-  --vp-code-block-divider-color: #000000;
-  --vp-code-line-number-color: var(--vp-c-text-dark-3);
-  --code-tabs-nav-text-color: var(--vp-c-text-dark-2);
-  --code-tabs-nav-bg-color: #3a404c;
-  --code-tabs-nav-hover-color: #434a57;
+  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-text-color: var(--vp-c-text-1);
+  --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
 }
 
 /**
@@ -261,28 +334,28 @@ html.dark {
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-button-brand-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-border: transparent;
   --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand);
-  --vp-button-brand-hover-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-bg: var(--vp-c-brand-1);
+  --vp-button-brand-hover-border: transparent;
   --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-dark);
-  --vp-button-brand-active-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
   --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-darker);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
 
-  --vp-button-alt-border: var(--vp-c-border);
-  --vp-button-alt-text: var(--vp-c-neutral);
-  --vp-button-alt-bg: var(--vp-c-mute);
-  --vp-button-alt-hover-border: var(--vp-c-border);
-  --vp-button-alt-hover-text: var(--vp-c-neutral);
-  --vp-button-alt-hover-bg: var(--vp-c-mute-dark);
-  --vp-button-alt-active-border: var(--vp-c-border);
-  --vp-button-alt-active-text: var(--vp-c-neutral);
-  --vp-button-alt-active-bg: var(--vp-c-mute-darker);
+  --vp-button-alt-border: transparent;
+  --vp-button-alt-text: var(--vp-c-text-1);
+  --vp-button-alt-bg: var(--vp-c-default-3);
+  --vp-button-alt-hover-border: transparent;
+  --vp-button-alt-hover-text: var(--vp-c-text-1);
+  --vp-button-alt-hover-bg: var(--vp-c-default-2);
+  --vp-button-alt-active-border: transparent;
+  --vp-button-alt-active-text: var(--vp-c-text-1);
+  --vp-button-alt-active-bg: var(--vp-c-default-1);
 
-  --vp-button-sponsor-border: var(--vp-c-gray-light-3);
-  --vp-button-sponsor-text: var(--vp-c-text-light-2);
+  --vp-button-sponsor-border: var(--vp-c-text-2);
+  --vp-button-sponsor-text: var(--vp-c-text-2);
   --vp-button-sponsor-bg: transparent;
   --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
   --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
@@ -292,9 +365,10 @@ html.dark {
   --vp-button-sponsor-active-bg: transparent;
 }
 
-html.dark {
-  --vp-button-sponsor-border: var(--vp-c-gray-dark-1);
-  --vp-button-sponsor-text: var(--vp-c-text-dark-2);
+.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);
 }
 
 /**
@@ -305,30 +379,30 @@ html.dark {
   --vp-custom-block-font-size: 14px;
   --vp-custom-block-code-font-size: 13px;
 
-  --vp-custom-block-info-border: var(--vp-c-border);
-  --vp-custom-block-info-text: var(--vp-c-text-2);
-  --vp-custom-block-info-bg: var(--vp-c-bg-soft);
-  --vp-custom-block-info-code-bg: var(--vp-c-mute);
+  --vp-custom-block-info-border: transparent;
+  --vp-custom-block-info-text: var(--vp-c-text-1);
+  --vp-custom-block-info-bg: var(--vp-c-default-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
 
-  --vp-custom-block-tip-border: var(--vp-c-green-dimm-3);
-  --vp-custom-block-tip-text: var(--vp-c-green);
-  --vp-custom-block-tip-bg: var(--vp-c-green-dimm-1);
-  --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
 
-  --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-3);
-  --vp-custom-block-warning-text: var(--vp-c-yellow);
-  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-1);
-  --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
+  --vp-custom-block-warning-border: transparent;
+  --vp-custom-block-warning-text: var(--vp-c-text-1);
+  --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
+  --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
 
-  --vp-custom-block-danger-border: var(--vp-c-red-dimm-3);
-  --vp-custom-block-danger-text: var(--vp-c-red);
-  --vp-custom-block-danger-bg: var(--vp-c-red-dimm-1);
-  --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
+  --vp-custom-block-danger-border: transparent;
+  --vp-custom-block-danger-text: var(--vp-c-text-1);
+  --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
+  --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
 
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
   --vp-custom-block-details-text: var(--vp-custom-block-info-text);
   --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
-  --vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg);
+  --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
 }
 
 /**
@@ -338,9 +412,8 @@ html.dark {
 :root {
   --vp-input-border-color: var(--vp-c-border);
   --vp-input-bg-color: var(--vp-c-bg-alt);
-  --vp-input-hover-border-color: var(--vp-c-gray);
 
-  --vp-input-switch-bg-color: var(--vp-c-mute);
+  --vp-input-switch-bg-color: var(--vp-c-gray-soft);
 }
 
 /**
@@ -351,6 +424,15 @@ html.dark {
   --vp-nav-height: 64px;
   --vp-nav-bg-color: var(--vp-c-bg);
   --vp-nav-screen-bg-color: var(--vp-c-bg);
+  --vp-nav-logo-height: 24px;
+}
+
+.hide-nav {
+  --vp-nav-height: 0px;
+}
+
+.hide-nav .VPSidebar {
+  --vp-nav-height: 22px;
 }
 
 /**
@@ -383,11 +465,15 @@ html.dark {
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-home-hero-name-color: var(--vp-c-brand);
+  --vp-home-hero-name-color: var(--vp-c-brand-1);
   --vp-home-hero-name-background: transparent;
 
   --vp-home-hero-image-background-image: none;
   --vp-home-hero-image-filter: none;
+
+  --vp-c-text-hero-name: var(--vp-c-text-dark-1);
+  --vp-c-text-hero-tagline: var(--vp-c-text-dark-2);
+  --vp-c-text-hero-text: var(--vp-c-text-dark-1);
 }
 
 /**
@@ -395,33 +481,114 @@ html.dark {
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-badge-info-border: var(--vp-c-border);
+  --vp-badge-info-border: transparent;
   --vp-badge-info-text: var(--vp-c-text-2);
-  --vp-badge-info-bg: var(--vp-c-bg-soft);
+  --vp-badge-info-bg: var(--vp-c-default-soft);
 
-  --vp-badge-tip-border: var(--vp-c-green-dark);
-  --vp-badge-tip-text: var(--vp-c-green);
-  --vp-badge-tip-bg: var(--vp-c-green-dimm-1);
+  --vp-badge-tip-border: transparent;
+  --vp-badge-tip-text: var(--vp-c-brand-1);
+  --vp-badge-tip-bg: var(--vp-c-brand-soft);
 
-  --vp-badge-warning-border: var(--vp-c-yellow-dark);
-  --vp-badge-warning-text: var(--vp-c-yellow);
-  --vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);
+  --vp-badge-warning-border: transparent;
+  --vp-badge-warning-text: var(--vp-c-warning-1);
+  --vp-badge-warning-bg: var(--vp-c-warning-soft);
 
-  --vp-badge-danger-border: var(--vp-c-red-dark);
-  --vp-badge-danger-text: var(--vp-c-red);
-  --vp-badge-danger-bg: var(--vp-c-red-dimm-1);
+  --vp-badge-danger-border: transparent;
+  --vp-badge-danger-text: var(--vp-c-danger-1);
+  --vp-badge-danger-bg: var(--vp-c-danger-soft);
 }
 
 /**
- * Component: CarbonAds
+ * Component: Carbon Ads
  * -------------------------------------------------------------------------- */
 
+// :root {
+//   --vp-carbon-ads-text-color: var(--vp-c-text-1);
+//   --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
+//   --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
+//   --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
+//   --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
+// }
+
+/**
+  * Component: Local Search
+  * -------------------------------------------------------------------------- */
+
 :root {
-  --vp-carbon-ads-text-color: var(--vp-c-text-1);
-  --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
-  --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
-  --vp-carbon-ads-hover-text-color: var(--vp-c-brand);
-  --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
+  --vp-local-search-bg: var(--vp-c-bg);
+  --vp-local-search-result-bg: var(--vp-c-bg);
+  --vp-local-search-result-border: var(--vp-c-divider);
+  --vp-local-search-result-selected-bg: var(--vp-c-bg);
+  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
+  --vp-local-search-highlight-bg: var(--vp-c-brand-1);
+  --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
+}
+
+/** Component: Search **/
+:root {
+  --search-bg-color: var(--vp-c-bg-elv);
+  --search-text-color: var(--vp-c-text-2);
+  --search-item-text-color: var(--vp-c-text-1);
+  --search-item-focus-bg-color: var(--vp-c-bg-alt);
+  --search-input-width: 8rem;
+  --search-result-width: 20rem;
+  --search-border-color: var(--vp-c-divider);
+  --search-accent-color: var(--vp-c-brand-2);
+}
+
+/* md enhance code-tabs */
+:root {
+  --code-tabs-nav-text-color: var(--vp-c-text-1);
+  --code-tabs-nav-bg-color: #e6e6e7;
+  --code-tabs-nav-hover-color: var(--vp-code-block-bg);
+}
+
+.dark {
+  --code-tabs-nav-bg-color: #3a404c;
+  --code-tabs-nav-hover-color: #434a57;
+}
+
+/* md enhance hints */
+:root {
+  // important
+  --important-title-color: var(--vp-c-text-1);
+  --important-bg-color: #f4eefe;
+  --important-border-color: #f4eefe;
+  --important-code-bg-color: rgb(163 113 247 / 10%);
+  // info
+  --info-title-color: var(--vp-c-text-1);
+  --info-bg-color: var(--vp-custom-block-info-bg);
+  --info-border-color: var(--vp-custom-block-info-border);
+  --info-code-bg-color: var(--vp-custom-block-info-code-bg);
+
+  // note
+  --note-title-color: var(--vp-c-text-3);
+  --note-bg-color: var(--vp-c-bg-elv);
+  --note-border-color: var(--vp-c-divider);
+  --note-code-bg-color: var(--vp-c-default-soft);
+
+  // tip
+  --tip-title-color: var(--vp-c-text-1);
+  --tip-bg-color: var(--vp-custom-block-tip-bg);
+  --tip-border-color: var(--vp-custom-block-tip-border);
+  --tip-code-bg-color: var(--vp-custom-block-tip-code-bg);
+
+  // warning
+  --warning-title-color: var(--vp-c-text-1);
+  --warning-bg-color: var(--vp-custom-block-warning-bg);
+  --warning-border-color: var(--vp-custom-block-warning-border);
+  --warning-code-bg-color: var(--vp-custom-block-warning-code-bg);
+
+  // caution
+  --caution-title-color: var(--vp-c-text-1);
+  --caution-bg-color: var(--vp-custom-block-danger-bg);
+  --caution-border-color: var(--vp-custom-block-danger-border);
+  --caution-code-bg-color: var(--vp-custom-block-danger-code-bg);
+
+  // detail
+  --detail-bg-color: var(--vp-custom-block-details-bg);
+  --detail-text-color: inherit;
+  --detail-code-bg-color: var(--vp-custom-block-details-code-bg);
 }
 
 :root {