# 布局颜色

提示

  • unify ui 所有有关color属性与bg属性,都是使用布局颜色内颜色值
  • 颜色值在uni.scss文件中修改,可根据您项目所配置的颜色而调整整体的样式

# 文本色

一级文字/正文/主标题 二级文字/副标/常规内容 三级文字/补充描述/辅助内容 四级文字/占位内容
color-main color-often color-help color-fill
主色 描述 辅色 描述
color-theme 主题颜色 color-theme-help 辅助主题颜色
color-red 红色 color-red-help 辅助红色
color-orange 橙色 color-orange-help 辅助橙色
color-yellow 黄色 color-yellow-help 辅助黄色
color-green 绿色 color-green-help 辅助绿色
color-cyan 青色 color-cyan-help 辅助青色
color-blue 蓝色 color-blue-help 辅助蓝色
color-purple 紫色 color-purple-help 辅助紫色
color-black 黑色 color-black-help 辅助黑色
color-gray 灰色 color-gray-help 辅助灰色
color-white 白色 color-white-help 辅助白色

# 背景色

主色 描述 辅色 描述
bg-theme 主题颜色 bg-theme-help 辅助主题颜色
bg-red 红色 bg-red-help 辅助红色
bg-orange 橙色 bg-orange-help 辅助橙色
bg-yellow 黄色 bg-yellow-help 辅助黄色
bg-green 绿色 bg-green-help 辅助绿色
bg-cyan 青色 bg-cyan-help 辅助青色
bg-blue 蓝色 bg-blue-help 辅助蓝色
bg-purple 紫色 bg-purple-help 辅助紫色
bg-black 黑色 bg-black-help 辅助黑色
bg-gray 灰色 bg-gray-help 辅助灰色
bg-white 白色 bg-white-help 辅助白色

# 渐变色

提示

渐变色为主色与辅色融合而成,背景主色class后加上渐变方向即为渐变色

渐变颜色 上辅下主 上主下辅 左辅右主 左主右辅
主题色渐变 bg-theme-top bg-theme-bottom bg-theme-left bg-theme-right
红色渐变 bg-red-top bg-red-bottom bg-red-left bg-red-right
橙色渐变 bg-orange-top bg-orange-bottom bg-orange-left bg-orange-right
黄色渐变 bg-yellow-top bg-yellow-bottom bg-yellow-left bg-yellow-right
绿色渐变 bg-green-top bg-green-bottom bg-green-left bg-green-right
青色渐变 bg-cyan-top bg-cyan-bottom bg-cyan-left bg-cyan-right
蓝色渐变 bg-blue-top bg-blue-bottom bg-blue-left bg-blue-right
紫色渐变 bg-purple-top bg-purple-bottom bg-purple-left bg-purple-right
黑色渐变 bg-black-top bg-black-bottom bg-black-left bg-black-right
灰色渐变 bg-gray-top bg-gray-bottom bg-gray-left bg-gray-right
白色渐变 bg-white-top bg-white-bottom bg-white-left bg-white-right

# 边框颜色

主色 描述 辅色 描述
border-theme 主题颜色 border-theme-help 辅助主题颜色
border-red 红色 border-red-help 辅助红色
border-orange 橙色 border-orange-help 辅助橙色
border-yellow 黄色 border-yellow-help 辅助黄色
border-green 绿色 border-green-help 辅助绿色
border-cyan 青色 border-cyan-help 辅助青色
border-blue 蓝色 border-blue-help 辅助蓝色
border-purple 紫色 border-purple-help 辅助紫色
border-black 黑色 border-black-help 辅助黑色
border-gray 灰色 border-gray-help 辅助灰色
border-white 白色 border-white-help 辅助白色

# 使用颜色示例

  • 背景颜色:bg-theme(主) / bg-theme-help(辅)
  • 文字颜色:color-theme(主) / color-theme-help(辅)
  • 渐变背景色:bg-theme-top(上辅下主) / bg-theme-bottom(上主下辅) / bg-theme-left(左辅右主) / bg-theme-right(左主右辅)
/* 主题色配置 */
$unify-color-theme:#FF7F00;//主题色
$unify-color-theme-help:#EECFA1;//辅助主题色
/* 字体颜色/背景颜色配置 */
$unify-color-red:#FF5432;//红色
$unify-color-red-help:#FFA07A;//辅助红色
$unify-color-orange:#FF7F00;//橙色
$unify-color-orange-help:#EECFA1;//辅助橙色
$unify-color-yellow:#FABC43;//黄色
$unify-color-yellow-help:#FFFFE0;//辅助黄色
$unify-color-green:#44BB56;//绿色
$unify-color-green-help:#CCFFCC;//辅助绿色
$unify-color-cyan:#23DDF8;//青色
$unify-color-cyan-help:#E0FFFF;//辅助青色
$unify-color-blue:#3A86FB;//蓝色
$unify-color-blue-help:#B0E2FF;//辅助蓝色
$unify-color-purple:#8D2BFA;//紫色
$unify-color-purple-help:#EED2EE;//辅助紫色
$unify-color-black:#000000;//黑色
$unify-color-black-help:#333333;//辅助黑色
$unify-color-gray:#666666;//灰色
$unify-color-gray-help:#999999;//辅助灰色
$unify-color-white:#FFFFFF;//白色
$unify-color-white-help:#F1F1F1;//辅助白色
/* 文字颜色 */
$unify-color-main:#333333; //一级文字/正文/主标题
$unify-color-often:#666666;//二级文字/副标/常规内容
$unify-color-help:#999999;//三级文字/补充描述/辅助内容
$unify-color-fill:#CDCDCD;//四级文字/占位内容
/* 其他颜色配置 */
$unify-color-page:#F8F8F8; //vue页面背景色/nvue页面背色在pages.json页面globalStyle》backgroundColor
$unify-color-divider:#F1F1F1;//分割线颜色
$unify-color-hover:#F1F1F1;//点击状态颜色