chinese-web-themeslisted
Install: claude install-skill sanhuang520-ship-it/awesome-chinese-ai-tools
# 中式网页主题库
**一个事实**：主流网页主题库里有日式极简，却几乎没有中式的。
我们查过某个 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"> <!-- 首行缩进（印刷风）-->
```
### 接入现有网站时
用户要求保留原有正文、代码块或组件样式时，不要把主题 CSS 当作整站重置。优先给最短接入方案，并在上线清单里**逐项写出**这 6 类检查；不能因为其中一项看似与配色无关而省略：
1. **正文**：行宽、字号、行高、段落间距没有被主题意外覆盖。
2. **移动端**：窄屏无横向溢出，长标题、图片和表格仍可用。
3. **代码块**：字体、背景、语法高亮、换行或横向滚动保持原行为。
4. **样式覆盖**：确认样式加载顺序、选择器优先级和生产缓存；优先只覆盖变量。
5. **授权**：主题本身只用系统字体；若项目另加字体、图片或纹理，必须核对商用许可与署名要求。
6. **无障碍**：正文/链接/焦点对比度、键盘焦点和减少动态效果偏好可辨识。
如果用户只要审查或方案，不要生成整份 CSS，也不要为了“演示”修改文件。
## 关键：中文排版已内置
这是和普通主题库最大的区别——**不只是换颜色，排版规范也写进去了**：
| 项目 | 值 | 为什么 |
|------|-----|--------|
| 行高 | `1