@fjyueke/arco-mcp 1.0.4 → 1.0.5

package/metaData/components/pull-refresh/css-variables.md

@@ -4,6 +4,21 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 下拉刷新组件容器背景色 | --arco-pullrefresh-label-font-size | getRem(12) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 下拉刷新组件容器背景色 | --arco-pull-refresh-content-background-color | #FFFFFF（白色） ⬜ | var(--arco-background-color) |
+| 下拉刷新组件状态文案内容区背景色 | --arco-pull-refresh-label-background-color | #F7F8FA | var(--arco-card-background-color) |
+| 下拉刷组件 loading 图标颜色 | --arco-pull-refresh-label-loading-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| 下拉刷新组件状态文案字体颜色 | --arco-pull-refresh-label-text-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| 下拉刷新组件状态文案字体大小 | --arco-pull-refresh-label-font-size | 0.24rem | 12px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 下拉刷新组件容器背景色（暗黑模式） | --arco-dark-pull-refresh-content-background-color | #17171A（暗黑背景） ⬛ | var(--arco-dark-background-color) |
+| 下拉刷新组件状态文案内容区背景色（暗黑模式） | --arco-dark-pull-refresh-label-background-color | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |
+| 下拉刷组件 loading 图标颜色（暗黑模式） | --arco-dark-pull-refresh-label-loading-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| 下拉刷新组件状态文案字体颜色（暗黑模式） | --arco-dark-pull-refresh-label-text-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |

package/metaData/components/rate/css-variables.md

@@ -0,0 +1,22 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 评分图标选中高亮色 | --arco-rate-icon-active-color | #FFB400 |  |
+| 评分图标禁用时选中颜色 | --arco-rate-icon-disabled-active-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| 评分图标未选中颜色 | --arco-rate-icon-normal-color | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| 评分图标大小 | --arco-rate-icon-size | 24PX |  |
+| 评分图标间距(点击热区含间距) | --arco-rate-icon-offset | 6PX |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 评分图标禁用时选中颜色（暗黑模式） | --arco-dark-rate-icon-disabled-active-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| 评分图标未选中颜色（暗黑模式） | --arco-dark-rate-icon-normal-color | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |

package/metaData/components/search-bar/css-variables.md

@@ -4,15 +4,48 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 搜索栏背景颜色 | --arco-searchbar-padding | getRem(16) |
-| 圆形搜索栏的圆角大小 | --arco-searchbar-square-shape-border-radius | getRem(2) |
-| 搜索输入框容器高度 | --arco-searchbar-round-shape-border-radius | getRem(9999) |
-| 搜索栏搜索按钮的颜色 | --arco-searchbar-clear-icon-padding-left | getRem(16) |
-| 搜索栏右侧取消按钮颜色 | --arco-searchbar-search-icon-font-size | getRem(16) |
-| 搜索栏右侧取消按钮的左边距 | --arco-searchbar-cancel-btn-font-size | getRem(15) |
-| 搜索联想框背景颜色 | --arco-searchbar-cancel-btn-margin-left | getRem(16) |
-| 搜索联想框候选项内边距 | --arco-searchbar-association-item-height | getRem(52) |
-| 搜索联想框候选项字体大小 | --arco-searchbar-association-item-padding | getRem(16) |
-| 搜索联想框候选项普通文字颜色 | --arco-searchbar-association-item-font-size | getRem(15) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 搜索联想框背景颜色 | --arco-search-bar-association-background-color | #FFFFFF（白色） ⬜ | var(--arco-container-background-color) |
+| 搜索联想框候选项普通文字颜色 | --arco-search-bar-association-item-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| 搜索联想框候选项高亮文案颜色 | --arco-search-bar-association-item-highlight-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| 搜索栏背景颜色 | --arco-search-bar-background-color | #FFFFFF（白色） ⬜ | var(--arco-background-color) |
+| 搜索栏右侧取消按钮颜色 | --arco-search-bar-cancel-btn-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| 搜索栏清除按钮的颜色 | --arco-search-bar-clear-icon-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| 搜索输入框光标颜色 | --arco-search-bar-input-caret-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| 搜索输入框提示文案颜色 | --arco-search-bar-input-placeholder-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| 搜索输入框容器背景颜色 | --arco-search-bar-input-wrapper-background-color | #f2f3f5（灰底色） ⬜ | var(--arco-lighter-line-color) |
+| 搜索栏搜索按钮的颜色 | --arco-search-bar-search-icon-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| 搜索联想框候选项字体大小 | --arco-search-bar-association-item-font-size | 0.3rem | 15px |
+| 搜索栏右侧取消按钮文字大小 | --arco-search-bar-cancel-btn-font-size | 0.3rem | 15px |
+| 搜索栏清除按钮的大小 | --arco-search-bar-clear-icon-font-size | 16PX |  |
+| 搜索输入框容器字体大小 | --arco-search-bar-input-wrapper-font-size | 0.28rem | 14px |
+| 搜索栏按钮大小 | --arco-search-bar-search-icon-font-size | 0.32rem | 16px |
+| 搜索联想框候选项高度 | --arco-search-bar-association-item-height | 1.04rem | 52px |
+| 搜索输入框高度 | --arco-search-bar-input-height | 0.4rem | 20px |
+| 搜索输入框容器高度 | --arco-search-bar-input-wrapper-height | 0.72rem | 36px |
+| 搜索联想框候选项内边距 | --arco-search-bar-association-item-padding | 0.32rem | 16px |
+| 搜索栏清除按钮与输入框间距 | --arco-search-bar-clear-icon-padding-left | 0.32rem | 16px |
+| 搜索输入框容器内边距大小 | --arco-search-bar-input-wrapper-padding | 0.16rem 0.28rem | 8px 14px |
+| 搜索栏内边距大小 | --arco-search-bar-padding | 0.32rem | 16px |
+| 搜索栏右侧取消按钮的左边距 | --arco-search-bar-cancel-btn-margin-left | 0.32rem | 16px |
+| 搜索栏搜索栏左侧插入内容的右侧外边距 | --arco-search-bar-prefix-margin-right | 0.18rem | 9px |
+| 圆形搜索栏的圆角大小 | --arco-search-bar-round-shape-border-radius | 199.98rem | 9999px |
+| 方形搜索栏的圆角大小 | --arco-search-bar-square-shape-border-radius | 0.04rem | 2px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 搜索联想框背景颜色（暗黑模式） | --arco-dark-search-bar-association-background-color | #232324（暗黑容器） ⬛ | var(--arco-dark-container-background-color) |
+| 搜索联想框候选项普通文字颜色（暗黑模式） | --arco-dark-search-bar-association-item-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| 搜索联想框候选项高亮文案颜色（暗黑模式） | --arco-dark-search-bar-association-item-highlight-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| 搜索栏背景颜色（暗黑模式） | --arco-dark-search-bar-background-color | #17171A（暗黑背景） ⬛ | var(--arco-dark-background-color) |
+| 搜索栏右侧取消按钮颜色（暗黑模式） | --arco-dark-search-bar-cancel-btn-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| 搜索栏清除按钮的颜色（暗黑模式） | --arco-dark-search-bar-clear-icon-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| 搜索输入框光标颜色（暗黑模式） | --arco-dark-search-bar-input-caret-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| 搜索输入框提示文案颜色（暗黑模式） | --arco-dark-search-bar-input-placeholder-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| 搜索输入框容器背景颜色（暗黑模式） | --arco-dark-search-bar-input-wrapper-background-color | #2e2e30（暗黑浅线） ⬛ | var(--arco-dark-lighter-line-color) |
+| 搜索栏搜索按钮的颜色（暗黑模式） | --arco-dark-search-bar-search-icon-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |

