Global Theme Configuration

Style Import

uni.scssusage-example.scss

scss

/* This is a fully expanded import, which can be imported globally */
@use '@hy-app/ui/index.scss' as *;

scss

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

index.scss

scss

/* This is an aliased import, which needs to be imported in the current component */
@use '@hy-app/ui/index.scss' as hy;

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

Globally Modify Component Theme Styles

Basic Configuration

scss

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

Configuration when config-provider sets a theme

Note

When your components are wrapped by the hy-config-provider component in an outer common page, and the theme attribute is set to light or dark, you need to make the changes below

You can set the common colors for both light and dark themes through the following configuration

scss

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

Theme CSS Variables

Primary Color

Variable	CSS Variable	Default Value	Description
`$hy-primary`	`--hy-primary`	`#2979ff`	Primary color
`$hy-primary-dark`	`--hy-primary-dark`	`#2b85e4`	Primary dark
`$hy-primary-disabled`	`--hy-primary-disabled`	`#a0cfff`	Primary disabled
`$hy-primary-light`	`--hy-primary-light`	`#ecf5ff`	Primary light

Warning Color

Variable	CSS Variable	Default Value	Description
`$hy-warning`	`--hy-warning`	`#ff9900`	Warning color
`$hy-warning-dark`	`--hy-warning-dark`	`#f29100`	Warning dark
`$hy-warning-disabled`	`--hy-warning-disabled`	`#fcbd71`	Warning disabled
`$hy-warning-light`	`--hy-warning-light`	`#fdf6ec`	Warning light

Success Color

Variable	CSS Variable	Default Value	Description
`$hy-success`	`--hy-success`	`#19be6b`	Success color
`$hy-success-dark`	`--hy-success-dark`	`#18b566`	Success dark
`$hy-success-disabled`	`--hy-success-disabled`	`#71d5a1`	Success disabled
`$hy-success-light`	`--hy-success-light`	`#dbf1e1`	Success light

Error Color

Variable	CSS Variable	Default Value	Description
`$hy-error`	`--hy-error`	`#fa3534`	Error color
`$hy-error-dark`	`--hy-error-dark`	`#dd6161`	Error dark
`$hy-error-disabled`	`--hy-error-disabled`	`#fab6b6`	Error disabled
`$hy-error-light`	`--hy-error-light`	`#fef0f0`	Error light

Info Color

Variable	CSS Variable	Default Value	Description
`$hy-info`	`--hy-info`	`#909399`	Info color
`$hy-info-dark`	`--hy-info-dark`	`#82848a`	Info dark
`$hy-info-disabled`	`--hy-info-disabled`	`#c8c9cc`	Info disabled
`$hy-info-light`	`--hy-info-light`	`#f4f4f5`	Info light

Text Color

Variable	CSS Variable	Default Value	Description
`$hy-text-color`	`--hy-text-color`	`#3c3c43`	Basic text
`$hy-text-color--2`	`--hy-text-color--2`	`#67676c`	Secondary text/hint
`$hy-text-color--3`	`--hy-text-color--3`	`#929295`	Light hint
`$hy-text-color--4`	`--hy-text-color--4`	`rgba(0, 0, 0, 0.1)`	Extra light
`$hy-text-color--grey`	`--hy-text-color--grey`	`#999`	Auxiliary gray
`$hy-text-color--placeholder`	`--hy-text-color--placeholder`	`#808080`	Placeholder
`$hy-text-color--disabled`	`--hy-text-color--disabled`	`#c0c0c0`	Disabled state
`$hy-text-color-hover`	`--hy-text-color-hover`	`#58595b`	Hover state

Variable	CSS Variable	Default Value	Description
`$hy-font-size-xs`	`--hy-font-size-xs`	`20rpx`	Extra small font
`$hy-font-size-sm`	`--hy-font-size-sm`	`24rpx`	Small font
`$hy-font-size-base`	`--hy-font-size-base`	`28rpx`	Base font
`$hy-font-size-md`	`--hy-font-size-md`	`32rpx`	Medium font
`$hy-font-size-lg`	`--hy-font-size-lg`	`36rpx`	Large font
`$hy-font-size-xl`	`--hy-font-size-xl`	`40rpx`	Extra large font
`$hy-font-size-xxl`	`--hy-font-size-xxl`	`48rpx`	Extra extra large font

