主题库
一键为公开站点或管理后台应用配色主题,用六种颜色创建自己的主题,并在自己的内容中使用主题变量。
主题库一键设定整个网站的配色——管理后台也可以单独设定。所有使用主题颜色的页面、区块和菜单都会随之改变,无需逐页重新配色。
应用主题
- 进入 管理后台 → 主题库。
- 用顶部的标签选择要设置的对象:公开站点 或 管理后台。两者各有自己的当前主题。
- 在某个预设上点击 应用。该卡片会显示 当前使用 标记,更改立即生效——无需重新构建或重启。
主题库自带浅色预设,如 Forest、Ocean、Slate、Clay,以及深色预设,如 Midnight、Sapphire、Ember、Charcoal。
恢复默认 会移除该标签下的当前主题,网站回到内置配色。
创建自己的主题
点击 新建预设,填写名称并选择六种颜色:
| 颜色 | 用途 |
|---|---|
| 背景色 | 页面背景 |
| 表面色 | 卡片、面板等浮起区域 |
| 文字色 | 标题和正文 |
| 次要文字色 | 说明、日期等辅助文字 |
| 强调色 | 链接、按钮、高亮 |
| 边框色 | 分隔线和轮廓 |
其余颜色会自动推算:强调色的悬停色、用于渐变的第二强调色、更淡的文字色以及更深的边框色。
示例——沉稳的 “Harbor” 主题:
| 颜色 | 取值 |
|---|---|
| 背景色 | #f5f8fb |
| 表面色 | #ffffff |
| 文字色 | #12263a |
| 次要文字色 | #5b6b7c |
| 强调色 | #0f766e |
| 边框色 | #d9e2ec |
创建后,像内置预设一样点击 应用 即可。提示:文字与背景的明暗差距要足够大,才能保证清晰易读。
微调生成的文件
应用主题时会生成一个真实的 CSS 文件——例如 theme-public-forest.css——可在 管理后台 → CSS 文件 中找到,打开后可手动调整任意取值。注意:再次应用同一预设会重新生成该文件,覆盖你的修改。
要查看当前实际生效的颜色,请打开 管理后台 → 设置 → 主题变量(Theme Variables)。
在自己的内容中使用主题颜色
主题就是一组 CSS 变量。在任何编写 CSS 的地方——页面的 head HTML、HTML 区块、自定义 CSS 文件——使用它们,内容就会跟随当前主题变化:
| 变量 | 含义 |
|---|---|
--pub-bg | 页面背景 |
--pub-surface | 卡片和面板 |
--pub-ink | 主要文字 |
--pub-ink-muted | 次要文字 |
--pub-ink-faint | 淡色文字 |
--pub-accent | 强调色 |
--pub-accent-2 | 第二强调色,用于渐变 |
--pub-accent-hover | 强调色悬停状态 |
--pub-border | 边框 |
--pub-border-strong | 较深的边框 |
示例——卡片:
<div class="promo-card">
<h3>春季发布</h3>
<p>新区块,更快的页面。</p>
<a href="/pricing">查看价格</a>
</div>
<style>
.promo-card {
background: var(--pub-surface);
color: var(--pub-ink);
border: 1px solid var(--pub-border);
border-radius: 12px;
padding: 1.5rem;
}
.promo-card p { color: var(--pub-ink-muted); }
.promo-card a { color: var(--pub-accent); }
.promo-card a:hover { color: var(--pub-accent-hover); }
</style>
示例——渐变标题:
.hero-title {
background: linear-gradient(135deg, var(--pub-accent), var(--pub-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
切换主题后,两个示例都会自动换色。凡是应与网站保持一致的地方,都不要使用 #2563eb 这样的固定颜色——它们不会随主题变化。
许多区块设置(环境背景、渐变文字等)也允许选择主题颜色而非固定颜色,道理相同。
让某个页面不使用主题
自带完整设计的页面——例如导入的 HTML 网站——可以不使用网站主题。在 管理后台 → 页面 中关闭该页面的 主题 开关即可,其他页面仍使用当前主题。