🌏 Translated with the assistance of DeepSeek and ChatGPT

Pixel Size

The size of pixel points is controlled by the global CSS variable --px-bit, with a default of 4px. Currently, only 2px and 4px are supported; other sizes have not been fully tested yet.

setPixelSize

You can modify the pixel size through the exported setPixelSize function anywhere, whether in the entry file or business code.

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

setThemeColor(2) // 2px

You can try it here:

<template>
	<px-space>
		<px-button @click="set()">Set Pixel Size to 2px</px-button>
		<px-button @click="reset()" theme="info">Reset</px-button>
	</px-space>
</template>
<script setup lang="ts">
import { setPixelSize, resetPixelSize } from '@pixelium/web-vue'

const set = () => {
	setPixelSize(2)
}
const reset = () => {
	resetPixelSize()
}
</script>