package/metaData/components/skeleton/css-variables.md

@@ -4,12 +4,30 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 骨架屏元素背景色 | --arco-skeleton-border-radius | getRem(0) |
-| 骨架屏段落行高度 | --arco-skeleton-title-height | getRem(16) |
-| 骨架屏各段落行间距 | --arco-skeleton-paragraph-height | getRem(16) |
-| 骨架屏头像大小 | --arco-skeleton-paragraph-margin-top | getRem(12) |
-| 骨架屏金刚位文字区宽度 | --arco-skeleton-grid-icon-size | getRem(32) |
-| 骨架屏金刚位文字区高度 | --arco-skeleton-grid-text-width | getRem(64) |
-| 文件上传组件上传列表高度 | --arco-skeleton-large-gutter | getRem(20) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 骨架屏元素背景色 | --arco-skeleton-background-color | #f2f3f5（灰底色） ⬜ | var(--arco-lighter-line-color) |
+| 骨架屏扫光动效高亮色 | --arco-skeleton-gradient-animation-color | rgba(255, 255, 255, 0.6) |  |
+| 骨架屏头像大小 | --arco-skeleton-avatar-size | 0.64rem | 32px |
+| 骨架屏金刚位图标区宽度 | --arco-skeleton-grid-icon-size | 0.64rem | 32px |
+| 骨架屏金刚位文字区高度 | --arco-skeleton-grid-text-height | 0.32rem | 16px |
+| 骨架屏段落行高度 | --arco-skeleton-paragraph-height | 0.32rem | 16px |
+| 骨架屏标题高度 | --arco-skeleton-title-height | 0.32rem | 16px |
+| 骨架屏各段落行间距 | --arco-skeleton-paragraph-margin-top | 0.24rem | 12px |
+| 骨架屏元素圆角 | --arco-skeleton-border-radius | 0 |  |
+| 骨架屏元素外边距，大尺寸 | --arco-skeleton-large-gutter | 0.4rem | 20px |
+| 骨架屏元素外边距，中尺寸 | --arco-skeleton-medium-gutter | 0.16rem | 8px |
+| 骨架屏呼吸动效时间 | --arco-skeleton-breath-animation-duration | 1.5s |  |
+| 骨架屏呼吸动效透明度 | --arco-skeleton-breath-opacity | 0.4 |  |
+| 骨架屏扫光动效时间 | --arco-skeleton-gradient-animation-duration | 1.5s |  |
+| 骨架屏扫光动效曲线 | --arco-skeleton-gradient-animation-timing-function | cubic-bezier(0.42, 0, 0.58, 1) |  |
+| 骨架屏金刚位文字区宽度 | --arco-skeleton-grid-text-width | 1.28rem | 64px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 骨架屏元素背景色（暗黑模式） | --arco-dark-skeleton-background-color | #2e2e30（暗黑浅线） ⬛ | var(--arco-dark-lighter-line-color) |
+| 骨架屏扫光动效高亮色（暗黑模式） | --arco-dark-skeleton-gradient-animation-color | hsla(0, 0%, 100%, 0.08) |  |

package/metaData/components/slider/css-variables.md

