chinese-web-themes
Solid中式网页主题库。当用户要"中国风网页""国风网站样式""古风博客主题""中式配色 CSS""水墨风页面""新中式网页""给网站换个中国风皮肤"时使用。提供 8 套可直接引入的 CSS 主题，内置中文排版规范。
Web & Frontend 7 stars
1 forks Updated today MIT
Install
Quality Score: 81/100
Stars 20%
Recency 20%
Frontmatter 20%
Documentation 15%
Issue Health 10%
License 10%
Description 5%
Skill Content
# 中式网页主题库
**一个事实**：主流网页主题库里有日式极简，却几乎没有中式的。
我们查过某个 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...
Details
- Author
- sanhuang520-ship-it
- Repository
- sanhuang520-ship-it/awesome-chinese-ai-tools
- Created
- 2 months ago
- Last Updated
- today
- Language
- HTML
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
Web & Frontend Solid
chinese-design-md
中式 DESIGN.md 设计系统。当用户要"中国风网页""国风页面""中式设计系统""给项目定个中式风格""DESIGN.md""让 AI 按设计规范生成界面""中文网页排版规范"时使用。提供 8 套可直接丢进项目根目录的 DESIGN.md，AI 读了就按这套规范生成界面。含西文设计系统普遍缺失的中文排版规则。
7 Updated today
sanhuang520-ship-it AI & Automation Listed
cyxj-wechat-pub
将 Obsidian Markdown 文章转换为高质量公众号排版，内置 3 套 CSS 主题可选： TATALAB 蓝（默认）、炭黑暖金（深度/商务）、暖橙编辑（编辑/海报风）。 支持内容审查、打磨、IP 配图生成、预览确认，输出可直接粘贴到微信后台。 触发词：发布到公众号、公众号排版、微信发布、排版文章、XCYJ 排版。
6 Updated 2 weeks ago
chenyuxiaojin Data & Documents Solid
chinese-typography
中文排版规范助手。当用户要"排版""中文网页样式""文章排版""公众号排版""PDF/Word 排版""字体怎么选""中英混排""为什么我的中文网页很丑"时使用。处理中英间距、标点、行高、字体栈、CJK 断行等中文特有问题，输出可直接用的 CSS 或排版建议。
7 Updated today
sanhuang520-ship-it