Skip to content
On this page

背景

背景颜色

用于控制元素背景色的功能类。

使用前缀

为了防止和开发者项目中的其他原子化样式语法冲突,样式库默认添加了前缀 lwu,使用示例如下:

vue
<view class="lwu-flex"></view>

语法

TIP

  • 背景颜色已内置 暗黑模式 的支持
  • 在背景色class后面紧跟 dark 即可实现 暗黑模式,示例如下:
    html
    <view class="lwu-bg-primary dark"></view>
ClassProperties平台兼容性说明
H5、小程序、app-vue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Grey / 中性灰

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Red / 浪漫红

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Orangered / 晚秋红

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Orange / 活力橙

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Gold / 黄昏色

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Yellow / 柠檬黄

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Lime / 新生绿

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Green / 翡翠绿

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Cyan / 碧涛青

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Blue / 海空蓝

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Deepblue / 极致蓝

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Purple / 暗夜紫

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Pinkpurple / 青春紫

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

magenta / 品红色

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

功能色

使用场景

  • 0-白底悬浮
  • 1-文字禁用
  • 2-一般禁用
  • 3-特殊场景
  • 5-常规使用
  • 6-点击状态

Primary-品牌色

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Success-成功色

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Danger / 危险色

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Warning / 警告色

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue

Info / 信息色

ClassProperties平台兼容性说明
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue
H5、小程序、app-vue、app-nvue