@@ -4,19 +4,43 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| slider 有标记时的底部内边距 | --arco-slider-mask-padding | getRem(15) |
-| slider 两侧标注文字大小 | --arco-slider-has-mark-padding-bottom | getRem(35) |
-| slider 两侧标注与滑动条的间距 | --arco-slider-label-font-size | getRem(16) |
-| slider 标记文案的字体颜色 | --arco-slider-label-gutter | getRem(12) |
-| slider 被选中时的线条颜色 | --arco-slider-line-border-radius | getRem(4) |
-| slider 滑块的高度 | --arco-slider-thumb-width | getRem(24) |
-| slider 滑块的边框半径 | --arco-slider-thumb-height | getRem(24) |
-| slider 气泡内容字体行高 | --arco-slider-popover-font-size | getRem(12) |
-| slider 气泡底部的外边距（垂直时是左外边距） | --arco-slider-popover-line-height | getRem(17) |
-| slider 滑动条节点的宽度 | --arco-slider-popover-gutter | getRem(14) |
-| slider 滑动条节点文案的字体行高 | --arco-slider-mark-label-font-size | getRem(14) |
-| slider 横向滑动条节点文案距离节点的顶部距离 | --arco-slider-mark-label-line-height | getRem(20) |
-| slider 纵向滑动条节点文案距离节点的右距离 | --arco-slider-horizontal-mark-label-top | getRem(19) |
-| swipeLoad 滑动区域的背景色 | --arco-slider-vertical-mark-label-right | getRem(13) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| slider 被选中时的线条颜色 | --arco-slider-line-activated-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| slider 线条颜色 | --arco-slider-line-color | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| slider 被禁用时的线条颜色 | --arco-slider-line-disabled-color | #94BFFF（禁用蓝） 🟦 | var(--arco-primary-disabled-color) |
+| slider 标记文案的字体颜色 | --arco-slider-text-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| slider 滑块的背景色 | --arco-slider-thumb-background | #FFFFFF（白色） ⬜ | var(--arco-mask-content-background) |
+| slider 两侧标注文字大小 | --arco-slider-label-font-size | 0.32rem | 16px |
+| slider 滑动条节点文案的字体大小 | --arco-slider-mark-label-font-size | 0.28rem | 14px |
+| slider 气泡箭头大小 | --arco-slider-popover-arrow-size | 6PX |  |
+| slider 气泡内容字体大小 | --arco-slider-popover-font-size | 0.24rem | 12px |
+| slider 滑动条节点的高度 | --arco-slider-mark-height | 6PX |  |
+| slider 滑动条节点文案的字体行高 | --arco-slider-mark-label-line-height | 0.4rem | 20px |
+| slider 气泡内容字体行高 | --arco-slider-popover-line-height | 0.34rem | 17px |
+| slider 滑块的高度 | --arco-slider-thumb-height | 0.48rem | 24px |
+| slider 有标记时的底部内边距 | --arco-slider-has-mark-padding-bottom | 0.7rem | 35px |
+| slider 可点区域两侧留白边距 | --arco-slider-mask-padding | 0.3rem | 15px |
+| slider 组件的内边距 | --arco-slider-padding | 0.22rem 0.32rem | 11px 16px |
+| slider 线条的边框半径（首尾） | --arco-slider-line-border-radius | 0.08rem | 4px |
+| slider 滑动条节点的边框半径 | --arco-slider-mark-border-radius | 50% |  |
+| slider 滑块的边框半径 | --arco-slider-thumb-border-radius | 50% |  |
+| slider 两侧标注与滑动条的间距 | --arco-slider-label-gutter | 0.24rem | 12px |
+| slider 气泡底部的外边距（垂直时是左外边距） | --arco-slider-popover-gutter | 0.28rem | 14px |
+| slider 横向滑动条节点文案距离节点的顶部距离 | --arco-slider-horizontal-mark-label-top | 0.38rem | 19px |
+| slider 纵向滑动条节点文案距离节点的右距离 | --arco-slider-vertical-mark-label-right | 0.26rem | 13px |
+| slider 滑动条节点的宽度 | --arco-slider-mark-width | 6PX |  |
+| slider 滑块的阴影 | --arco-slider-thumb-box-shadow | 0 2PX 8PX rgba(0, 0, 0, .1) |  |
+| slider 滑块的宽度 | --arco-slider-thumb-width | 0.48rem | 24px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| slider 被选中时的线条颜色（暗黑模式） | --arco-dark-slider-line-activated-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| slider 线条颜色（暗黑模式） | --arco-dark-slider-line-color | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |
+| slider 被禁用时的线条颜色（暗黑模式） | --arco-dark-slider-line-disabled-color | #0E32A6（暗黑主题禁用） 🟦 | var(--arco-dark-primary-disabled-color) |
+| slider 标记文案的字体颜色（暗黑模式） | --arco-dark-slider-text-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| slider 滑块的背景色（暗黑模式） | --arco-dark-slider-thumb-background | #2A2A2B（暗黑面板） ⬛ | var(--arco-dark-mask-content-background) |

package/metaData/components/stepper/css-variables.md

