主题定制
minidev-components 使用 CSS Custom Properties（CSS 变量）构建完整的 MD3 主题系统。
主题变量一览
颜色
Primary
#6366f1
Surface
#ffffff
Error
#b3261e
Surface Variant
#e7e0ec
Outline
#79747e
完整变量表
颜色变量
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
--m-color-primary | 主色 | color | #6366f1 |
--m-color-on-primary | 主色上的前景色 | color | #ffffff |
--m-color-surface | 表面色 | color | #ffffff |
--m-color-on-surface | 表面色上的前景色 | color | #1c1b1f |
--m-color-surface-variant | 次级表面色 | color | #e7e0ec |
--m-color-error | 错误色 | color | #b3261e |
--m-color-outline | 边框色 | color | #79747e |
--m-color-outline-variant | 次级边框色 | color | #cac4d0 |
状态层变量
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
--m-state-hover | Hover 状态透明度 | number | 0.08 |
--m-state-pressed | 按下状态透明度 | number | 0.12 |
--m-state-focused | 聚焦状态透明度 | number | 0.12 |
圆角变量
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
--m-radius-xs | 超小圆角 | length | 4rpx |
--m-radius-sm | 小圆角 | length | 8rpx |
--m-radius-md | 中圆角 | length | 12rpx |
--m-radius-lg | 大圆角 | length | 16rpx |
--m-radius-xl | 超大圆角 | length | 28rpx |
间距变量
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
--m-spacing-xs | 超小间距 | length | 8rpx |
--m-spacing-sm | 小间距 | length | 16rpx |
--m-spacing-md | 中间距 | length | 32rpx |
--m-spacing-lg | 大间距 | length | 48rpx |
字体变量
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
--m-font-size-xs | 超小字号 | length | 20rpx |
--m-font-size-sm | 小字号 | length | 24rpx |
--m-font-size-md | 中字号 | length | 28rpx |
--m-font-size-lg | 大字号 | length | 32rpx |
--m-font-size-xl | 超大字号 | length | 36rpx |
动画变量
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
--m-duration-short | 短动画 | time | 100ms |
--m-duration-medium | 中动画 | time | 250ms |
--m-duration-long | 长动画 | time | 500ms |
--m-easing-standard | 标准缓动 | timing-function | cubic-bezier(0.2,0,0,1) |
自定义主题
在页面或全局样式中覆盖变量即可：
css
/* 切换为绿色主题 */
:root {
--m-color-primary: #10b981;
--m-color-on-primary: #ffffff;
}
/* 加大圆角 */
:root {
--m-radius-md: 20rpx;
--m-radius-lg: 24rpx;
}