Nord主题配色展示

这是一个展示Halo博客Nord主题配色效果的文档，基于nord-obsidian-typora.css样式。

标题层级展示

三级标题展示 (H3)

这是一个三级标题，使用了Nord配色方案中的黄色调 #c7a46b。

四级标题展示 (H4)

这是一个四级标题，使用了Nord配色方案中的绿色调 #a3be8c。

文本强调效果展示

基础文本强调

粗体文本：使用深粉色 #D19999 突出显示重要内容
斜体文本：使用深绿色 #8ba373 显示强调内容
粗斜体组合：使用红橙色 #F55354 显示最重要的强调内容

在段落中的应用

这是一段普通的文本内容。在这段文本中，我们可以使用粗体来强调重要的概念，使用斜体来表示术语或引用，而 粗斜体 则用于最关键的强调内容。

配色方案详情

Nord配色变量


:root {

/* Nord标题配色变量 */

--heading-red: #bf616a; /* H1标题红色 */

--heading-orange: #d08770; /* H2标题橙色 */

--heading-yellow: #c7a46b; /* H3标题黄色（更暗） */

--heading-green: #a3be8c; /* H4标题绿色 */

--heading-purple: #b48ead; /* H5标题紫色 */

--heading-muted: #d8dee9; /* H6标题弱化色 */

/* Nord文本强调配色变量 */

--text-strong: #D19999; /* 粗体文本深粉色（更暗） */

--text-em: #8ba373; /* 斜体文本深绿色（更暗） */

--text-strong-em: #F55354; /* 粗斜体文本红橙色 */

}

色彩说明

| 级别 | 颜色值 | 颜色名称 | 用途说明 |

|------|--------|----------|----------|

| H1 | #bf616a | Nord红色 | 最高级别标题，带下划线 |

| H2 | #d08770 | Nord橙色 | 二级标题，带下划线 |

| H3 | #c7a46b | Nord暗黄色 | 三级标题，无下划线 |

文本强调色彩

| 强调类型 | 颜色值 | 效果 |

|----------|--------|------|

| 粗体 | #D19999 | 深粉色，突出重要内容 |

| 斜体 | #8ba373 | 深绿色，强调术语概念 |

| 粗斜体 | #F55354 | 红橙色，最强调色 |

实际应用示例

技术文档示例

API接口说明

这是一个关于 RESTful API 的说明文档。

请求方法

GET: 用于获取资源数据
POST: 用于创建新的资源
PUT: 用于更新现有资源
DELETE: 用于删除资源（危险操作）

注意事项

所有的API请求都需要在请求头中包含 Authorization 字段。

博客文章示例

关于Nord配色方案

Nord是一个 极地风格 的配色方案，灵感来源于 北极的颜色。它提供了：

冷色调主导：以蓝、青、白为主色调
温暖的强调色：橙、红、紫作为强调
极简美学：追求简洁而优雅的视觉效果

设计理念

Nord配色方案的核心理念是创造一个 平静而专业 的视觉环境，既不会过于刺眼，又能保持 良好的可读性。

样式特性说明

标题特性

H1和H2：带有颜色匹配的下边框
所有标题：使用600字重，增强视觉层次
间距优化：合理的上下边距，提升阅读体验
行高设置：1.4的行高保证了良好的可读性

文本强调特性

语义化设计：不同的强调类型使用不同的颜色
视觉层次：从绿色斜体到红橙色粗斜体，层次分明
兼容性强：支持多种HTML标签组合

使用建议

适用场景

技术博客：清晰的标题层次适合技术文档
个人博客：温和的Nord色调营造舒适阅读环境
文档站点：专业的配色方案提升内容可信度

最佳实践

适度使用强调：避免过度使用粗体和斜体
保持一致性：在同一篇文章中保持强调样式的一致性
关键信息突出：重要的警告或注意事项使用粗斜体

本文档展示了基于Nord配色方案的Markdown样式效果

配色文件：halo-nord-headings.css