@@ -4,8 +4,31 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 步进器字体大小 | --arco-stepper-width | getRem(98) |
-| 步进器方角边框样式 | --arco-stepper-font-size | getRem(14) |
-| 步进器方角样式背景颜色 | --arco-stepper-square-border-radius | getRem(2) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 步进器内容字体颜色 | --arco-stepper-content-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| 步进器默认背景颜色 | --arco-stepper-default-background-color | #F7F8FA | var(--arco-card-background-color) |
+| 步进器禁用状态字体颜色 | --arco-stepper-disable-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| 步进器圆角输入框背景颜色 | --arco-stepper-round-input-background-color | transparent（透明） ❓ |  |
+| 步进器方角样式背景颜色 | --arco-stepper-square-background-color | transparent（透明） ❓ |  |
+| 步进器方角边框样式 | --arco-stepper-square-border-color | #f2f3f5（灰底色） ⬜ | var(--arco-lighter-line-color) |
+| 步进器按钮图标尺寸 | --arco-stepper-button-icon-size | 0.2rem | 10px |
+| 步进器按钮尺寸 | --arco-stepper-button-size | 0.56rem | 28px |
+| 步进器字体大小 | --arco-stepper-font-size | 0.28rem | 14px |
+| 步进器输入框长度 | --arco-stepper-input-height | 0.56rem | 28px |
+| 步进器输入框外边距 | --arco-stepper-input-margin | 0 1PX |  |
+| 步进器圆角按钮边框半径 | --arco-stepper-round-button-border-radius | 50% |  |
+| 步进器方角边框半径 | --arco-stepper-square-border-radius | 0.04rem | 2px |
+| 步进器输入框宽度 | --arco-stepper-input-width | 0.8rem | 40px |
+| 步进器整体宽度 | --arco-stepper-width | 1.96rem | 98px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 步进器内容字体颜色（暗黑模式） | --arco-dark-stepper-content-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| 步进器默认背景颜色（暗黑模式） | --arco-dark-stepper-default-background-color | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |
+| 步进器禁用状态字体颜色（暗黑模式） | --arco-dark-stepper-disable-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| 步进器方角边框样式（暗黑模式） | --arco-dark-stepper-square-border-color | #2e2e30（暗黑浅线） ⬛ | var(--arco-dark-lighter-line-color) |

package/metaData/components/steps/css-variables.md

