主题

可能不难发现，组件库的主题颜色来源于全局的 CSS 变量。修改这些变量就可以完成主题色的定制。

setThemeColor

如下所示，你可以通过导出的 setThemeColor 函数来修改主题色。

import { setThemeColor } from '@pixelium/web-vue'
// If on-demand import
// import { setThemeColor } from '@pixelium/web-vue/es'

setThemeColor('primary', '#409EFF') // Blue

第一个参数为要调整的颜色组：'primary' | 'success' | 'warning' | 'danger' | 'sakura' | 'neutral'；
第二个参数为要设置的颜色，类型为 string | { light?: string[]; dark?: string[] }，传入字符串时，组件库将调用内部算法以传入颜色为基础，生成明暗模式下的各阶渐变颜色。你也可以传入自己定制的调色板，传入对象时，将会直接把传入的颜色赋值到全局 CSS 变量中。

可以在这里试一下：

<template>
	<px-space>
		<px-button @click="set()">Set Main Color to Blue</px-button>
		<px-button @click="reset()" theme="info">Reset</px-button>
	</px-space>
</template>
<script setup lang="ts">
import { setThemeColor } from '@pixelium/web-vue'

const set = () => {
	setThemeColor('primary', '#409EFF')
}
const reset = () => {
	setThemeColor('primary', '#00A891')
}
</script>

主题 ​

setThemeColor ​

主题

setThemeColor