63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import { defineConfig, presetWind4, presetIcons } from 'unocss'
|
||
|
||
/**
|
||
* unocss 品牌色 —— 取 main.css 中的 CSS 变量（随亮暗主题自动切换）
|
||
* 这样：<div class="bg-brand-primary text-brand-text-1 border-brand-border"> 即与主题联动
|
||
*
|
||
* 注意：uno.config 在 build 时解析；theme.colors 必须是具体字符串，
|
||
* 因此我们把颜色指向 CSS 变量的 `var(...)` 形式——浏览器渲染时会取到对应主题的值。
|
||
*/
|
||
export default defineConfig({
|
||
presets: [
|
||
presetWind4({
|
||
darkMode: 'class', // html.dark → 与 naive-ui darkTheme 同 class
|
||
}),
|
||
presetIcons({ scale: 1.2, warn: true }),
|
||
],
|
||
/**
|
||
* 图标安全清单：CellToolbar 等处的对齐/垂直对齐图标用 `` `i-carbon-xxx-${v}` `` 模板字面量
|
||
* 在运行期拼接，UnoCSS 的静态扫描看不到完整类名，故必须显式列入 safelist 才会生成图标 CSS，
|
||
* 否则对应按钮图标空白（看不见）。这里集中登记所有「动态拼接」的 carbon 图标。
|
||
*/
|
||
safelist: [
|
||
'i-carbon-text-align-left',
|
||
'i-carbon-text-align-center',
|
||
'i-carbon-text-align-right',
|
||
'i-carbon-align-vertical-top',
|
||
'i-carbon-align-vertical-center',
|
||
'i-carbon-align-vertical-bottom',
|
||
'i-carbon-text-color',
|
||
'i-carbon-paint-brush',
|
||
'i-carbon-color-palette',
|
||
'i-carbon-clean',
|
||
'i-carbon-close',
|
||
],
|
||
theme: {
|
||
colors: {
|
||
brand: {
|
||
primary: 'var(--brand-primary)',
|
||
'primary-hover': 'var(--brand-primary-hover)',
|
||
'primary-pressed': 'var(--brand-primary-pressed)',
|
||
dark: 'var(--brand-nav-bg)',
|
||
bg: 'var(--brand-bg)',
|
||
surface: 'var(--brand-surface)',
|
||
border: 'var(--brand-border)',
|
||
'text-1': 'var(--brand-text-1)',
|
||
'text-2': 'var(--brand-text-2)',
|
||
'text-3': 'var(--brand-text-3)',
|
||
muted: 'var(--brand-text-muted)',
|
||
nav: {
|
||
DEFAULT: 'var(--brand-nav-bg)',
|
||
hover: 'var(--brand-nav-bg-hover)',
|
||
text: 'var(--brand-nav-text)',
|
||
'text-muted': 'var(--brand-nav-text-muted)',
|
||
'text-active': 'var(--brand-nav-text-active)',
|
||
icon: 'var(--brand-nav-icon)',
|
||
'icon-hover': 'var(--brand-nav-icon-hover)',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
variants: [],
|
||
})
|