@@ -4,14 +4,80 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| steps 竖向步骤条内容左外边距 | --arco-steps-horizontal-content-margin-top | getRem(5) |
-| steps 竖向步骤条内容下内边距 | --arco-steps-vertical-content-margin-left | getRem(13) |
-| steps 标题文字大小 | --arco-steps-vertical-content-padding-bottom | getRem(25) |
-| steps 标题文字行高 | --arco-steps-title-font-size | getRem(14) |
-| steps 描述文字大小 | --arco-steps-title-line-height | getRem(20) |
-| steps 描述文字行高 | --arco-steps-description-font-size | getRem(12) |
-| steps 描述文字外边距 | --arco-steps-description-line-height | getRem(18) |
-| steps 竖向步骤条下内边距 | --arco-steps-description-margin-top | getRem(2) |
-| steps mixin 函数进行中步骤自定义图标颜色 | --arco-steps-vertical-padding-left | getRem(20) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| steps 步骤默认描述文字颜色 | --arco-steps-description-color | #4e5969（中灰色） ⬛ | var(--arco-sub-font-color) |
+| steps 错误步骤图标颜色 | --arco-steps-error-icon-svg-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| steps 错误步骤标题颜色 | --arco-steps-error-title-color | #F53F3F（危险红） 🟥 | var(--arco-danger-color) |
+| steps 迷你版完成步骤边框颜色 | --arco-steps-finish-dot-border-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| steps 完成步骤图标颜色 | --arco-steps-finish-icon-svg-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| steps 完成步骤标题颜色 | --arco-steps-finish-title-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| steps 默认步骤字体颜色 | --arco-steps-icon-num-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| steps 进行中步骤字体颜色 | --arco-steps-process-icon-num-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| steps 进行中步骤标题颜色 | --arco-steps-process-title-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| steps mixin 函数进行中步骤自定义图标颜色 | --arco-steps-process-with-config-item-icon-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| steps 等待中步骤描述文字颜色 | --arco-steps-wait-description-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| steps 迷你版等待中步骤边框颜色 | --arco-steps-wait-dot-border-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| steps 等待中步骤标题颜色 | --arco-steps-wait-title-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| steps 无文字错误步骤背景色 | --arco-steps-error-icon-num-background | #F53F3F（危险红） 🟥 | var(--arco-danger-color) |
+| steps 无文字步骤背景色 | --arco-steps-finish-icon-num-background | #E8F3FF（浅蓝底） 🟦 | var(--arco-lighter-primary-color) |
+| steps 迷你版进行中步骤背景色 | --arco-steps-process-dot-background | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| steps 无文字进行中步骤背景色 | --arco-steps-process-icon-num-background | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| steps 步骤分割线完成态颜色 | --arco-steps-tail-finish-background | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| steps 步骤分割线默认颜色 | --arco-steps-tail-standard-background | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| steps 无文字等待中步骤背景色 | --arco-steps-wait-icon-num-background | #f2f3f5（灰底色） ⬜ | var(--arco-lighter-line-color) |
+| steps 描述文字大小 | --arco-steps-description-font-size | 0.24rem | 12px |
+| steps 错误步骤图标大小 | --arco-steps-error-icon-svg-font-size | 8PX |  |
+| steps 无文字步骤字体大小 | --arco-steps-icon-num-font-size | 12PX |  |
+| steps 步骤默认图标大小 | --arco-steps-icon-svg-standard-font-size | 10PX |  |
+| steps 步骤分割线默认粗细 | --arco-steps-tail-standard-size | 1PX |  |
+| steps 标题文字大小 | --arco-steps-title-font-size | 0.28rem | 14px |
+| steps 描述文字行高 | --arco-steps-description-line-height | 0.36rem | 18px |
+| steps 迷你版圆点高度 | --arco-steps-dot-height | 8PX |  |
+| steps 步骤图标高度 | --arco-steps-icon-height | 18PX |  |
+| steps 无文字步骤字体行高 | --arco-steps-icon-num-line-height | 18PX |  |
+| steps 标题文字行高 | --arco-steps-title-line-height | 0.4rem | 20px |
+| steps 上下内边距 | --arco-steps-padding | 0.32rem 0 | 16px 0 |
+| steps 水平分割线左右间距 | --arco-steps-tail-horizontal-padding | 0 18PX |  |
+| steps 垂直分割线上下间距 | --arco-steps-tail-vertical-padding | 14PX 0 |  |
+| steps 竖向步骤条内容下内边距 | --arco-steps-vertical-content-padding-bottom | 0.5rem | 25px |
+| steps 竖向步骤条下内边距 | --arco-steps-vertical-padding-bottom | 0 |  |
+| steps 竖向步骤条左内边距 | --arco-steps-vertical-padding-left | 0.4rem | 20px |
+| steps 描述文字外边距 | --arco-steps-description-margin-top | 0.04rem | 2px |
+| steps 横向步骤条内容区上外边距 | --arco-steps-horizontal-content-margin-top | 0.1rem | 5px |
+| steps 竖向步骤条内容左外边距 | --arco-steps-vertical-content-margin-left | 0.26rem | 13px |
+| steps 迷你版圆点边框宽度 | --arco-steps-dot-border-width | 1.5PX |  |
+| steps 分割线圆角值 | --arco-steps-tail-border-radius | 2PX |  |
+| steps 水平分割线与图标中心点的距离 | --arco-steps-tail-horizontal-gutter | 18PX |  |
+| steps 垂直分割线与图标中心点的距离 | --arco-steps-tail-vertical-gutter | 14PX |  |
+| steps 步骤图标宽度 | --arco-steps-icon-width | 18PX |  |
+| steps 迷你版圆点宽度 | --arco-steps-dot-width | 8PX |  |
+| steps 水平分割线的向右偏移距离，一般是 stepsIconHeight 值的一半 | --arco-steps-tail-horizontal-left | 9PX |  |
+| steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半 | --arco-steps-tail-vertical-top | 9PX |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| steps 步骤默认描述文字颜色（暗黑模式） | --arco-dark-steps-description-color | #c5c5c5（暗黑次文字） ⬜ | var(--arco-dark-sub-font-color) |
+| steps 错误步骤图标颜色（暗黑模式） | --arco-dark-steps-error-icon-svg-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| steps 错误步骤标题颜色（暗黑模式） | --arco-dark-steps-error-title-color | #F76965（暗黑红） 🟥 | var(--arco-dark-danger-color) |
+| steps 迷你版完成步骤边框颜色（暗黑模式） | --arco-dark-steps-finish-dot-border-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| steps 完成步骤图标颜色（暗黑模式） | --arco-dark-steps-finish-icon-svg-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| steps 完成步骤标题颜色（暗黑模式） | --arco-dark-steps-finish-title-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| steps 默认步骤字体颜色（暗黑模式） | --arco-dark-steps-icon-num-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| steps 进行中步骤字体颜色（暗黑模式） | --arco-dark-steps-process-icon-num-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| steps 进行中步骤标题颜色（暗黑模式） | --arco-dark-steps-process-title-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| steps mixin 函数进行中步骤自定义图标颜色（暗黑模式） | --arco-dark-steps-process-with-config-item-icon-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| steps 等待中步骤描述文字颜色（暗黑模式） | --arco-dark-steps-wait-description-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| steps 迷你版等待中步骤边框颜色（暗黑模式） | --arco-dark-steps-wait-dot-border-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| steps 等待中步骤标题颜色（暗黑模式） | --arco-dark-steps-wait-title-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| steps 无文字错误步骤背景色（暗黑模式） | --arco-dark-steps-error-icon-num-background | #F76965（暗黑红） 🟥 | var(--arco-dark-danger-color) |
+| steps 无文字步骤背景色（暗黑模式） | --arco-dark-steps-finish-icon-num-background | #000D4D（暗黑主题浅） 🟦 | var(--arco-dark-lighter-primary-color) |
+| steps 迷你版进行中步骤背景色（暗黑模式） | --arco-dark-steps-process-dot-background | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| steps 无文字进行中步骤背景色（暗黑模式） | --arco-dark-steps-process-icon-num-background | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| steps 步骤分割线完成态颜色（暗黑模式） | --arco-dark-steps-tail-finish-background | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| steps 步骤分割线默认颜色（暗黑模式） | --arco-dark-steps-tail-standard-background | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |
+| steps 无文字等待中步骤背景色（暗黑模式） | --arco-dark-steps-wait-icon-num-background | #2e2e30（暗黑浅线） ⬛ | var(--arco-dark-lighter-line-color) |

package/metaData/components/swipe-action/css-variables.md

