diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md
index 2643db6de1..7e2331c87c 100644
--- a/docs/default-theme-config/README.md
+++ b/docs/default-theme-config/README.md
@@ -461,6 +461,9 @@ $accentColor = #3eaf7c
 $textColor = #2c3e50
 $borderColor = #eaecef
 $codeBgColor = #282c34
+$badgeTip = #42b983
+$badgeWarning = darken(#ffe564, 35%)
+$badgeError = #DA596
 ```
 
 ### Existing issues <Badge text="< 0.12.0" type='error'/>
diff --git a/docs/zh/default-theme-config/README.md b/docs/zh/default-theme-config/README.md
index 94c3b11bf5..1ccd27cf5a 100644
--- a/docs/zh/default-theme-config/README.md
+++ b/docs/zh/default-theme-config/README.md
@@ -443,6 +443,9 @@ $accentColor = #3eaf7c
 $textColor = #2c3e50
 $borderColor = #eaecef
 $codeBgColor = #282c34
+$badgeTip = #42b983
+$badgeWarning = darken(#ffe564, 35%)
+$badgeError = #DA596
 ```
 
 ### 低版本存在的问题 <Badge text="< 0.12.0" type='error'/>
diff --git a/lib/app/components/Badge.vue b/lib/app/components/Badge.vue
index 17e6ba6e7a..faa2e5d285 100644
--- a/lib/app/components/Badge.vue
+++ b/lib/app/components/Badge.vue
@@ -38,9 +38,9 @@ export default {
   &.top
     vertical-align top
   &.tip, &.green
-    background-color #42b983
+    background-color $badgeTip
   &.error
-    background-color #DA5961 //#f66
+    background-color $badgeError
   &.warning, &.warn, &.yellow
-    background-color darken(#ffe564, 35%)
+    background-color $badgeWarning
 </style>
diff --git a/lib/default-theme/styles/config.styl b/lib/default-theme/styles/config.styl
index a57d4484de..d48e0b6d01 100644
--- a/lib/default-theme/styles/config.styl
+++ b/lib/default-theme/styles/config.styl
@@ -4,6 +4,9 @@ $textColor = #2c3e50
 $borderColor = #eaecef
 $codeBgColor = #282c34
 $arrowBgColor = #ccc
+$badgeTip = #42b983
+$badgeWarning = darken(#ffe564, 35%)
+$badgeError = #DA5961 //#f66
 
 // layout
 $navbarHeight = 3.6rem