Chinese Web Themes

Name: Chinese Web Themes
Author: sanhuang520-ship-it

ASecurity

中式网页主题库。当用户要"中国风网页""国风网站样式""古风博客主题""中式配色 CSS""水墨风页面""新中式网页""给网站换个中国风皮肤"时使用。提供 8 套可直接引入的 CSS 主题，内置中文排版规范。

8 stars

0 votes

0 copies

0 views

Added 9/3/2026

ai-agentsgo

Security Analysis

A100/100

Scanned 9/3/2026

Install to Claude Code

$npx -y skills add sanhuang520-ship-it/awesome-chinese-ai-tools --skill chinese-web-themes --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Chinese Web Themes?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Chinese Web Themes

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/sanhuang520-ship-it-chinese-web-themes/badge)](https://www.skillsdirectory.com/skills/sanhuang520-ship-it-chinese-web-themes)

More formats (shields.io, HTML) on the badges page.

Download Zip

Files

SKILL.md

---
name: chinese-web-themes
description: 中式网页主题库。当用户要"中国风网页""国风网站样式""古风博客主题""中式配色 CSS""水墨风页面""新中式网页""给网站换个中国风皮肤"时使用。提供 8 套可直接引入的 CSS 主题，内置中文排版规范。
metadata:
  author: sanhuang520-ship-it
  category: design
  tags: design, chinese, ui, development
---

# 中式网页主题库

**一个事实**：主流网页主题库里有日式极简，却几乎没有中式的。

我们查过某个 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.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` —— 国潮视觉，做图用（本主题做网页用）

Chinese Web Themes

Security Analysis

Attribution

Comments (0)