@@ -4,9 +4,23 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| swipeLoad 加载提示区域的宽度 | --arco-swipeaction-swipe-load-label-text-margin-left | getRem(20) |
-| swipeLoad 加载提示区域的字体颜色 | --arco-swipeaction-swipe-load-label-text-width | getRem(20) |
-| 通知栏外层容器内边距 | --arco-swipeaction-swipe-load-label-text-font-size | getRem(12) |
-| 徽标背景色 | --arco-swipeaction-icon-margin-right | getRem(4) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| SwipeAction 文字颜色 | --arco-swipe-action-text-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| SwipeAction 文字大小 | --arco-swipe-action-text-font-size | 0.32rem | 16px |
+| swipeAction Icon 高 | --arco-swipe-action-icon-height | 0.4rem | 20px |
+| SwipeAction 文字行高 | --arco-swipe-action-text-line-height | 0.44rem | 22px |
+| SwipeAction 菜单的内边距 | --arco-swipe-action-info-padding | 0.32rem | 16px |
+| swipeAction Icon的右边距 | --arco-swipe-action-icon-margin-right | 0.08rem | 4px |
+| swipeAction Icon 宽 | --arco-swipe-action-icon-width | 0.4rem | 20px |
+| SwipeAction 菜单关闭时的动画曲线 | --arco-swipe-action-close-transition | cubic-bezier(0.34, 0.69, 0.1, 1) |  |
+| swipeAction 菜单弹性效果预留底部色块宽度 | --arco-swipe-action-info-bounce-buffer | 0.6rem | 30px |
+| SwipeAction 菜单打开时的动画曲线 | --arco-swipe-action-open-transition | cubic-bezier(0.2, 0.8, 0.32, 1.28) |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| SwipeAction 文字颜色（暗黑模式） | --arco-dark-swipe-action-text-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |

package/metaData/components/swipe-load/css-variables.md

@@ -4,9 +4,20 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| swipeLoad 加载提示区域的宽度 | --arco-swipeload-label-text-margin-left | getRem(20) |
-| swipeLoad 加载提示区域的字体颜色 | --arco-swipeload-label-text-width | getRem(20) |
-| 通知栏外层容器内边距 | --arco-swipeload-label-text-font-size | getRem(12) |
-| 徽标背景色 | --arco-swipeload-swipe-action-icon-margin-right | getRem(4) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| swipeLoad 加载提示区域的字体颜色 | --arco-swipe-load-label-text-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| swipeLoad 滑动区域的背景色 | --arco-swipe-load-label-background | #F7F8FA | var(--arco-card-background-color) |
+| swipeLoad 加载提示区域的字体大小 | --arco-swipe-load-label-text-font-size | 0.24rem | 12px |
+| swipeLoad 加载提示区域的左外边距 | --arco-swipe-load-label-text-margin-left | 0.4rem | 20px |
+| swipeLoad 滑动区域的边框半径 | --arco-swipe-load-label-border-radius | 50% |  |
+| swipeLoad 加载提示区域的宽度 | --arco-swipe-load-label-text-width | 0.4rem | 20px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| swipeLoad 加载提示区域的字体颜色（暗黑模式） | --arco-dark-swipe-load-label-text-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| swipeLoad 滑动区域的背景色（暗黑模式） | --arco-dark-swipe-load-label-background | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |

package/metaData/components/switch/css-variables.md