Font Style

Variable	CSS Variable	Default Value	Description
`$hy-font-weight-normal`	`--hy-font-weight-normal`	`400`	Normal weight
`$hy-font-weight-medium`	`--hy-font-weight-medium`	`500`	Medium weight
`$hy-font-weight-bold`	`--hy-font-weight-bold`	`600`	Bold

Line Height

Variable	CSS Variable	Default Value	Description
`$hy-line-height-sm`	`--hy-line-height-sm`	`1.4`	Small line height
`$hy-line-height-base`	`--hy-line-height-base`	`1.5`	Base line height
`$hy-line-height-lg`	`--hy-line-height-lg`	`1.8`	Large line height

Icon Color

Variable	CSS Variable	Default Value	Description
`$hy-icon-color`	`--hy-icon-color`	`#606266`	Default icon

Background Color

Variable	CSS Variable	Default Value	Description
`$hy-background`	`--hy-background`	`#f8f8f8`	Page background
`$hy-background--2`	`--hy-background--2`	`#ffffff`	Card/popup background
`$hy-background--3`	`--hy-background--3`	`#646566`	Dark background
`$hy-background--container`	`--hy-background--container`	`#ffffff`	Container background
`$hy-background--disabled`	`--hy-background--disabled`	`#f5f5f5`	Disabled background
`$hy-background--track`	`--hy-background--track`	`#f6f6f6`	Track background
`$hy-background--empty`	`--hy-background--empty`	`#f3f3f3`	Empty state background
`$hy-background--skeleton`	`--hy-background--skeleton`	`#EEEEEE`	Skeleton background color
`$hy-background--hover`	`--hy-background--hover`	`rgba(0, 0, 0, 0.1)`	Pressed state background
`$hy-background-mask`	`--hy-background-mask`	`rgba(0, 0, 0, 0.5)`	Mask overlay
`$hy-background--active`	`--hy-background--active`	`#FFFFFF`	Selected background color
`$hy-background--close`	`--hy-background--close`	`#f0f0f0`	Close background color
`$hy-background--box`	`--hy-background--box`	`#FFFFFF`	Box background color
`$hy-background--line`	`--hy-background--line`	`rgba(0, 0, 0, 0.15)`	Thin line background color
`$hy-background--table-header`	`--hy-background--table-header`	`#FAFAFA`	Table header background color
`$hy-background-image--mask--two-flanks`	`--hy-background-image--mask--two-flanks`	-	Fades into a haze shape toward both sides

Image Size

Variable	CSS Variable	Default Value
`$hy-img-size-sm`	`--hy-img-size-sm`	`45rpx`
`$hy-img-size-base`	`--hy-img-size-base`	`80rpx`
`$hy-img-size-lg`	`--hy-img-size-lg`	`120rpx`

Avatar Size

Variable	CSS Variable	Default Value
`$hy-avatar-size-sm`	`--hy-avatar-size-sm`	`80rpx`
`$hy-avatar-size-base`	`--hy-avatar-size-base`	`100rpx`
`$hy-avatar-size-lg`	`--hy-avatar-size-lg`	`120rpx`

Opacity

Variable	CSS Variable	Default Value	Description
`$hy-opacity-disabled`	`--hy-opacity-disabled`	`0.3`	Disabled state opacity

Border Radius

Variable	CSS Variable	Default Value	Description
`$hy-radius-no`	`--hy-radius-no`	`0`	No radius
`$hy-radius-sm`	`--hy-radius-sm`	`8rpx`	Small radius
`$hy-radius-base`	`--hy-radius-base`	`20rpx`	Default radius
`$hy-radius-lg`	`--hy-radius-lg`	`32rpx`	Large radius
`$hy-radius-circle`	`--hy-radius-circle`	`50%`	Circle
`$hy-radius-semicircle`	`--hy-radius-semicircle`	`100px`	Semicircle

Spacing

