内置了 19 组主色和 16 组强调色,所有颜色(包括背景色中的文本颜色、文本不透明度)均与文档保持一致。
背景颜色类名为 .wei-color-[color]-[degree]
。它在设置背景色的同时,还设置了背景色中的文本颜色和文本不透明度。
此外主色和强调色都有一个默认的背景颜色类:
.wei-color-[color]
和 .wei-color-[color]-500
等效。.wei-color-[color]-accent
和 .wei-color-[color]-a200
等效。<div class="wei-color-blue-200">wei-color-blue-200</div>
<div class="wei-color-blue">wei-color-blue</div>
<div class="wei-color-pink-accent">wei-color-pink-accent</div>
<div class="wei-color-pink-a200">wei-color-pink-a200</div>
所有可用的背景色类名全部列在下方的 颜色参考表 中。
文本颜色类名为 wei-text-color-[color]-[degree]
。
此外主色和强调色都有一个默认的文本颜色类:
.wei-text-color-[color]
和 .wei-text-color-[color]-500
等效。.wei-text-color-[color]-accent
和 .wei-text-color-[color]-a200
等效。<div class="wei-text-color-blue-900">wei-text-color-blue-900</div>
<div class="wei-text-color-blue">wei-text-color-blue</div>
<div class="wei-text-color-blue-a200">wei-text-color-blue-a200</div>
<div class="wei-text-color-blue-accent">wei-text-color-blue-accent</div>
此外, 还提供了带不透明度的黑色和白色的文本和图标颜色。
.wei-text-color-black-*
用于浅色背景。.wei-text-color-white-*
用于深色背景。
在 body 中添加类 .wei-theme-primary-[color]
来设置主色。
在页面中使用下列类,这些类的颜色会随着 body 中的主题颜色的变化而变化:
.wei-color-theme
.wei-color-theme-[degree]
.wei-text-color-theme
.wei-text-color-theme-[degree]
在 body 中添加类 .wei-theme-accent-[color]
来设置强调色
在页面中使用下列类,这些类的颜色会随着 body 中的主题颜色的变化而变化:
.wei-color-theme-accent
.wei-color-theme-[degree]
.wei-text-color-theme-accent
.wei-text-color-theme-[degree]
在 body 中添加类 .wei-theme-layout-dark
即可把整个页面包括组件设置为深色背景。
在 body 中添加类 .wei-theme-layout-auto
即可使整个页面包括组件的背景色根据操作系统的主题自动调整。
此外,在页面中使用下列类,这些类的颜色会根据主题色进行变化,浅色主题时显示为深色,深色主题时显示为浅色。
.wei-text-color-theme-text
.wei-text-color-theme-secondary
.wei-text-color-theme-disabled
.wei-text-color-theme-divider
.wei-text-color-theme-icon
.wei-text-color-theme-icon-disabled
类名 | 效果 | 说明 |
---|---|---|
.wei-theme-primary-[color]
|
设置主题中的主色 | 添加到 <body> 元素上 |
.wei-theme-accent-[color]
|
设置主题中的强调色 | 添加到 <body> 元素上 |
.wei-theme-layout-dark |
设置为深色主题 | 添加到 <body> 元素上 |
类名 | 效果 |
---|---|
.wei-color-[color]
|
设置指定主色的背景色 |
.wei-color-[color]-accent
|
设置指定强调色的背景色 |
.wei-color-[color]-[degree]
|
设置指定颜色和饱和度的背景色 |
.wei-color-theme |
根据 body 中定义的主色主题设置背景色 |
.wei-color-theme-accent |
根据 body 中定义的强调色主题设置背景色 |
.wei-color-theme-[degree]
|
根据 body 中定义的主色或强调色主题设置指定饱和度的背景色 |
.wei-color-black |
设置纯黑背景色 |
.wei-color-white |
设置纯白背景色 |
.wei-color-transparent |
设置透明背景色 |
类名 | 效果 |
---|---|
.wei-text-color-[color]
|
设置指定主色的文本色 |
.wei-text-color-[color]-accent
|
设置指定强调色的文本色 |
.wei-text-color-[color]-[degree]
|
设置指定颜色和饱和度的文本色 |
.wei-text-color-theme |
根据 body 中的主色主题设置文本色 |
.wei-text-color-theme-accent |
根据 body 中的强调色主题设置文本色 |
.wei-text-color-theme-[degree]
|
根据 body 中的主色或强调色设置指定饱和度的文本色 |
深色文本色,用在浅色背景中:
类名 | 效果 |
---|---|
.wei-text-color-black |
设置纯黑文本色 |
.wei-text-color-black-text |
设置主文本的文本色 |
.wei-text-color-black-secondary |
设置副文本的文本色 |
.wei-text-color-black-disabled |
设置禁用状态的文本色 |
.wei-text-color-black-divider |
设置分割线的文本色 |
.wei-text-color-black-icon |
设置图标的颜色 |
.wei-text-color-black-icon-disabled |
设置禁用状态的图标颜色 |
浅色文本色,用在深色背景中:
类名 | 效果 |
---|---|
.wei-text-color-white |
设置纯白文本色 |
.wei-text-color-white-text |
设置主文本的文本色 |
.wei-text-color-white-secondary |
设置副文本的文本色 |
.wei-text-color-white-disabled |
设置禁用状态的文本色 |
.wei-text-color-white-divider |
设置分割线的文本色 |
.wei-text-color-white-icon |
设置图标的颜色 |
.wei-text-color-white-icon-disabled |
设置禁用状态的图标颜色 |
根据主题色变化的深色或浅色文本色:
类名 | 效果 |
---|---|
.wei-text-color-theme-text |
设置主文本的文本色。默认为深色,深色主题下为浅色。 |
.wei-text-color-theme-secondary |
设置副文本的文本色。默认为深色,深色主题下为浅色。 |
.wei-text-color-theme-disabled |
设置禁用状态的文本色。默认为深色,深色主题下为浅色。 |
.wei-text-color-theme-divider |
设置分割线的文本色。默认为深色,深色主题下为浅色。 |
.wei-text-color-theme-icon |
设置图标的颜色。默认为深色,深色主题下为浅色。 |
.wei-text-color-theme-icon-disabled |
设置禁用状态的图标颜色。默认为深色,深色主题下为浅色。 |