unocss theme 配置

uno.config

• 安装 presetTheme
• 默认主题颜色配置

theme: {
	colors: {
		primary: 'gray',
		bg: '#ffffff',
		'primary-border': '#1677ff',
		text: 'blue',
		container: 'gray',
		border: '#d9d9d9'
		},
	spacing: {
		xss: '4px',
		xs: '8px',
		sm: '12px',
		base: '16px',
		lg: '24px',
		xl: '32px'
	}
}

• 预设主题

presets: [
		presetUno(),
		presetTheme({
			theme: {
				dark: {
					colors: {
						primary: '#1668dc',
						'primary-border': '#1668dc',
						border: '#424242',
						container: 'black',
						text: 'white'
					}
				},
				pink: {
					colors: {
						primary: 'pink',
						'primary-border': 'pink',
						border: '#424242',
						container: 'pink',
						text: 'red'
					},
					spacing: {
						xss: '2px',
						xs: '4px',
						sm: '6px',
						base: '8px',
						lg: '12px',
						xl: '16px'
					}
				},
			}
		})
	]

• 切换的地方

document.documentElement.className = 'pink' // 自定义主题名字