Variable	CSS Variable	Default Value	Description
`$hy-border-margin-padding-sm`	`--hy-border-margin-padding-sm`	`10rpx`	Small spacing
`$hy-border-margin-padding-base`	`--hy-border-margin-padding-base`	`20rpx`	Default spacing
`$hy-border-margin-padding-lg`	`--hy-border-margin-padding-lg`	`30rpx`	Large spacing
`$hy-border-margin-padding-xl`	`--hy-border-margin-padding-xl`	`48rpx`	Extra large spacing
`$hy-border-margin-padding-xxl`	`--hy-border-margin-padding-xxl`	`64rpx`	Extra extra large spacing

Border

Variable	CSS Variable	Default Value	Description
`$hy-border-line`	`--hy-border-line`	`1px solid #e8e8e8`	Border

Border Color

Variable	CSS Variable	Default Value	Description
`$hy-border-color`	`--hy-border-color`	`#c2c2c4`	Default border
`$hy-border-color-light`	`--hy-border-color-light`	`#c8c7cc`	Light border
`$hy-border-color--2`	`--hy-border-color--2`	`#c9cacc`	Secondary border color

Border Width

Variable	CSS Variable	Default Value	Description
`$hy-border-width-xs`	`--hy-border-width-xs`	`1rpx`	Extra thin border
`$hy-border-width-sm`	`--hy-border-width-sm`	`2rpx`	Thin border
`$hy-border-width-base`	`--hy-border-width-base`	`4rpx`	Base border
`$hy-border-width-lg`	`--hy-border-width-lg`	`8rpx`	Thick border

Shadow Levels

Variable	CSS Variable	Default Value	Description
`$hy-box-shadow`	`--hy-box-shadow`	`0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)`	Default shadow
`$hy-shadow-sm`	`--hy-shadow-sm`	`0 2rpx 8rpx rgba(0, 0, 0, 0.06)`	Light shadow
`$hy-shadow-base`	`--hy-shadow-base`	`0 4rpx 16rpx rgba(0, 0, 0, 0.08)`	Base shadow
`$hy-shadow-lg`	`--hy-shadow-lg`	`0 8rpx 24rpx rgba(0, 0, 0, 0.12)`	Strong shadow
`$hy-shadow-xl`	`--hy-shadow-xl`	`0 12rpx 40rpx rgba(0, 0, 0, 0.16)`	Extra strong shadow

Opacity

Variable	CSS Variable	Default Value	Description
`$hy-opacity-xs`	`--hy-opacity-xs`	`0.1`	Very low opacity
`$hy-opacity-sm`	`--hy-opacity-sm`	`0.3`	Low opacity
`$hy-opacity-base`	`--hy-opacity-base`	`0.5`	Medium opacity
`$hy-opacity-lg`	`--hy-opacity-lg`	`0.7`	High opacity
`$hy-opacity-disabled`	`--hy-opacity-disabled`	`0.4`	Disabled state opacity

Transition Curves

Variable	CSS Variable	Default Value	Description
`$hy-transition-ease`	`--hy-transition-ease`	`cubic-bezier(0.4, 0, 0.2, 1)`	Standard curve
`$hy-transition-bounce`	`--hy-transition-bounce`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Bounce curve

Global Theme Configuration ​

Style Import ​

Globally Modify Component Theme Styles ​

Basic Configuration ​

Configuration when config-provider sets a theme ​

Theme CSS Variables ​

Primary Color ​

Warning Color ​

Success Color ​

Error Color ​

Info Color ​

Text Color ​

Font Size ​

Font Style ​

Line Height ​

Icon Color ​

Background Color ​

Image Size ​

Avatar Size ​

Opacity ​

Border Radius ​

Spacing ​

Border ​

Border Color ​

Border Width ​

Shadow Levels ​

Opacity ​

Transition Curves ​

Global Theme Configuration

Style Import

Globally Modify Component Theme Styles

Basic Configuration

Configuration when config-provider sets a theme

Theme CSS Variables

Primary Color

Warning Color

Success Color

Error Color

Info Color

Text Color

Font Size

Font Style

Line Height

Icon Color

Background Color

Image Size

Avatar Size

Opacity

Border Radius

Spacing

Border

Border Color

Border Width

Shadow Levels

Opacity

Transition Curves