自定义主题

介绍

在需要更改主题样式时，可通过调用 TnUISetUIBaseStyle 方法设置样式。

更改主题

在项目的启动页面中，通过调用 TnUISetUIBaseStyle 方法设置主题。

WARNING

若项目使用了 setGlobalConfig 方法，请确保在该方法之后调用 TnUISetUIBaseStyle。

import { TnUIInitializer } from "@tuniao/tn-ui";
import { 
  TnUISetUIBaseStyle, 
  CustomColorWrapper, 
  ResourceColorWrapper 
} from "@tuniao/tn-ui/theme-chalk";

onWindowStageCreate(windowStage: window.WindowStage): void {
  // 初始化组件库
  TnUIInitializer.initTnUI(windowStage, this.context);

  // 自定义主题色
  TnUISetUIBaseStyle({
    primary: new CustomColorWrapper("#7232dd"),
    warning: new ResourceColorWrapper("indigo"), // 支持内置颜色资源
  });
}

TnUIBaseStyleType 类型说明

TIP

• 该类型即为 TnUISetUIBaseStyle 方法的参数类型，均为非必填，传入值会覆盖默认值
• 默认单位为 vp，当全局单位为 lpx 时，数值会依据 designWidth 和当前设备屏幕宽度自动计算转化

主题颜色

参数	说明	类型	默认值
primary	primary 主色	ResourceColorWrapper	蓝色 #01beff
success	success 反馈色	ResourceColorWrapper	绿色 #00d886
warning	warning 反馈色	ResourceColorWrapper	橙色 #fbbd12
danger	danger 反馈色	ResourceColorWrapper	红色 #ff444f
error	error 反馈色	ResourceColorWrapper	红色 #ff444f
info	info 反馈色	ResourceColorWrapper	灰色 #9c9c9c

字体大小

参数	说明	类型	默认值
fontSizeXxs	极小字体	string	10
fontSizeXs	辅助字体	string	12
fontSizeSm	次要字体	string	13
fontSize	默认字体	string	14
fontSizeLg	标题字体	string	16
fontSizeXl	大标题	string	18
fontSizeXXl	超大标题	string	20
fontSizeXXXl	特大标题	string	26
fontSizeXXXXl	巨大标题	string	32

间距

参数	说明	类型	默认值
spaceMini	极小间距	string	2
spaceBase	基础间距	string	4
spaceXs	微小间距	string	5
spaceXsm	小间距	string	8
spaceSm	中小间距	string	10
spaceMd	中间距	string	12
space	默认间距	string	15
spaceMlg	中大间距	string	16
spaceLg	大间距	string	20
spaceXl	超大间距	string	25

圆角

参数	说明	类型	默认值
borderRadiusSm	微小圆角	string	2
borderRadius	默认圆角	string	4
borderRadiusLg	中圆角	string	8
borderRadiusXl	大圆角	string	10
borderRadiusXxl	弹窗圆角	string	12
borderRadiusMax	胶囊形	string	9999

行高

参数	说明	类型	默认值
lineHeightXs	极小行高	string	14
lineHeightXsm	小行高	string	16
lineHeightSm	默认行高	string	18
lineHeightMd	中行高	string	20
lineHeightLg	大行高	string	22

阴影

参数	说明	类型	默认值
shadowSm	微小阴影	ShadowLevelConfig	{ radius: 4, offsetX: 0, offsetY: 2 }
shadowDefault	默认阴影	ShadowLevelConfig	{ radius: 8, offsetX: 0, offsetY: 4 }
shadowMd	中阴影	ShadowLevelConfig	{ radius: 16, offsetX: 0, offsetY: 8 }
shadowLg	大阴影	ShadowLevelConfig	{ radius: 24, offsetX: 0, offsetY: 12 }

动画

参数	说明	类型	默认值
animationDuration	动画时长，单位 ms	number	200