diff --git a/example/docs/zh-CN/components/backtop.md b/example/docs/zh-CN/components/backtop.md
index fe34cbe1..f497935b 100644
--- a/example/docs/zh-CN/components/backtop.md
+++ b/example/docs/zh-CN/components/backtop.md
@@ -3,10 +3,8 @@
 
 ::: title 基础使用
 
-###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
-
 :::
-::: demo
+::: demo 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
 <template>
   <lay-backtop></lay-backtop>
 </template>
@@ -18,11 +16,8 @@
 
 :::title 自定义
 
-###### 回到顶部组件可自定义样式，限制宽高：50px \* 50px，<code>showHeight = 0</code> 将始终显示，<code>disabled</code> 属性禁用返回顶部。查看页面右下角的圆形按钮。
+::: demo 回到顶部组件可自定义样式，限制宽高：50px \* 50px，<code>showHeight = 0</code> 将始终显示，<code>disabled</code> 属性禁用返回顶部。查看页面右下角的圆形按钮。
 
-::: demo
-
-<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式，样式属性能满足大多数场景。lay-backtop组件可搭配 lay-tooltip 组件使用-->
 <template>
   <!-- 使用默认插槽自定义 -->
   <lay-tooltip content="插槽自定义 backtop " position="left">
@@ -57,10 +52,8 @@ export default {
 
 ::: title 挂载容器
 
-###### 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数，可对特定容器进行返回顶部操作
-
 :::
-::: demo
+::: demo 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数，可对特定容器进行返回顶部操作
 
 <template>
 <!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
diff --git a/example/docs/zh-CN/components/color.md b/example/docs/zh-CN/components/color.md
index 41f08b37..9219982c 100644
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@@ -4,7 +4,7 @@
 ::: title 主色调
 :::
 
-::: demo
+::: demo layui 主要是以象征包容的墨绿作为主色调，由于它给人以深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。【取色意义】：我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是 layui 所追求的价值。
 
 <template>
     <ul class="layui-row layui-col-space15">
@@ -52,7 +52,7 @@ export default {
 ::: title 次色调
 :::
 
-::: demo
+::: demo 事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素，以及一些侧边元素上。
 
 <template>
 <ul class="layui-row layui-col-space15">
@@ -100,7 +100,7 @@ export default {
 ::: title 中性色
 :::
 
-::: demo
+::: demo layui 认为灰色系代表极简，因为这是一种神奇的颜色，几乎可以与任何元素搭配，不易形成视觉疲劳，且永远不会过时。低调而优雅！
 
 <template>
 <ul class="layui-row site-doc-color site-doc-necolor">
diff --git a/src/component/avatar/index.less b/src/component/avatar/index.less
index c872525e..bc831e01 100644
--- a/src/component/avatar/index.less
+++ b/src/component/avatar/index.less
@@ -1,3 +1,5 @@
+@import "../../theme/variable.less";
+
 .layui-avatar {
   box-sizing: border-box;
   margin: 0;
@@ -19,7 +21,7 @@
   width: 32px;
   height: 32px;
   line-height: 32px;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .layui-avatar.layui-avatar-radius {
diff --git a/src/component/avatar/interface.ts b/src/component/avatar/interface.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/button/index.less b/src/component/button/index.less
index 43411be7..4b959f21 100644
--- a/src/component/button/index.less
+++ b/src/component/button/index.less
@@ -9,8 +9,8 @@
   text-align: center;
   white-space: nowrap;
   border: 1px solid transparent;
-  background-color: @button-primary-color;
-  border-radius: @button-border-radius;
+  background-color: @global-primary-color;
+  border-radius: 2px;
   cursor: pointer;
 }
 
@@ -50,15 +50,15 @@
 }
 
 .layui-btn-normal {
-  background-color: @global-normal-color;
+  background-color: #1e9fff;
 }
 
 .layui-btn-warm {
-  background-color: @global-warm-color;
+  background-color: #ffb800;
 }
 
 .layui-btn-danger {
-  background-color: @global-danger-color;
+  background-color: #ff5722;
 }
 
 .layui-btn-lg {
diff --git a/src/component/card/index.less b/src/component/card/index.less
index dd8058f5..73cb4149 100644
--- a/src/component/card/index.less
+++ b/src/component/card/index.less
@@ -2,7 +2,7 @@
 
 .layui-card {
   margin-bottom: 15px;
-  border-radius: @card-border-radius;
+  border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   .layui-card-header {
diff --git a/src/provider/index.vue b/src/provider/index.vue
index 96ca18fd..e998d779 100644
--- a/src/provider/index.vue
+++ b/src/provider/index.vue
@@ -6,9 +6,9 @@ export default {
 
 <script setup lang="ts">
 
-// 切换主题
+// 切换主题 (通过 less 特性提供的 api 更改变量)
 
-// 切换语言
+// 切换语言 (通过 i18n 框架切换内置的语言包)
 
 </script>
 
diff --git a/src/theme/variable.less b/src/theme/variable.less
index e6848950..6a43dcfd 100644
--- a/src/theme/variable.less
+++ b/src/theme/variable.less
@@ -1,27 +1,21 @@
+// 主题色
 @global-primary-color: #009688;
 
-@global-danger-color: #ff5722;
-
-@global-normal-color: #1e9fff;
-
-@global-warm-color: #ffb800;
-
-@global-bg-color: #393D49;
-
-@global-text-color: #fff;
+// 选中色
+@global-checked-color: #5FB878;
 
+// 圆角度
 @global-border-radius: 2px;
 
+// 前景色  
+@global-fore-color: #ffffff;
+
+// 背景色
+@global-back-color: #393D49;
+
+
 @button-primary-color: @global-primary-color;
 
-@button-normal-color: @global-normal-color;
-
-@button-danger-color: @global-danger-color;
-
-@button-warm-color: @global-warm-color;
-
 @button-border-radius: @global-border-radius;
 
-@card-border-radius: @global-border-radius;
-
-@card-bg-color: @global-bg-color;
\ No newline at end of file
+@table-primary-color: @global-primary-color;
\ No newline at end of file