入门 · 主题定制
下载

入门

Customizing 主题定制

只覆盖 CSS 变量即可换肤，无需重编译 SCSS。

三层扩展（详见 site-kit/pivcss/ITERATION.md）
  1. L1 pivcss.css — 改 --pvs-* 令牌
  2. L2 可选包 — animate / icons，按需追加 link
  3. L3 PivUI / 主题 — 成品块与 template 配方

换肤三步

  1. 在 :root 或站点入口 CSS 覆盖变量
  2. 暗色在 [data-pvs-theme="dark"] 再覆盖一层（见 暗黑模式）
  3. 组件与 layout 类名不变 — 下游只跟 semver + CHANGELOG.md

三套主题预设

仅覆盖 --pvs-primary 与 hover；组件类名不变。点击顶栏「明亮/暗黑」可看暗色令牌效果。

默认蓝 · PivArk

Badge

翡翠绿

Badge

品牌紫 + 圆角

圆角卡片
css
:root { --pvs-primary: #059669; --pvs-primary-hover: #047857; }
:root { --pvs-primary: #7c3aed; --pvs-radius-md: 0.5rem; }
:root { --pvs-primary: #059669; --pvs-primary-hover: #047857; }
:root { --pvs-primary: #7c3aed; --pvs-radius-md: 0.5rem; }

品牌色与圆角

圆角 md 
<div class="pvs-p-4 pvs-border pvs-stack pvs-gap-3" style="--pvs-primary:#7c3aed;--pvs-radius-md:0.5rem">
  <button type="button" class="pvs-btn pvs-btn--primary">主色按钮</button>
  <span class="pvs-p-2 pvs-border pvs-rounded-md pvs-bg-surface-muted">圆角 md</span>
</div>

容器与栅格

覆盖 --pvs-container-max、--pvs-grid-columns 可改阅读宽与轨数。

<p class="pvs-text-sm pvs-text-muted pvs-m-0">覆盖 <code>--pvs-container-max</code>、<code>--pvs-grid-columns</code> 可改阅读宽与轨数。</p>

间距尺度

改 --pvs-space-* 或默认间隙 --pvs-gap；详见 间距尺度。

gap 1remB
<div class="pvs-stack pvs-p-4 pvs-border" style="--pvs-gap:1rem">
  <span class="pvs-p-2 pvs-bg-surface-muted pvs-border">gap 1rem</span>
  <span class="pvs-p-2 pvs-border">B</span>
</div>

版本迭代

发版节奏见 ITERATION.md；变更列表见 CHANGELOG.md。minor 只新增类名，令牌覆盖方式保持稳定。

类名说明
patch文档 / bugfix，无新类
minor新 utility、新断点前缀、可选包
major删类或改组件 DOM 契约

类名速查

类样式
--pvs-primary主色
--pvs-body-bg / --pvs-body-color页面底 / 字色
--pvs-container-max容器最大宽
--pvs-grid-columns栅格轨数
--pvs-gapstack/cluster/grid 默认间隙
--pvs-radius-md圆角（默认 0）