diff --git a/examples/sites/demos/pc/app/badge/offset-composition-api.vue b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
index 73c4584def..c4bc480291 100644
--- a/examples/sites/demos/pc/app/badge/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
@@ -30,7 +30,7 @@ import { TinyBadge } from '@opentiny/vue'
   display: inline-block;
   width: 60px;
   height: 40px;
-  background-color: gainsboro;
+  background-color: var(--tv-color-bg);
 }
 .demo-box {
   width: 400px;
diff --git a/examples/sites/demos/pc/app/badge/offset.vue b/examples/sites/demos/pc/app/badge/offset.vue
index 7a852e5656..08d3f0b33f 100644
--- a/examples/sites/demos/pc/app/badge/offset.vue
+++ b/examples/sites/demos/pc/app/badge/offset.vue
@@ -36,7 +36,7 @@ export default {
   display: inline-block;
   width: 60px;
   height: 40px;
-  background-color: gainsboro;
+  background-color: var(--tv-color-bg);
 }
 .demo-box {
   width: 400px;