uPlus

颜色与字体大小

页面颜色主题

对于基本的颜色值和字体大小，尽量都在@/uni.scss (opens new window) 定义好，目前的字体大小有三种，也可以自己定义
所用页面如果都是用定义好的字体，那么后期app的字体更换，将更加容易。

以改DOM为案例：

<view class="demo"></view>

# 字体大小

字体大小@/var.scss (opens new window) 通过 @/uni.scss (opens new window) 的变量动态编译成了三种字体大小
分别是 sm、base、lg,值分别对应24upx、28upx、32upx、

# 可以这么使用

var

.demo-sm {
  font-size: $uni-font-size-sm;
}
.demo-base {
  font-size: $uni-font-size-base;
}
.demo-lg {
  font-size: $uni-font-size-lg;
}

class

<view class="font-size-sm">SM</view>
<view class="font-size-base">BASE</view>
<view class="font-size-lg">LG</view>

# 颜色

  • 目前的样式值，通过scss的变量以及自定义方法backgroundRes生成的主题var格式和class格式。
  • 下面将逐一例举var以及class,统一前面是var,后面是 class;
  • 所有的颜色class有一个统一的写法,如果是背景的话，那么以 background-开头，字体以font-开头。
  • 具体的变量名称请仔细查看@/uni.scss (opens new window) 文件，文档就不展示该文件了。
  • 如有建议等等，都可以联系我QQ:2052021114

# 字体颜色

# 基本色 ：#222（该值为默认值，下面不再说明）

var

.demo {
  color: var(--base-color);
}

class

<view class="demo font-base-color"></view>

# 浅色（主要用于描述）：#7b7b7b 

.demo {
  color: var(--simple-color);
}

<view class="demo font-simple-color"></view>

# 反色 ：#fff 

.demo {
  color: var(--inverse-color);
}

<view class="demo font-inverse-color"></view>

# 表单placeholder ：#808080 

.demo {
  color: var(--placeholder-color);
}

<view class="demo font-placeholder-color"></view>

# 下面的字体颜色值 为行为颜色，同时行为颜色也能作为背景颜色值。

# 禁用颜色值 ：#c0c0c0 

.demo {
  color: var(--disable-color);
}

<view class="demo font-disable-color"></view>

# 主要（行为） ：#115d37 

.demo {
  color: var(--color-primary);
}

<view class="demo font-color-primary"></view>

# 警告 ：#feae57 

.demo {
  color: var(--color-warning);
}

<view class="demo font-color-warning"></view>

# 成功 ：#3bb86b 

.demo {
  color: var(--color-success);
}

<view class="demo font-color-success"></view>

# 危险 ：#d94b46 

.demo {
  color: var(--color-danger);
}

<view class="demo font-color-danger"></view>

# 背景颜色

# body html 背景颜色（pc端打开时） ：#222 

.demo {
  background: var(--body-color);
}

<view class="demo background-body-color"></view>

# app背景 相当于小程序page ：#f5f5f5 

.demo {
  background: var(--app-color);
}

<view class="demo background-app-color"></view>

# 主题背景颜色 默认颜色(主要用于盒子背景) ：#fff 

.demo {
  background: var(--theme-color);
}

<view class="demo background-theme-color"></view>

# 禁用颜色值 ：#c0c0c0 

.demo {
  background: var(--disable-color);
}

<view class="demo background-disable-color"></view>

# 行为相关的背景颜色

# 主要（行为） ：#115d37 

.demo {
  background: var(--color-primary);
}

<view class="demo background-color-primary"></view>

# 警告 ：#feae57 

.demo {
  background: var(--color-warning);
}

<view class="demo background-color-warning"></view>

# 成功 ：#3bb86b 

.demo {
  background: var(--color-success);
}

<view class="demo background-color-success"></view>

# 危险 ：#d94b46 

.demo {
  background: var(--color-danger);
}

<view class="demo background-color-danger"></view>

# 总结

# 字体大小

$uni-font-size-sm
$uni-font-size-base
$uni-font-size-lg

<view class="font-size-sm"></view>
<view class="font-size-base"></view>
<view class="font-size-lg"></view>

# 字体颜色

.demo {
  color: var(--base-color);
  color: var(--simple-color);
  color: var(--inverse-color);
  color: var(--placeholder-color);
  color: var(--disable-color);
  color: var(--color-primary);
  color: var(--color-warning);
  color: var(--color-success);
  color: var(--color-danger);
}


<view class="demo font-base-color"></view>
<view class="demo font-simple-color"></view>
<view class="demo font-inverse-color"></view>
<view class="demo font-placeholder-color"></view>
<view class="demo font-disable-color"></view>
<view class="demo font-color-primary"></view>
<view class="demo font-color-warning"></view>
<view class="demo font-color-success"></view>
<view class="demo font-color-danger"></view>

# 背景颜色

.demo {
  background: var(--body-color);
  background: var(--app-color);
  background: var(--theme-color);
  background: var(--disable-color);
  background: var(--color-primary);
  background: var(--color-warning);
  background: var(--color-success);
  background: var(--color-danger);
}


<view class="demo background-body-color"></view>
<view class="demo background-app-color"></view>
<view class="demo background-theme-color"></view>
<view class="demo background-disable-color"></view>
<view class="demo background-color-primary"></view>
<view class="demo background-color-warning"></view>
<view class="demo background-color-success"></view>
<view class="demo background-color-danger"></view>

水平与垂直边距