Skip to content

Commit

Permalink
Merge branch 'docs-site-dev' of github.com:ant-design/ant-design-mini…
Browse files Browse the repository at this point in the history 
… into docs-site-dev
  • Loading branch information
@rayhomie
rayhomie committed Nov 15, 2024
2 parents 7778653 + b4c8714 commit 9ede656
Showing 1 changed file with 26 additions and 21 deletions.
47 changes: 26 additions & 21 deletions docs/guide/customize-theme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,30 @@ antd-mini 支持使用 less 来自定义主题。antd-mini 内置了两套主题

### 通过 ConfigProvider 覆盖

## less 变量
## CSS 变量 WIP

| 名称 | 说明 | 默认值 |
| ------------------ | ------------------------------------------- | -------------------- |
| theme | 主题，可选择 `default`、`dark` | `default` |
| rpx | rpx 单位对应值 | `0.5px` |
| colorPrimary | 主品牌色，对应 `default` 和 `dark` 的默认值 | `#1677ff`、`#3086FF` |
| colorWathet | 浅蓝色 | `#E7F1FF`、`#0D2543` |
| colorRed | 红色 | `#FF3141`、`#FF4A58` |
| colorYellow | 黄色 | `#FF9F18`、`#FFA930` |
| colorGreen | 绿色 | `#22B35E`、`#34B368` |
| colorTextPrimary | 主要文本信息颜色 | `#333333`、`#E6E6E6` |
| colorWhite | 白色 | `#FFFFFF`、`#FFFFFF` |
| colorOrange | 橙色 | `#FF6430`、`#E65A2B` |
| colorBlack | 黑色 | `#000000`、`#000000` |
| colorTextAssist | 辅助性文本信息颜色 | `#999999`、`#808080` |
| colorBorder | 边框颜色 | `#EEEEEE`、`#2B2B2B` |
| colorBackground | 全局背景色 | `#F5F5F5`、`#0A0A0A` |
| colorTextWeak | 弱信息 | `#CCCCCC`、`#4D4D4D` |
| colorCard | 卡片颜色 | `#FFFFFF`、`#1A1A1A` |
| colorTextSecondary | 副级文本信息颜色 | `#666666`、`#B3B3B3` |
| colorGreyCard | 灰色卡片 | `#F5F5F5`、`#2B2B2B` |
> 定制使用的 CSS 变量名称可以在每个组件的文档里查看，或者在[配置文件](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)查看完整版便变量名称 ，下面是以 button 为例的列举的一些变量名称；
| 变量名 | 默认值 | 深色模式默认值 | 备注 |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------- |
| --button-disabled-opacity | 0.4 | 0.4 | 按钮禁用透明度 |
| --button-color | <div style="width: 150px; height: 30px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 30px; background-color: #3086FF;">#3086FF</div> | 按钮颜色 |
| --button-background-color | <div style="width: 150px; height: 30px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 30px; background-color: #000000;">#000000</div> | 按钮背景颜色 |
| --button-border-color | <div style="width: 150px; height: 30px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 30px; background-color: #0A0A0A;">#0A0A0A</div> | 按钮边框颜色 |
| --button-primary-border-color | <div style="width: 150px; height: 30px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 30px; background-color: #3086FF;">#3086FF</div> | 主要按钮边框颜色 |
| --button-primary-background-color | <div style="width: 150px; height: 30px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 30px; background-color: #3086FF;">#3086FF</div> | 主要按钮背景颜色 |
| --button-primary-color | <div style="width: 150px; height: 30px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 30px; background-color: #FFFFFF; color: #FFFFFF;">#FFFFFF</div> | 主要按钮颜色 |
| --button-primary-aide-border-color | <div style="width: 150px; height: 30px; background-color: #E7F1FF; color: #333333;">#E7F1FF</div> | <div style="width: 150px; height: 30px; background-color: #0D2543;">#0D2543</div> | 主要辅助按钮边框颜色 |
| --button-primary-aide-color | <div style="width: 150px; height: 30px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 30px; background-color: #3086FF;">#3086FF</div> | 主要辅助按钮颜色 |
| --button-default-aide-border-color | <div style="width: 150px; height: 30px; background-color: #F5F5F5; color: #333333;">#F5F5F5</div> | <div style="width: 150px; height: 30px; background-color: #121212;">#121212</div> | 默认辅助按钮边框颜色 |
| --button-default-aide-background-color | <div style="width: 150px; height: 30px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 30px; background-color: #000000;">#000000</div> | 默认辅助按钮背景颜色 |
| --button-default-aide-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #FFFFFF;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #C5CAD1;">#C5CAD1</div> | 默认辅助按钮颜色 |
| --button-primary-danger-background-color | <div style="width: 150px; height: 30px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 30px; background-color: #FF4A58;">#FF4A58</div> | 主要危险按钮背景颜色 |
| --button-primary-danger-border-color | <div style="width: 150px; height: 30px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 30px; background-color: #FF4A58;">#FF4A58</div> | 主要危险按钮边框颜色 |
| --button-primary-danger-color | <div style="width: 150px; height: 30px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 30px; background-color: #FFFFFF; color: #FFFFFF;">#FFFFFF</div> | 主要危险按钮颜色 |
| --button-default-danger-background-color | <div style="width: 150px; height: 30px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 30px; background-color: #FFFFFF; color: #FFFFFF;">#FFFFFF</div> | 默认危险按钮背景颜色 |
| --button-default-danger-border-color | <div style="width: 150px; height: 30px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 30px; background-color: #FF4A58;">#FF4A58</div> | 默认危险按钮边框颜色 |
| --button-default-danger-color | <div style="width: 150px; height: 30px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 30px; background-color: #FF4A58;">#FF4A58</div> | 默认危险按钮颜色 |
| --button-text-danger-color | <div style="width: 150px; height: 30px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 30px; background-color: #FF4A58;">#FF4A58</div> | 危险按钮文字颜色 |
| --button-danger-default-color | <div style="width: 150px; height: 30px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 30px; background-color: #FF4A58;">#FF4A58</div> | 危险按钮默认颜色 |
| --button-active-bg | <div style="width: 150px; height: 30px; background-color: rgba(255, 255, 255, 0.08);">rgba(255, 255, 255, 0.08)</div> | <div style="width: 150px; height: 30px; background-color: rgba(255, 255, 255, 0.08);">rgba(255, 255, 255, 0.08)</div> | 按钮激活背景颜色 |

0 comments on commit 9ede656

Please sign in to comment.