token是组件库的设计变量，@ckpack/v-ui提供一套默认token，你可以通过设置token来快速的改变组件样式, 例如： 将主题颜色从紫色改为蓝色，

默认导入设置 token

import VUI from '@ckpack/v-ui';

const app = createApp(App);
app.use(VUI, {
  token: {
    color: {
      primary: 'blue',
    }
  }
});
app.mount('#app');

create 函数设置 token

import { create, themes } from '@ckpack/v-ui';

const app = createApp(App);

app.use(create({
  themes,
}), {
  token: {
    color: {
      primary: 'blue',
    }
  }
});
app.mount('#app');

config-provider 组件设置 token

<script setup lang="ts">
const token = {
  color: {
    primary: 'blue',
  }
};
</script>

<template>
  <v-config-provider
    :token="token"
  >
    <v-button theme="primary">
      Button
    </v-button>
  </v-config-provider>
</template>

TIP

@ckpack/v-ui组件内部使用token生成一系列CSS变量, 这意味着你也可以通过覆盖这些 CSS 变量达到修改主题色的目的。

:root {
  --v-color-primary-disabled: #cdb0ff;
  --v-color-primary-hover: #af87ff;
  --v-color-primary: #8b5cf6;
  --v-color-primary-active: #6842cf;
}