主题

INFO

根据惟客云平台 UI 规范定义: https://codesign.qq.com/s/GyOl9yVmqn0dxaW/OD8r0BXKByjRXkg

TIP

点击这里查看微前端框架下，如何定制主题

品牌色的应用

品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 WakeData 的品牌色取自基础色板的橘黃色， Hex 值为#f0762b，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。

var(--wk-color-primary)

var(--wk-color-secondary)

功能色

功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。

var(--wk-color-success)

var(--wk-color-info)

var(--wk-color-warning)

var(--wk-color-danger)

中性色

中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。

调色盘

主色

var(--wk-color-primary-900)

var(--wk-color-primary-800)

var(--wk-color-primary-700)

var(--wk-color-primary-600)

var(--wk-color-primary-500)

var(--wk-color-primary-400)

var(--wk-color-primary-300)

var(--wk-color-primary-200)

var(--wk-color-primary-100)

var(--wk-color-primary-50)

副色

var(--wk-color-secondary-900)

var(--wk-color-secondary-800)

var(--wk-color-secondary-700)

var(--wk-color-secondary-600)

var(--wk-color-secondary-500)

var(--wk-color-secondary-400)

var(--wk-color-secondary-300)

var(--wk-color-secondary-200)

var(--wk-color-secondary-100)

var(--wk-color-secondary-50)

成功

var(--wk-color-success-900)

var(--wk-color-success-800)

var(--wk-color-success-700)

var(--wk-color-success-600)

var(--wk-color-success-500)

var(--wk-color-success-400)

var(--wk-color-success-300)

var(--wk-color-success-200)

var(--wk-color-success-100)

var(--wk-color-success-50)

失败

var(--wk-color-danger-900)

var(--wk-color-danger-800)

var(--wk-color-danger-700)

var(--wk-color-danger-600)

var(--wk-color-danger-500)

var(--wk-color-danger-400)

var(--wk-color-danger-300)

var(--wk-color-danger-200)

var(--wk-color-danger-100)

var(--wk-color-danger-50)

警告

var(--wk-color-warning-900)

var(--wk-color-warning-800)

var(--wk-color-warning-700)

var(--wk-color-warning-600)

var(--wk-color-warning-500)

var(--wk-color-warning-400)

var(--wk-color-warning-300)

var(--wk-color-warning-200)

var(--wk-color-warning-100)

var(--wk-color-warning-50)

信息

var(--wk-color-info-900)

var(--wk-color-info-800)

var(--wk-color-info-700)

var(--wk-color-info-600)

var(--wk-color-info-500)

var(--wk-color-info-400)

var(--wk-color-info-300)

var(--wk-color-info-200)

var(--wk-color-info-100)

var(--wk-color-info-50)

中性

var(--wk-color-gray-900)

var(--wk-color-gray-800)

var(--wk-color-gray-700)

var(--wk-color-gray-600)

var(--wk-color-gray-500)

var(--wk-color-gray-400)

var(--wk-color-gray-300)

var(--wk-color-gray-200)

var(--wk-color-gray-100)

var(--wk-color-gray-50)

var(--wk-color-gray-0)

基础

var(--wk-color-white)

var(--wk-color-black)

组件

字体

var(--wk-color-font-primary)

字体主色, 用于需要突出显示地方

var(--wk-color-font-regular)

正文颜色，用于大篇幅文字展示

var(--wk-color-font-secondary)

次要颜色，常用于描述语

var(--wk-color-font-placeholder)

占位符

var(--wk-color-font-disabled)

禁用颜色

var(--wk-color-font-inverse)

反相颜色，用于深色背景

边框颜色

var(--wk-color-border-dark)

深色边框

var(--wk-color-border)

常规边框

var(--wk-color-border-light)

浅色边框

var(--wk-color-border-lighter)

浅色+边框

var(--wk-color-border-extra-light)

浅色++边框

背景颜色

var(--wk-color-bg)

背景

var(--wk-color-bg-dark)

背景深亿一点点

链接颜色

var(--wk-color-link)

链接

var(--wk-color-link-hover)

链接悬停

主题 #

品牌色的应用 #

功能色 #

中性色 #

调色盘 #

组件 #

主题

品牌色的应用

功能色

中性色

调色盘

组件