diff --git a/docs/.vuepress/theme/global-components/Badge.vue b/docs/.vuepress/theme/global-components/Badge.vue
index bea534133..d246675aa 100644
--- a/docs/.vuepress/theme/global-components/Badge.vue
+++ b/docs/.vuepress/theme/global-components/Badge.vue
@@ -37,11 +37,11 @@ export default {
   font-size: 14px;
   height: 18px;
   line-height: 18px;
-  background-color: #42b983;
+  background-color: var(--badge-bg-color-tip);
 
   &.tip,
   &.green {
-    background-color: #42b983;
+    background-color: var(--badge-bg-color-tip);
   }
 
   &.error,
diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss
index 37718169a..b3ee8abb1 100644
--- a/docs/.vuepress/theme/styles/base.pcss
+++ b/docs/.vuepress/theme/styles/base.pcss
@@ -15,6 +15,7 @@
   --sidebar-active-link-color: theme("colors.blue.default");
   --hamburger-color: theme("colors.black");
   --tooltip-bg-color: theme("colors.white");
+  --badge-bg-color-tip: #2F835D;
   --border-color: #e2e8f0;
   --doc-set-color: theme("colors.slate");
   --code-highlight-color: rgba(252, 233, 106, 0.3);