@@ -4,15 +4,54 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| switch 安卓开关文字大小 | --arco-switch-android-checked-inner-transform | `translateX(16PX)` |
-| switch iOS 开关整体高度 | --arco-switch-ios-width | getRem(51) |
-| switch iOS 开关内边距 | --arco-switch-ios-height | getRem(31) |
-| switch iOS 开关直径 | --arco-switch-ios-padding | getRem(2) |
-| switch iOS 开关边框颜色 | --arco-switch-ios-inner-diameter-size | getRem(27) |
-| switch iOS 直角开关圆角大小 | --arco-switch-ios-fully-border-radius | getRem(16) |
-| switch iOS 开关打开时横向偏移量 | --arco-switch-ios-semi-border-radius | getRem(2) |
-| switch iOS 开关文字大小 | --arco-switch-ios-checked-inner-transform | `translateX(${getRem(20)})` |
-| switch iOS 开关文字左右间距 | --arco-switch-ios-text-font-size | getRem(14) |
-| switch iOS 开关背景色 | --arco-switch-ios-text-gap-size | getRem(6) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| switch iOS 开关边框颜色 | --arco-switch-ios-inner-border-color | rgba(0, 0, 0, .04) |  |
+| switch 打开时文字颜色 | --arco-switch-text-checked-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| switch 文字颜色 | --arco-switch-text-color | #4e5969（中灰色） ⬛ | var(--arco-sub-font-color) |
+| switch 安卓开关背景色 | --arco-switch-android-background | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| switch 安卓开关打开时背景色 | --arco-switch-android-checked-background | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| switch 安卓开关默认关闭禁用点击时背景色 | --arco-switch-android-disabled-background | #f2f3f5（灰底色） ⬜ | var(--arco-lighter-line-color) |
+| switch 安卓开关默认打开禁用点击时背景色 | --arco-switch-android-disabled-checked-background | #94BFFF（禁用蓝） 🟦 | var(--arco-primary-disabled-color) |
+| switch 开关背景色 | --arco-switch-inner-background | #FFFFFF（白色） ⬜ |  |
+| switch iOS 开关背景色 | --arco-switch-ios-background | rgba(17, 17, 17, .15) |  |
+| switch iOS 开关打开时背景色 | --arco-switch-ios-checked-background | #34C759 |  |
+| switch iOS 开关默认关闭禁用点击时背景色 | --arco-switch-ios-disabled-background | rgba(120, 120, 128, .16) |  |
+| switch iOS 开关默认打开禁用点击时背景色 | --arco-switch-ios-disabled-checked-background | #4DD865 |  |
+| switch 安卓开关直径 | --arco-switch-android-inner-diameter-size | 20PX |  |
+| switch 安卓开关文字大小 | --arco-switch-android-text-font-size | 12PX |  |
+| switch 安卓开关文字左右间距 | --arco-switch-android-text-gap-size | 5PX |  |
+| switch iOS 开关直径 | --arco-switch-ios-inner-diameter-size | 0.54rem | 27px |
+| switch iOS 开关文字大小 | --arco-switch-ios-text-font-size | 0.28rem | 14px |
+| switch iOS 开关文字左右间距 | --arco-switch-ios-text-gap-size | 0.12rem | 6px |
+| switch 安卓开关整体高度 | --arco-switch-android-height | 24PX |  |
+| switch iOS 开关整体高度 | --arco-switch-ios-height | 0.62rem | 31px |
+| switch 安卓开关内边距 | --arco-switch-android-padding | 2PX |  |
+| switch iOS 开关内边距 | --arco-switch-ios-padding | 0.04rem | 2px |
+| switch 安卓圆角开关圆角大小 | --arco-switch-android-fully-border-radius | 20PX |  |
+| switch 安卓直角开关圆角大小 | --arco-switch-android-semi-border-radius | 2PX |  |
+| switch 圆角开关圆角大小 | --arco-switch-inner-fully-border-radius | 50% |  |
+| switch 直角开关圆角大小 | --arco-switch-inner-semi-border-radius | 1PX |  |
+| switch iOS 圆角开关圆角大小 | --arco-switch-ios-fully-border-radius | 0.32rem | 16px |
+| switch iOS 直角开关圆角大小 | --arco-switch-ios-semi-border-radius | 0.04rem | 2px |
+| switch 安卓开关打开时横向偏移量 | --arco-switch-android-checked-inner-transform | translateX(16PX) |  |
+| switch 安卓开关阴影 | --arco-switch-android-inner-box-shadow | 0 2PX 4PX 0 rgba(0, 0, 0, 0.08) |  |
+| switch 安卓开关整体宽度 | --arco-switch-android-width | 40PX |  |
+| switch 开关过渡动画 | --arco-switch-inner-transition | all .2s |  |
+| switch iOS 开关打开时横向偏移量 | --arco-switch-ios-checked-inner-transform | translateX(0.4rem) | translateX(20px) |
+| switch iOS 开关默认打开禁用点击时透明度 | --arco-switch-ios-disabled-checked-opacity | 0.3 |  |
+| switch iOS 开关阴影 | --arco-switch-ios-inner-box-shadow | 0 3PX 2PX 0 rgba(0, 0, 0, .12) |  |
+| switch iOS 开关整体宽度 | --arco-switch-ios-width | 1.02rem | 51px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| switch 打开时文字颜色（暗黑模式） | --arco-dark-switch-text-checked-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| switch 文字颜色（暗黑模式） | --arco-dark-switch-text-color | #c5c5c5（暗黑次文字） ⬜ | var(--arco-dark-sub-font-color) |
+| switch 安卓开关背景色（暗黑模式） | --arco-dark-switch-android-background | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |
+| switch 安卓开关打开时背景色（暗黑模式） | --arco-dark-switch-android-checked-background | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| switch 安卓开关默认关闭禁用点击时背景色（暗黑模式） | --arco-dark-switch-android-disabled-background | #2e2e30（暗黑浅线） ⬛ | var(--arco-dark-lighter-line-color) |
+| switch 安卓开关默认打开禁用点击时背景色（暗黑模式） | --arco-dark-switch-android-disabled-checked-background | #0E32A6（暗黑主题禁用） 🟦 | var(--arco-dark-primary-disabled-color) |

package/metaData/components/tab-bar/css-variables.md

@@ -4,11 +4,24 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| tabBar 默认字体大小 | --arco-tabbar-height | getRem(50) |
-| tabBar icon的默认大小 | --arco-tabbar-font-size | getRem(10) |
-| tabBar 只有title时的字体大小 | --arco-tabbar-icon-size | getRem(20) |
-| tabBar 默认颜色 | --arco-tabbar-only-title-font-size | getRem(16) |
-| tabBar 只有title时的行高 | --arco-tabbar-title-line-height | getRem(14) |
-| tabBar 标题外边距 | --arco-tabbar-only-title-line-height | getRem(22) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| tabBar 激活状态下的颜色 | --arco-tab-bar-active-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| tabBar 默认颜色 | --arco-tab-bar-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| tabBar 默认字体大小 | --arco-tab-bar-font-size | 0.2rem | 10px |
+| tabBar icon的默认大小 | --arco-tab-bar-icon-size | 0.4rem | 20px |
+| tabBar 只有title时的字体大小 | --arco-tab-bar-only-title-font-size | 0.32rem | 16px |
+| tabBar 高度 | --arco-tab-bar-height | 1rem | 50px |
+| tabBar 只有title时的行高 | --arco-tab-bar-only-title-line-height | 0.44rem | 22px |
+| tabBar 标题行高 | --arco-tab-bar-title-line-height | 0.28rem | 14px |
+| tabBar 子选项图标外边距 | --arco-tab-bar-item-icon-margin | 0.14rem 0 0.08rem | 7px 0 4px |
+| tabBar 标题外边距 | --arco-tab-bar-title-margin | 0 0 0.1rem 0 | 0 0 5px 0 |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| tabBar 激活状态下的颜色（暗黑模式） | --arco-dark-tab-bar-active-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| tabBar 默认颜色（暗黑模式） | --arco-dark-tab-bar-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |

package/metaData/components/tabs/css-variables.md

