华玥组件库

中文

English

中文

English

Appearance

全局配置主题 ​

样式引入 ​

scss
/* 这是全部展开引入,可以在全局引入 */
@use "hy-app/index.scss" as *;
scss
.custom-style {
  background: $hy-background;
  color: $hy-text-color;
}
scss
/* 这是别名引入，需要在当下组件引入 */
@use "hy-app/index.scss" as hy;

.custom-style {
  background: hy.$hy-background;
  color: hy.$hy-text-color;
}

全局修改组件主题样式 ​

基础配置 ​

scss
/* uni.scss */
page {
  --hy-text-color: #000000;
  --hy-theme-color: red;
  --hy-background: #f6f6f6;
  ...
}

config-provider设置theme时配置 ​

注意

当你的组件在公共页面外层包含了hy-config-provider这个组件，然后theme属性设置了light或者dark值，你就需要按照下面的做更改

通过如下设置可以设置暗色和亮色两种主题下的公共颜色

scss
/* 亮色 uni.scss */
page .hy-theme--light {
  --hy-text-color: #000000;
  --hy-background: #f8f8f8;
}
/* 暗色 uni.scss */
page .hy-theme--dark {
  --hy-text-color: #ffffff;
  --hy-background: #1b1b1f;
}

主题CSS变量 ​

主色调 ​

使用变量CSS 变量默认值说明
$hy-primary--hy-primary#2979ff主色
$hy-primary-dark--hy-primary-dark#2b85e4主色深色
$hy-primary-disabled--hy-primary-disabled#a0cfff主色禁用
$hy-primary-light--hy-primary-light#ecf5ff主色浅色

警告色 ​

使用变量CSS 变量默认值说明
$hy-warning--hy-warning#ff9900警告色
$hy-warning-dark--hy-warning-dark#f29100警告色深色
$hy-warning-disabled--hy-warning-disabled#fcbd71警告色禁用
$hy-warning-light--hy-warning-light#fdf6ec警告色浅色

成功色 ​

使用变量CSS 变量默认值说明
$hy-success--hy-success#19be6b成功色
$hy-success-dark--hy-success-dark#18b566成功色深色
$hy-success-disabled--hy-success-disabled#71d5a1成功色禁用
$hy-success-light--hy-success-light#dbf1e1成功色浅色

错误色 ​

使用变量CSS 变量默认值说明
$hy-error--hy-error#fa3534错误色
$hy-error-dark--hy-error-dark#dd6161错误色深色
$hy-error-disabled--hy-error-disabled#fab6b6错误色禁用
$hy-error-light--hy-error-light#fef0f0错误色浅色

信息色 ​

使用变量CSS 变量默认值说明
$hy-info--hy-info#909399信息色
$hy-info-dark--hy-info-dark#82848a信息色深色
$hy-info-disabled--hy-info-disabled#c8c9cc信息色禁用
$hy-info-light--hy-info-light#f4f4f5信息色浅色

文字颜色 ​

使用变量CSS 变量默认值说明
$hy-text-color--hy-text-color#3c3c43基础文字
$hy-text-color--2--hy-text-color--2#67676c次要文字/提示
$hy-text-color--3--hy-text-color--3#929295浅色提示
$hy-text-color--4--hy-text-color--4rgba(0, 0, 0, 0.1)极浅色
$hy-text-color--grey--hy-text-color--grey#999辅助灰色
$hy-text-color--placeholder--hy-text-color--placeholder#808080占位符
$hy-text-color--disabled--hy-text-color--disabled#c0c0c0禁用状态
$hy-text-color-hover--hy-text-color-hover#58595b悬停状态

字体大小 ​

使用变量CSS 变量默认值说明
$hy-font-size-xs--hy-font-size-xs20rpx超小字体
$hy-font-size-sm--hy-font-size-sm24rpx小号字体
$hy-font-size-base--hy-font-size-base28rpx基础字体
$hy-font-size-md--hy-font-size-md32rpx中等字体
$hy-font-size-lg--hy-font-size-lg36rpx大号字体
$hy-font-size-xl--hy-font-size-xl40rpx超大字体
$hy-font-size-xxl--hy-font-size-xxl48rpx特大字体

字体样式 ​

使用变量CSS 变量默认值说明
$hy-font-weight-normal--hy-font-weight-normal400正常字重
$hy-font-weight-medium--hy-font-weight-medium500中等字重
$hy-font-weight-bold--hy-font-weight-bold600粗体

行高 ​

使用变量CSS 变量默认值说明
$hy-line-height-sm--hy-line-height-sm1.4小行高
$hy-line-height-base--hy-line-height-base1.5基础行高
$hy-line-height-lg--hy-line-height-lg1.8大行高

图标颜色 ​

使用变量CSS 变量默认值说明
$hy-icon-color--hy-icon-color#606266默认图标

背景颜色 ​

