--- 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 ``` **2. 切换主题**（改属性即可，无需重载） ```js document.documentElement.dataset.theme = 'azurite'; ``` **3. 可选装饰** ```html ``` ## 关键：中文排版已内置 这是和普通主题库最大的区别——**不只是换颜色，排版规范也写进去了**： | 项目 | 值 | 为什么 | |------|-----|--------| | 行高 | `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` —— 国潮视觉，做图用（本主题做网页用）