@@ -4,15 +4,44 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| tabs tabbar 背景色 | --arco-tabs-tab-bar-font-size | getRem(15) |
-| tabs 左右排布时 tabbar 容器宽度 | --arco-tabs-tab-bar-height | getRem(42) |
-| tabs 左右排布时每一个选项卡的高度 | --arco-tabs-tab-bar-width | getRem(78) |
-| tabs 分段器样式下 tabbar 容器高度 | --arco-tabs-tab-bar-horizontal-height | getRem(54) |
-| tabs 分段器样式下的主颜色（边框色、高亮块背景色、非高亮块文字颜色） | --arco-tabs-tab-bar-card-height | getRem(40) |
-| tabs 标签非等分样式下选项卡的间距 | --arco-tabs-tab-bar-line-gutter | getRem(40) |
-| tabs 标签样式下 tabbar 容器高度 | --arco-tabs-tab-bar-tag-gutter | getRem(16) |
-| tabs 标签样式下，选项卡与容器的垂直间距 | --arco-tabs-tab-bar-tag-height | getRem(60) |
-| tabs 标签样式下每个选项卡的背景色 | --arco-tabs-tab-bar-tag-vertical-padding | getRem(12) |
-| tabs 基础样式高亮下划线的圆角值 | --arco-tabs-underline-size | getRem(24) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| tabs 分段器样式下的主颜色（边框色、高亮块背景色、非高亮块文字颜色） | --arco-tabs-tab-bar-card-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| tabs 分段器样式下高亮选项卡的文字颜色 | --arco-tabs-tab-bar-card-text-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| tabs 基础样式下高亮选项卡的文字颜色 | --arco-tabs-tab-bar-line-active-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| tabs 标签样式下高亮选项卡的文字颜色 | --arco-tabs-tab-bar-tag-active-text-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| tabs 标签样式下每个选项卡的文字颜色 | --arco-tabs-tab-bar-tag-text-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| tabs 基础样式高亮下划线的颜色 | --arco-tabs-underline-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| tabs tabbar 背景色 | --arco-tabs-tab-bar-background | #FFFFFF（白色） ⬜ | var(--arco-background-color) |
+| tabs 标签样式下高亮选项卡的背景色 | --arco-tabs-tab-bar-tag-active-background | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| tabs 标签样式下每个选项卡的背景色 | --arco-tabs-tab-bar-tag-background | #F7F8FA | var(--arco-card-background-color) |
+| tabs tabbar 字体大小 | --arco-tabs-tab-bar-font-size | 0.3rem | 15px |
+| tabs 基础样式高亮下划线的长度 | --arco-tabs-underline-size | 0.48rem | 24px |
+| tabs 分段器样式下 tabbar 容器高度 | --arco-tabs-tab-bar-card-height | 0.8rem | 40px |
+| tabs 上下排布时 tabbar 容器高度 | --arco-tabs-tab-bar-height | 0.84rem | 42px |
+| tabs 左右排布时每一个选项卡的高度 | --arco-tabs-tab-bar-horizontal-height | 1.08rem | 54px |
+| tabs 标签样式下 tabbar 容器高度 | --arco-tabs-tab-bar-tag-height | 1.2rem | 60px |
+| tabs 标签样式下每个选项卡的内边距 | --arco-tabs-tab-bar-tag-padding | 0 0.32rem | 0 16px |
+| tabs 标签样式下，选项卡与容器的垂直间距 | --arco-tabs-tab-bar-tag-vertical-padding | 0.24rem | 12px |
+| tabs 分段器样式 tabbar 容器圆角值 | --arco-tabs-tab-bar-card-border-radius | 2PX |  |
+| tabs 基础样式高亮下划线的圆角值 | --arco-tabs-underline-border-radius | 2PX |  |
+| tabs 基础非等分样式下选项卡的间距 | --arco-tabs-tab-bar-line-gutter | 0.8rem | 40px |
+| tabs 标签非等分样式下选项卡的间距 | --arco-tabs-tab-bar-tag-gutter | 0.32rem | 16px |
+| tabs 左右排布时 tabbar 容器宽度 | --arco-tabs-tab-bar-width | 1.56rem | 78px |
+| tabs 基础样式高亮下划线的厚度 | --arco-tabs-underline-thick | 2PX |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| tabs 分段器样式下的主颜色（边框色、高亮块背景色、非高亮块文字颜色）（暗黑模式） | --arco-dark-tabs-tab-bar-card-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| tabs 分段器样式下高亮选项卡的文字颜色（暗黑模式） | --arco-dark-tabs-tab-bar-card-text-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| tabs 基础样式下高亮选项卡的文字颜色（暗黑模式） | --arco-dark-tabs-tab-bar-line-active-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| tabs 标签样式下高亮选项卡的文字颜色（暗黑模式） | --arco-dark-tabs-tab-bar-tag-active-text-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| tabs 标签样式下每个选项卡的文字颜色（暗黑模式） | --arco-dark-tabs-tab-bar-tag-text-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| tabs 基础样式高亮下划线的颜色（暗黑模式） | --arco-dark-tabs-underline-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| tabs tabbar 背景色（暗黑模式） | --arco-dark-tabs-tab-bar-background | #17171A（暗黑背景） ⬛ | var(--arco-dark-background-color) |
+| tabs 标签样式下高亮选项卡的背景色（暗黑模式） | --arco-dark-tabs-tab-bar-tag-active-background | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| tabs 标签样式下每个选项卡的背景色（暗黑模式） | --arco-dark-tabs-tab-bar-tag-background | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |