Immutable. This exact content is served forever at /api/v1/blob/de466e23aba1dfdf.
---
name: chinese-web-themes
description: 中式网页主题库。当用户要"中国风网页""国风网站样式""古风博客主题""中式配色 CSS""水墨风页面""新中式网页""给网站换个中国风皮肤"时使用。提供 8 套可直接引入的 CSS 主题，内置中文排版规范。
---
# 中式网页主题库
**一个事实**：主流网页主题库里有日式极简，却几乎没有中式的。
我们查过某个 32 套主题的知名库——有 `japanese-minimal`、`tokyo-night`、`nord`、`gruvbox`，
**一套中式的都没有**。中文用户想做国风网页，只能自己从零调色。
## 什么时候用
做中国风网页/博客/文档站、给现有站换中式皮肤、要一套中式配色方案、中文长文阅读页排版。
## 8 套主题
| 主题 | `data-theme` | 色系 | 适合 |
|------|-------------|------|------|
| **水墨** | `ink` | 素白宣纸 · 墨黑 | 随笔、诗词、极简博客 |
| **青绿** | `azurite` | 石青 · 石绿 | 文旅、山水、《千里江山图》感 |
| **宋韵** | `song` | 天青 · 素雅 | 茶文化、克制的品牌站 |
| **敦煌** | `dunhuang` | 土红 · 石青 | 文化 IP、历史题材 |
| **朱砂** | `vermilion` | 中国红 · 墨 | 节庆、有力度的主张 |
| **新中式** | `neo` | 木色 · 素白 | 家居、当代品牌 |
| **竹韵** | `bamboo` | 竹青 · 米白 | 清雅、自然、健康 |
| **夜宴** | `night` | 墨底 · 暗金 | 深色模式 |
另有 `auto` —— 跟随系统深色偏好。
## 怎么用
**1. 引入样式**
```html
<html lang="zh-CN" data-theme="ink">
<link rel="stylesheet" href="themes.css">
```
**2. 切换主题**（改属性即可，无需重载）
```js
document.documentElement.dataset.theme = 'azurite';
```
**3. 可选装饰**
```html
<html data-theme="ink" data-paper="on"> <!-- 宣纸纹理 -->
<html data-theme="song" data-indent="print"> <!-- 首行缩进（印刷风）-->
```
## 关键：中文排版已内置
这是和普通主题库最大的区别——**不只是换颜色，排版规范也写进去了**：
| 项目 | 值 | 为什么 |
|------|-----|--------|
| 行高 | `1.75` | 中文字符方正，西文常用的 1.5 会挤 |
| 行宽 | `38em` | 中文一行 30-40 字最舒服 |
| 字体栈 | 西文在前、中文在后 | 混排时英文才好看 |
| 断行 | `line-break: strict` | 标点不出现在行首（避头尾） |
| 强调 | 着重号，不用斜体 | **中文没有真斜体**，会被拉斜变形 |
| 标题 | 衬线字体 | 宋体标题更有中文书卷气 |
## CSS 变量（可覆盖）
每套主题定义这 8 个：
```css
--bg 页面底色
--surface 卡片/代码块底色
--line 分隔线
--ink 正文文字
--ink-strong 标题/强调
--ink-soft 次要文字
--accent 强调色（链接、引用条）
--accent-weak 强调色的浅版
```
想微调，直接在自己的 CSS 里覆盖：
```css
[data-theme="ink"] { --accent: #8C3A2E; }
```
## 无障碍
8 套主题的正文对比度实测在 **9.4 – 12.2**，均超过 WCAG AA 标准（4.5）。
## 选择建议
| 你的内容 | 推荐 |
|---------|------|
| 文字为主的长阅读 | `ink`、`song`（留白多、不抢戏） |
| 需要一点色彩 | `azurite`、`bamboo` |
| 要有文化厚度 | `dunhuang` |
| 要热闹/有力 | `vermilion` |
| 商业品牌 | `neo` |
| 夜间阅读 | `night` |
## 边界
1. **不替你决定商用字体**。主题用的是系统字体栈，不引入商用字体。若要用方正/汉仪等付费字体，授权自行核实。
2. **不做完整 UI 框架**。这是排版主题，不含按钮、表单、栅格等组件库。
3. **配色是起点不是终点**。品牌项目建议在此基础上按品牌色微调。
4. **文化元素慎用**。若在主题外另加龙凤祥云等纹样，注意寓意与场合（参见 `guochao-visual-cn` 的纹样速查）。
## 相关
- `chinese-typography` —— 中文排版规范详解（本主题的排版部分基于它）
- `guochao-visual-cn` —— 国潮视觉，做图用（本主题做网页用）