主题定制器

整库的颜色 / 圆角 / 间距 / 容器宽全部由 --ew-* 令牌驱动，可在运行时调整并即时生效。下面的控件修改的是整个文档站的真实主题——切主色后注意观察按钮、链接、选中态与侧栏高亮。

风格方案

按站点类型一键定制

每套方案是一整套主色/圆角/间距/容器宽的组合，点击即刻套用到整个文档站 —— 再用下面的单项微调。

主色与色系

色系 × 主色 × 语义色

先挑一个气质相近的色系，再点色卡换主色 —— success / warning / danger / info 整套语义色随色系联动；淡色阶由主色自动生成，暗色模式自动换档。

Launch 系高辨识度主色，SaaS 与工具站的稳妥选择

形状与节奏

圆角 / 间距 / 容器宽

三种档位直接改写对应的 --ew-* 令牌组，页面所有组件即时跟随。

圆角

间距

容器宽

暗色当前 Light

当前主色默认 #0D70FF

实时预览

同一套令牌驱动的一切

不同作用用不同的语义色：操作用主色、成功/警告/危险/信息各就其位 —— 切换上方色系后整排联动。

主色成功警告危险信息

发布成功内容已同步到线上。

名额有限早鸟价将于本周日截止。

支付失败请更换支付方式后重试。

卡片标题

圆角、间距、主色与语义色跟随上方定制器。

在你的站点里使用

vue

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

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

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

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' })
                           // 语义色整套联动（配合色系预设 EW_PALETTE_PRESETS）
applyPreset('corporate')   // 一键套用「企业官网」风格方案
reset()                    // 恢复默认

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

主题定制器 ​

风格方案 ​

主色与色系 ​

形状与节奏 ​

实时预览 ​