星轨 Stellaris · 主题样式验收

这是一篇用于「星轨 Stellaris」博客园主题样式验收的测试随笔。发布后会逐项检查文章页的排版、代码块、表格、引用、吸顶导航与阅读进度条，验收完成后会删除。文中的内容仅为占位示例，不代表任何真实结论。

一、设计变量与色彩体系

主题的所有视觉参数都收敛在 :root 变量里，便于整体换肤。下面这段 CSS 是主题令牌的节选，正好用来验收代码高亮、行号与代码块一键复制按钮：

:root {
  --xm-bg: #12100e;
  --xm-surface: #1a1917;
  --xm-text: #e8eef2;
  --xm-muted: #8b949e;
  --xm-accent: #5eead4;
  --xm-grad-end: #ffd166;
  --xm-radius-card: 14px;
  --xm-font-sans: "Inter", "PingFang SC", sans-serif;
}

变量分层遵循「画布 → 表面 → 文本 → 强调」的递进关系，暗色下用极光青作为唯一强调色，避免多色竞争造成视觉噪声。

二、组件样式对照表

下表列出主要组件在暗色主题下的关键样式，用于验收表格的边框、斑马纹与表头对齐：

组件	关键样式	验收要点
标题 h2	左侧竖条 + 渐变文字	竖条是否贴合、字重是否清晰
代码块 pre	深色底 + 等宽字体	高亮配色、复制按钮、行号
引用 blockquote	左侧强调线	引文缩进与对比度
悬浮按钮 FAB	毛玻璃圆角	是否始终可见、层级是否正确
阅读进度条	顶部渐变细线	滚动时宽度是否跟随

好的暗色主题不是在纯黑上刷一层白字，而是把对比度、层次与呼吸感一起算进去。这一行引用用来验收 blockquote 的左侧竖线与背景色。

三、验收清单

无序列表与行内元素同样需要覆盖：

• 加粗文本：验证 strong 在暗色下的字重与可读性
• 行内代码：形如 data-theme="auto" 的片段是否带独立底色
• 超长正文：用于把页面撑到可滚动，从而触发 #header 的 .is-stuck 毛玻璃吸顶
• 返回顶部：滚动超过 400px 后右下角按钮是否出现

关于吸顶与进度条的补充说明

页面滚动时，增强脚本会给 #header 加上 is-stuck 类，同时把 .xm-progress 的宽度按 scrollTop / (scrollHeight - clientHeight) 计算。因此文章内容必须足够长，否则滚动条不会出现，吸顶与进度条都无法验证。

为了让整页产生足够高度，这里再补几段说明性文字。星轨主题在文章页的目标，是让长文阅读保持稳定的节奏：标题层级清晰、代码块不打断视线、表格不溢出容器、引用有明确的边界。段落之间保留适度的行距，代码块与正文之间用留白分隔，避免信息密度过高。

继续补充第二段说明文字。暗色界面里最容易被忽略的是次要文本的对比度：日期、标签、脚注这类信息如果过暗，会让人误以为内容缺失。主题把 --xm-muted 控制在一个可辨识但不过分抢眼的区间，既维持层级，也照顾长时间阅读的舒适度。

再补第三段说明文字。响应式方面，窄屏下代码块允许横向滚动而不撑破布局，表格同样限制在容器内；导航在滚动后保持吸顶但不遮挡正文。这些细节都会在本文发布后逐项截图核对。

最后一段。以上全部内容仅用于样式验收，不代表任何产品结论。验收结束后本文会被删除，博客恢复为空状态。感谢阅读。