使用变量CSS 变量默认值说明
$hy-background--hy-background#f8f8f8页面背景
$hy-background--2--hy-background--2#ffffff卡片/弹窗背景
$hy-background--3--hy-background--3#646566深色背景
$hy-background--container--hy-background--container#ffffff容器背景
$hy-background--disabled--hy-background--disabled#f5f5f5禁用背景
$hy-background--track--hy-background--track#f6f6f6轨道背景
$hy-background--empty--hy-background--empty#f3f3f3空状态背景
$hy-background--skeleton--hy-background--skeleton#EEEEEE骨架屏背景色
$hy-background--hover--hy-background--hoverrgba(0, 0, 0, 0.1)点击状态背景
$hy-background-mask--hy-background-maskrgba(0, 0, 0, 0.5)遮罩
$hy-background--active--hy-background--active#FFFFFF选中背景色
$hy-background--close--hy-background--close#f0f0f0关闭背景色
$hy-background--box--hy-background--box#FFFFFF盒子背景色
$hy-background--line--hy-background--linergba(0, 0, 0, 0.15)细线背景色
$hy-background--table-header--hy-background--table-header#FAFAFA表头背景色
$hy-background-image--mask--two-flanks--hy-background-image--mask--two-flanks-向两边形成雾霾形状

图片尺寸 ​

使用变量CSS 变量默认值
$hy-img-size-sm--hy-img-size-sm45rpx
$hy-img-size-base--hy-img-size-base80rpx
$hy-img-size-lg--hy-img-size-lg120rpx

头像尺寸 ​

使用变量CSS 变量默认值
$hy-avatar-size-sm--hy-avatar-size-sm80rpx
$hy-avatar-size-base--hy-avatar-size-base100rpx
$hy-avatar-size-lg--hy-avatar-size-lg120rpx

透明度 ​

使用变量CSS 变量默认值说明
$hy-opacity-disabled--hy-opacity-disabled0.3禁用态透明度

圆角 ​

使用变量CSS 变量默认值说明
$hy-border-radius-no--hy-border-radius-no0无圆角
$hy-border-radius-sm--hy-border-radius-sm8rpx小圆角
$hy-border-radius-base--hy-border-radius-base20rpx默认圆角
$hy-border-radius-lg--hy-border-radius-lg32rpx大圆角
$hy-border-radius-circle--hy-border-radius-circle50%圆形
$hy-border-radius-semicircle--hy-border-radius-semicircle100px半圆

阴影 ​

使用变量CSS 变量默认值
$hy-box-shadow--hy-box-shadow0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)

间距 ​

使用变量CSS 变量默认值说明
$hy-border-margin-padding-sm--hy-border-margin-padding-sm10rpx小间距
$hy-border-margin-padding-base--hy-border-margin-padding-base20rpx默认间距
$hy-border-margin-padding-lg--hy-border-margin-padding-lg30rpx大间距
$hy-border-margin-padding-xl--hy-border-margin-padding-xl48rpx超大间距
$hy-border-margin-padding-xxl--hy-border-margin-padding-xxl64rpx特大间距

边框 ​

使用变量CSS 变量默认值说明
$hy-border-line--hy-border-line1px solid #e8e8e8边框

边框颜色 ​

使用变量CSS 变量默认值说明
$hy-border-color--hy-border-color#c2c2c4默认边框
$hy-border-color-light--hy-border-color-light#c8c7cc浅色边框
$hy-border-color--2--hy-border-color--2#c9cacc次边框色

边框宽度 ​

使用变量CSS 变量默认值说明
$hy-border-width-xs--hy-border-width-xs1rpx超细边框
$hy-border-width-sm--hy-border-width-sm2rpx细边框
$hy-border-width-base--hy-border-width-base4rpx基础边框
$hy-border-width-lg--hy-border-width-lg8rpx粗边框

阴影层级 ​

使用变量CSS 变量默认值说明
$hy-shadow-sm--hy-shadow-sm0 2rpx 8rpx rgba(0, 0, 0, 0.06)轻微阴影
$hy-shadow-base--hy-shadow-base0 4rpx 16rpx rgba(0, 0, 0, 0.08)基础阴影
$hy-shadow-lg--hy-shadow-lg0 8rpx 24rpx rgba(0, 0, 0, 0.12)强烈阴影
$hy-shadow-xl--hy-shadow-xl0 12rpx 40rpx rgba(0, 0, 0, 0.16)极强烈阴影

透明度 ​

使用变量CSS 变量默认值说明
$hy-opacity-xs--hy-opacity-xs0.1极低透明度
$hy-opacity-sm--hy-opacity-sm0.3低透明度
$hy-opacity-base--hy-opacity-base0.5中等透明度
$hy-opacity-lg--hy-opacity-lg0.7高透明度
$hy-opacity-disabled--hy-opacity-disabled0.4禁用态透明度

过渡曲线 ​

使用变量CSS 变量默认值说明
$hy-transition-ease--hy-transition-easecubic-bezier(0.4, 0, 0.2, 1)标准曲线
$hy-transition-bounce--hy-transition-bouncecubic-bezier(0.34, 1.56, 0.64, 1)弹跳曲线