Theme

🌏 Translated with the assistance of DeepSeek and ChatGPT

As you may notice, the theme color of the component library originates from global CSS variables. Customizing the theme color can be achieved by modifying these variables.

setThemeColor

As shown below, at project initialization, you can call the exported setThemeColor function to customize the theme color.

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

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

• The first parameter is the color group to be adjusted: 'primary' | 'success' | 'warning' | 'danger' | 'sakura' | 'neutral';
• The second parameter is the color to be set, which can be of type string | { light?: string[]; dark?: string[] }. If a string is passed, the component library will use its internal algorithm to generate gradient palette colors for light and dark modes based on the provided color. Alternatively, you can pass in a custom color palette as an object. In this case, the provided colors will directly assign to the global CSS variables.

You can try it here:

<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>