diff --git a/examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue b/examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue
index df89dd715..ac5a68cac 100644
--- a/examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/autoplay.vue b/examples/sites/demos/pc/app/carousel/autoplay.vue
index da22b0936..b2ee343b4 100644
--- a/examples/sites/demos/pc/app/carousel/autoplay.vue
+++ b/examples/sites/demos/pc/app/carousel/autoplay.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue
index e5c679637..c7c7f0578 100644
--- a/examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/basic-usage.vue b/examples/sites/demos/pc/app/carousel/basic-usage.vue
index 3ab07da11..b24242805 100644
--- a/examples/sites/demos/pc/app/carousel/basic-usage.vue
+++ b/examples/sites/demos/pc/app/carousel/basic-usage.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue b/examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue
index 2cb172be4..a62c4b695 100644
--- a/examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/card-mode.vue b/examples/sites/demos/pc/app/carousel/card-mode.vue
index 9748d8ace..9a3c82993 100644
--- a/examples/sites/demos/pc/app/carousel/card-mode.vue
+++ b/examples/sites/demos/pc/app/carousel/card-mode.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/card-show-composition-api.vue b/examples/sites/demos/pc/app/carousel/card-show-composition-api.vue
index 017dfb281..16048a4a5 100644
--- a/examples/sites/demos/pc/app/carousel/card-show-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/card-show-composition-api.vue
@@ -157,9 +157,6 @@ const disableStatus = () => {
   &:last-child {
     margin-right: 0;
   }
-  &:hover {
-    border-color: #1476ff;
-  }
 }
 .btn-layout {
   position: relative;
@@ -185,7 +182,7 @@ const disableStatus = () => {
   }
   &:not(.is-disabled) {
     .tiny-svg:hover {
-      fill: #191919;
+      fill: #b3b3b3;
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/carousel/card-show.vue b/examples/sites/demos/pc/app/carousel/card-show.vue
index 16263b8f4..818d44dcd 100644
--- a/examples/sites/demos/pc/app/carousel/card-show.vue
+++ b/examples/sites/demos/pc/app/carousel/card-show.vue
@@ -160,9 +160,6 @@ export default {
   &:last-child {
     margin-right: 0;
   }
-  &:hover {
-    border-color: #1476ff;
-  }
 }
 .btn-layout {
   position: relative;
@@ -188,7 +185,7 @@ export default {
   }
   &:not(.is-disabled) {
     .tiny-svg:hover {
-      fill: #191919;
+      fill: #b3b3b3;
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue
index 9d51be148..e418d0250 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue
index 7588b89ca..bedc9a33d 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue
index 13c23635a..36303917c 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue
index 8830c12aa..bc10c4cd0 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue
index 664fc8840..b99be1957 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue
index ba40db089..2000a7933 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue b/examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue
index 05c1a9a06..1d547d439 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue
@@ -25,7 +25,7 @@ function handleChange(value, oldValue) {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -34,14 +34,10 @@ function handleChange(value, oldValue) {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
-}
-.carousel-tip {
-  margin: 16px 0 0;
-  text-align: center;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-events.vue b/examples/sites/demos/pc/app/carousel/carousel-events.vue
index ecb54d0ab..b37c99ef4 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-events.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-events.vue
@@ -35,7 +35,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -44,11 +44,11 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 .carousel-tip {
   margin: 16px 0 0;
diff --git a/examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue b/examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue
index 0d67af387..3f60db8ad 100644
--- a/examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/close-loop.vue b/examples/sites/demos/pc/app/carousel/close-loop.vue
index c9295c929..999c884d5 100644
--- a/examples/sites/demos/pc/app/carousel/close-loop.vue
+++ b/examples/sites/demos/pc/app/carousel/close-loop.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue b/examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue
index 4be868ad3..eba43629f 100644
--- a/examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue
@@ -19,8 +19,11 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
+.block {
+  margin: 20px 0;
+}
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,15 +31,11 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
   font-size: 25px;
 }
 
-.block {
-  margin: 20px 0;
-}
-
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/custom-height.vue b/examples/sites/demos/pc/app/carousel/custom-height.vue
index 9d297c7e7..1eeca0e68 100644
--- a/examples/sites/demos/pc/app/carousel/custom-height.vue
+++ b/examples/sites/demos/pc/app/carousel/custom-height.vue
@@ -26,8 +26,11 @@ export default {
 </script>
 
 <style scoped>
+.block {
+  margin: 20px 0;
+}
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -35,15 +38,11 @@ export default {
   font-size: 25px;
 }
 
-.block {
-  margin: 20px 0;
-}
-
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue b/examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue
index 183ff2c2f..9bc61cebb 100644
--- a/examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue
@@ -33,7 +33,7 @@ function handleSubmit() {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -42,10 +42,10 @@ function handleSubmit() {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/dialog-show.vue b/examples/sites/demos/pc/app/carousel/dialog-show.vue
index 33e829012..c1e0ce413 100644
--- a/examples/sites/demos/pc/app/carousel/dialog-show.vue
+++ b/examples/sites/demos/pc/app/carousel/dialog-show.vue
@@ -46,7 +46,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -55,10 +55,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue b/examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue
index 16237ce62..8d73f02af 100644
--- a/examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/indicator-trigger.vue b/examples/sites/demos/pc/app/carousel/indicator-trigger.vue
index 7e3dbd08a..cab7cff53 100644
--- a/examples/sites/demos/pc/app/carousel/indicator-trigger.vue
+++ b/examples/sites/demos/pc/app/carousel/indicator-trigger.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue b/examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue
index 2a1942d23..f2f5b0d8c 100644
--- a/examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/initial-index.vue b/examples/sites/demos/pc/app/carousel/initial-index.vue
index a130ccf7d..4962eb891 100644
--- a/examples/sites/demos/pc/app/carousel/initial-index.vue
+++ b/examples/sites/demos/pc/app/carousel/initial-index.vue
@@ -18,11 +18,20 @@ export default {
 </script>
 
 <style scoped>
+.tiny-carousel__item h3 {
+  color: #808080;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+  text-align: center;
+  font-size: 25px;
+}
+
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue b/examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue
index 52bb94d5d..cf6347c32 100644
--- a/examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue
@@ -45,7 +45,7 @@ function prev() {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -54,11 +54,11 @@ function prev() {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 
 .manual-layoutset {
diff --git a/examples/sites/demos/pc/app/carousel/manual-play.vue b/examples/sites/demos/pc/app/carousel/manual-play.vue
index e5901c077..50a1a6c8a 100644
--- a/examples/sites/demos/pc/app/carousel/manual-play.vue
+++ b/examples/sites/demos/pc/app/carousel/manual-play.vue
@@ -55,7 +55,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -64,11 +64,11 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 .manual-layoutset {
   display: flex;
diff --git a/examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue b/examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue
index d10330c6b..de6a55c8e 100644
--- a/examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/play-interval.vue b/examples/sites/demos/pc/app/carousel/play-interval.vue
index 3f2959862..294d033d2 100644
--- a/examples/sites/demos/pc/app/carousel/play-interval.vue
+++ b/examples/sites/demos/pc/app/carousel/play-interval.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue b/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue
index bfc44bbf0..875bf3ed7 100644
--- a/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #f0f0f0;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/show-title.vue b/examples/sites/demos/pc/app/carousel/show-title.vue
index 2efc2921a..deb295280 100644
--- a/examples/sites/demos/pc/app/carousel/show-title.vue
+++ b/examples/sites/demos/pc/app/carousel/show-title.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #f0f0f0;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue b/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue
index 3a69825bd..18e682dc1 100644
--- a/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/swipeable.vue b/examples/sites/demos/pc/app/carousel/swipeable.vue
index 941834dea..4d73138a3 100644
--- a/examples/sites/demos/pc/app/carousel/swipeable.vue
+++ b/examples/sites/demos/pc/app/carousel/swipeable.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue b/examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue
index 79f830e89..cc442f1ca 100644
--- a/examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue
@@ -12,7 +12,7 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -21,10 +21,10 @@ import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/examples/sites/demos/pc/app/carousel/up-down-carousel.vue b/examples/sites/demos/pc/app/carousel/up-down-carousel.vue
index aa4859c7d..2c17300cb 100644
--- a/examples/sites/demos/pc/app/carousel/up-down-carousel.vue
+++ b/examples/sites/demos/pc/app/carousel/up-down-carousel.vue
@@ -19,7 +19,7 @@ export default {
 
 <style scoped>
 .tiny-carousel__item h3 {
-  color: #475669;
+  color: #808080;
   opacity: 0.75;
   line-height: 150px;
   margin: 0;
@@ -28,10 +28,10 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: rgba(221, 221, 221, 0.2);
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #edf0f3;
+  background-color: rgba(221, 221, 221, 0.1);
 }
 </style>
diff --git a/packages/theme/src/carousel-item/vars.less b/packages/theme/src/carousel-item/vars.less
index ab901865e..50dfa59b8 100644
--- a/packages/theme/src/carousel-item/vars.less
+++ b/packages/theme/src/carousel-item/vars.less
@@ -12,7 +12,7 @@
 
 .inject-CarouselItem-vars() {
   --tv-CarouselItem-title-height: var(--tv-size-height-lg);
-  --tv-CarouselItem-title-text-color: var(--tv-color-text-inverse);
+  --tv-CarouselItem-title-text-color: var(--tv-color-text-weaken);
   --tv-CarouselItem-title-bg-color: var(--tv-color-bg-primary);
   --tv-CarouselItem-title-span-font-size: var(--tv-font-size-default);
   --tv-CarouselItem-mask-bg-color: var(--tv-color-bg-secondary);