Skip to content

初始化配置

SinleUI 支持在框架载入时进行初始化配置,您可利用此功能快速设置应用配置。

如下,在自己项目下 main.uts 文件写入:

typescript
import App from './App.uvue'
import { createSSRApp } from 'vue'
import { $snui, SnColorBase } from './uni_modules/sinle-ui'

export function createApp() {
	const app = createSSRApp(App)
	
	// 在这里配置 SinleUI 初始化配置,在应用的任意位置都可以通过相同的方法设置或获取配置
 	// 更多配置方法见文档:API - 配置 - 全局配置
  
 	// 设置全局字体
	$snui.configs.font.mainFamily = 'alipuhuiheavy'
 	// 设置全局基础字体大小
	$snui.configs.font.baseSize = '25px'
 	// 设置全局基础圆角大小
	$snui.configs.radius.baseSize = '26px'
	// 设置全局配色方案,可直接复制 /uni_modules/sinle-ui/libs/theme/theme.uts 的两个对象,然后修改
	let colorslight = {
		transparent: "rgba(255,255,255,0)",
		page: "#f9f9f9",
		front: "#fff",
		dark: "#000",
		disabled: "#eeeef1",
		disabledText: "#cccccc",
		disabledDark: "#e3e3e8",
		disabledDarkText: "#bdbdbd",
		line: "#f1f1f2",
		lineDark: "#e7e7e9",
		lineText: "#cacacb",
		title: "#191919",
		text: "#ff0000",
		textLight: "#999999",
		info: "#f7f7f8",
		infoActive: "#efeff1",
		infoText: "#000",
		infoLight: "#fafafa",
		infoLightActive: "#f0f0f1",
		infoLightText: "#f7f7f8",
		infoDark: "#d6d6db",
		infoDarkActive: "#e9e9ec",
		infoDarkText: "#000",
		primary: "#b300ff",
		primaryActive: "#b9d2ff",
		primaryText: "#fff",
		primaryLight: "#e4effd",
		primaryLightActive: "#dde8f5",
		primaryLightText: "#4d82ff",
		primaryDark: "#3662d9",
		primaryDarkActive: "#4d82ff",
		primaryDarkText: "#fff",
		success: "#39c478",
		successActive: "#5cd18d",
		successText: "#fff",
		successLight: "#c6f1d5",
		successLightActive: "#c0eacf",
		successLightText: "#39c478",
		successDark: "#269e60",
		successDarkActive: "#39c478",
		successDarkText: "#fff",
		error: "#fc5454",
		errorActive: "#ff7f7a",
		errorText: "#fff",
		errorLight: "#ffdcd8",
		errorLightActive: "#f7d5d2",
		errorLightText: "#fc5454",
		errorDark: "#d63c41",
		errorDarkActive: "#fc5454",
		errorDarkText: "#fff",
		warning: "#f6b142",
		warningActive: "#ffcb6b",
		warningText: "#000",
		warningLight: "#fff1cd",
		warningLightActive: "#f7eac7",
		warningLightText: "#f6b142",
		warningDark: "#cf8b2d",
		warningDarkActive: "#f6b142",
		warningDarkText: "#000",
		toast: "#4c4c4c"
	} as SnColorBase
	
 	let colorsdark = {
		transparent: "rgba(0,0,0,0)",
		page: "#000",
		front: "#181a1b",
		dark: "#fff",
		disabled: "#161617",
		disabledText: "#313135",
		disabledDark: "#1f1f23",
		disabledDarkText: "#333338",
		line: "#333333",
		lineDark: "#262626",
		lineText: "#5c5d61",
		title: "#fff",
		text: "#0077ff",
		textLight: "#d9d9d9",
		info: "#28292a",
		infoActive: "#323334",
		infoText: "#fff",
		infoLight: "#393b3c",
		infoLightActive: "#464749",
		infoLightText: "#fff",
		infoDark: "#141415",
		infoDarkActive: "#1e1f1f",
		infoDarkText: "#fff",
		primary: "#00ff00",
		primaryActive: "#73a2ff",
		primaryText: "#fff",
		primaryLight: "#09293f",
		primaryLightActive: "#0e4162",
		primaryLightText: "#4d82ff",
		primaryDark: "#3662d9",
		primaryDarkActive: "#4d82ff",
		primaryDarkText: "#fff",
		success: "#39c478",
		successActive: "#5cd18d",
		successText: "#fff",
		successLight: "#174828",
		successLightActive: "#21693a",
		successLightText: "#39c478",
		successDark: "#269e60",
		successDarkActive: "#39c478",
		successDarkText: "#fff",
		error: "#fc5454",
		errorActive: "#ff7f7a",
		errorText: "#fff",
		errorLight: "#4e2723",
		errorLightActive: "#6a352f",
		errorLightText: "#fc5454",
		errorDark: "#d63c41",
		errorDarkActive: "#fc5454",
		errorDarkText: "#fff",
		warning: "#f6b142",
		warningActive: "#ffcb6b",
		warningText: "#000",
		warningLight: "#776126",
		warningLightActive: "#977c30",
		warningLightText: "#f6b142",
		warningDark: "#cf8b2d",
		warningDarkActive: "#f6b142",
		warningDarkText: "#000",
		toast: "#4c4c4c"
	} as SnColorBase
  
	$snui.setColorSet('light', colorslight)
	$snui.setColorSet('dark', colorsdark)
  
 	// 修改某一颜色值
	$snui.setColor('light', 'primary', '#ff0000')
	$snui.setColor('dark', 'primary', '#00ff00')
	
	return {
		app
	}
}

更多配置项见 全局配置

使用 MIT 协议