1. 设置页面
- 目前只有四种主题颜色可选，后续可能会开放自定义主题。
- 目前只适用于antd4。
- 采用CSS 自定义属性修改主题样式。
- 间距正常是4的倍数
2. CSS 自定义属性
| 属性名称 | 属性说明 |
|---|---|
--antd-dynamic-primary-color |
默认主题色 |
--antd-dynamic-primary-active-color |
选中主题色，较主题颜色深 |
--antd-dynamic-primary-hover-color |
元素经过主题色，较主题颜色浅 |
--antd-dynamic-primary-shadow-color |
阴影主题色，较元素经过主题色浅 |
--antd-dynamic-primary-underly-color-1 |
默认主题色，透明度0.04 |
--antd-dynamic-primary-underly-color-2 |
默认主题色，透明度0.06 |
--antd-dynamic-primary-underly-color-3 |
默认主题色，透明度0.12 |
--dynamic-primary-font-size |
字体大小，标准14px，紧凑12px |
--dynamic-primary-padding-vertical |
内边距纵向长度，标准16px，紧凑12px |
--dynamic-primary-padding-horizontal |
内边距横向长度，标准20px，紧凑16px |
--dynamic-primary-margin-vertical |
外边距纵向长度，标准12px，紧凑8px |
--dynamic-primary-margin-horizontal |
外边距横向长度，标准12px，紧凑8px |
--dynamic-primary-spacing-normal |
正常间距，标准20px，紧凑16px |
--dynamic-primary-spacing-smal |
小间距，标准16px，紧凑12px |
--dynamic-primary-spacing-smaller |
更小间距，标准12px，紧凑8px |
--dynamic-primary-spacing-1 |
间距，4px |
--dynamic-primary-spacing-2 |
间距，8px |
--dynamic-primary-spacing-3 |
间距，12px |
--dynamic-primary-spacing-4 |
间距，16px |
--dynamic-primary-spacing-5 |
间距，20px |
--dynamic-primary-border-radius-normal |
边角圆润，6px |
例子：
3. 使用方式
- 使用自定义属性：一般用var加属性名称即可，如
var(--antd-dynamic-primary-color)，例子：- 1、定义背景颜色：
background: var(--antd-dynamic-primary-color) - 2、定义字体大小：
font-size: var(--dynamic-primary-font-size) - 3、设置默认值：
font-size: var(--dynamic-primary-font-size, 14px)
- 1、定义背景颜色：
- 使用calc计算：如果长度不满足情况，又需要根据主题变化，可以使用calc计算，比如：
- 1、字体需要比默认设置大2px:
font-size: calc(var(--dynamic-primary-font-size) + 2px) - 2、字体是默认值2倍：
font-size: calc(var(--dynamic-primary-font-size) * 2)
- 1、字体需要比默认设置大2px:
作者：黄允桢 创建时间：2023-07-24 09:14
最后编辑：黄允桢 更新时间：2024-12-11 10:09
最后编辑：黄允桢 更新时间：2024-12-11 10:09
