主题
Gui Web默认提供三套主题（白绿，白蓝，黑金），通过 setTheme 方法来切换主题。
默认白蓝主题
white-blue。
更换主题
ts
// 在 APP.vue 中设置主题色
<script setup lang="ts">
import { onMounted } from 'vue'
onMounted(() => {
window.gui.setTheme('white-green')
})
</script>主题列表
主题名称为 白绿
white-green、白蓝white-blue、黑金black-gold。
SCSS 变量名序列
包含基础色，背景色，主题色，辅色，文本，边框，填充，以及style。参考主题png
基础色
| 名称 | 说明 |
|---|---|
| --gui-color-white | 白色 |
| --gui-color-black | 黑色 |
背景色
| 名称 | 说明 |
|---|---|
| --gui-primary-fill-color | 主题背景色 |
| --gui-content-fill-color | 内容块背景色 |
| --gui-content-fill-color-2 | 二级内容块背景色 |
| --gui-base-fill-color | 黑白背景色 |
| --gui-content-primary-light-fill-color | 黑金主题亮色，白蓝白绿主题色，常用于顶部背景色 |
主题色
主色(primary)
| 名称 | 说明 |
|---|---|
| --gui-color-primary | primary |
| --gui-color-primary-num | primary rgb值 |
| --gui-color-primary-1 | primary-1 |
| --gui-color-primary-2 | primary-2 |
| --gui-color-primary-3 | primary-3 |
| --gui-color-primary-4 | primary-4 |
| --gui-color-primary-5 | primary-5 |
| --gui-color-primary-6 | primary-6 |
| --gui-color-primary-7 | primary-7 |
主色亮色(primary-light)
| 名称 | 说明 |
|---|---|
| --gui-color-primary-light | primary-light |
| --gui-color-primary-light-num | primary-light rgb值 |
| --gui-color-primary-light-1 | primary-light-1 |
| --gui-color-primary-light-2 | primary-light-2 |
| --gui-color-primary-light-3 | primary-light-3 |
| --gui-color-primary-light-4 | primary-light-4 |
| --gui-color-primary-light-5 | primary-light-5 |
| --gui-color-primary-light-6 | primary-light-6 |
| --gui-color-primary-light-7 | primary-light-7 |
辅助色
success
| 名称 | 说明 |
|---|---|
| --gui-color-success | success |
| --gui-color-success-num | success rgb值 |
| --gui-color-success-1 | success-1 |
| --gui-color-success-2 | success-2 |
| --gui-color-success-3 | success-3 |
| --gui-color-success-4 | success-4 |
| --gui-color-success-5 | success-5 |
| --gui-color-success-6 | success-6 |
| --gui-color-success-7 | success-7 |
warning
| 名称 | 说明 |
|---|---|
| --gui-color-warning | warning |
| --gui-color-warning-num | warning rgb值 |
| --gui-color-warning-1 | warning-1 |
| --gui-color-warning-2 | warning-2 |
| --gui-color-warning-3 | warning-3 |
| --gui-color-warning-4 | warning-4 |
| --gui-color-warning-5 | warning-5 |
| --gui-color-warning-6 | warning-6 |
| --gui-color-warning-7 | warning-7 |
danger
| 名称 | 说明 |
|---|---|
| --gui-color-danger | danger |
| --gui-color-danger-num | danger rgb值 |
| --gui-color-danger-1 | danger-1 |
| --gui-color-danger-2 | danger-2 |
| --gui-color-danger-3 | danger-3 |
| --gui-color-danger-4 | danger-4 |
| --gui-color-danger-5 | danger-5 |
| --gui-color-danger-6 | danger-6 |
| --gui-color-danger-7 | danger-7 |
info
| 名称 | 说明 |
|---|---|
| --gui-color-info | info |
| --gui-color-info-num | info rgb值 |
| --gui-color-info-1 | info-1 |
| --gui-color-info-2 | info-2 |
| --gui-color-info-3 | info-3 |
| --gui-color-info-4 | info-4 |
| --gui-color-info-5 | info-5 |
| --gui-color-info-6 | info-6 |
| --gui-color-info-7 | info-7 |
Text 文字颜色
| 名称 | 说明 |
|---|---|
| --gui-text-color-base | 基础字体颜色，浅色背景下为 #000000，深色背景下为#ffffff |
| --gui-text-color-back | 基础(反)字体颜色，浅色背景下为 #ffffff，深色背景下为#000000 |
| --gui-text-color-primary | 主要文字 |
| --gui-text-color-primary | 主要文字 |
| --gui-text-color-regular | 常规文字 |
| --gui-text-color-secondary | 次要文字 |
| --gui-text-color-placeholder | 占位文字 |
| --gui-text-color-disabled | 禁用文字 |
Border 边框颜色
| 名称 | 说明 |
|---|---|
| --gui-border-color | 一级边框 |
| --gui-border-color-2 | 二级边框 |
| --gui-border-color-3 | 三级边框 |
| --gui-border-color-4 | 四级边框 |
Fill 填充色
| 名称 | 说明 |
|---|---|
| --gui-fill-color | 一级填充 |
| --gui-fill-color-2 | 二级填充 |
| --gui-fill-color-3 | 三级填充 |
| --gui-fill-color-4 | 四级填充 |
Style
| 名称 | 说明 |
|---|---|
| --gui-font-size | 字号，默认14px |
| --gui-layout-margin | margin，默认10px |
| --gui-layout-padding | padding，默认16px |
| --gui-border-radius | 圆角，默认10px |
| --gui-text-indent | 字间距，默认5px |
| --gui-line-height | 行高，默认1.4倍 |