---
url: /guide/customizer.md
---
# 主题定制器

下面的控件修改的是**整个文档站的真实主题**，调整即时生效——切主色后注意观察按钮、链接、选中态与侧栏高亮。

## 风格方案

## 主色与色系

## 形状与节奏

## 实时预览

## 在你的站点里使用

```vue
<script setup>
import { EvConfigProvider } from '@wil-works/evoke-ui'
</script>

<template>
  <!-- 全局生效：主色 + 圆润档 + 宽松间距 + 宽容器 -->
  <EvConfigProvider
    primary="#7C5CFC"
    radius="round"
    space="loose"
    container="wide"
  >
    <SiteHome />
  </EvConfigProvider>
</template>
```

或者用组合式 API 在任意位置动态切换（如「设置」面板）：

```js
import { useThemeConfig } from '@wil-works/evoke-ui'

const { setPrimary, setRadius, setSpace, setContainer, applyPreset, reset } = useThemeConfig()
setPrimary('#0FA968')      // 淡色阶自动生成
setRadius('round')
setSemantic({ success: '#3E8E6B', warning: '#DFA32E', danger: '#D0492C', info: '#2F5D9E' })
                           // 语义色整套联动（配合色系预设 EV_PALETTE_PRESETS）
applyPreset('corporate')   // 一键套用「企业官网」风格方案
reset()                    // 恢复默认
```

`global: false` 时写入包裹元素而非 `:root`，可做**局部换肤**（如页面内一个演示区独立主题）。