Border是一款我很喜欢的主题，它支持丰富的UI自定义，配合Style Settings插件，可以自由调整界面风格。它内置了自动隐藏侧边栏、卡片式布局、悬停线指示器等功能，并提供多套预设配色方案，涵盖浅色、暗色、拟物、半透明等多种风格。
A theme for obsidian.md
最近我切换到了Velocity，它以极致的UI工艺和专业排版为核心，融合了苹果设计哲学和当代网页美学，甚至隐约致敬了2000年代赛车游戏的界面风格。作者为不同操作系统定制了字体权重，微调标题缩进，使界面细节达到近乎苛刻的完美。
A radically modern theme for Obsidian.
Velocity的统一美学令人惊艳，但我始终怀念Border主题下Header的彩色竖线。为此，我编写了一段CSS，将Border的Header视觉元素无缝移植到Velocity：
/* --- 定义标题颜色变量 (来自Border主题) --- */
:root {
--h1-accent-color: #d32f2f;
--h2-accent-color: #f57c00;
--h3-accent-color: #fbc02d;
--h4-accent-color: #388e3c;
--h5-accent-color: #1976d2;
--h6-accent-color: #7b1fa2;
}
/* --- 1. 实时预览 (Live Preview) 模式下的标题样式 --- */
/* 为所有非代码块的标题行伪元素应用基础样式 */
.is-live-preview .cm-line:not(.HyperMD-codeblock).HyperMD-header::before {
content: " ";
display: inline-block;
width: 3px;
margin-right: 6px;
border-radius: 4px;
transform: translateY(4px);
}
/* 为各级标题的伪元素设置不同的背景色和精确的高度 */
.is-live-preview .cm-line:not(.HyperMD-codeblock).HyperMD-header-1::before { background-color: var(--h1-accent-color); height: calc(1.2em - 8px); }
.is-live-preview .cm-line:not(.HyperMD-codeblock).HyperMD-header-2::before { background-color: var(--h2-accent-color); height: calc(1.2em - 8px); }
.is-live-preview .cm-line:not(.HyperMD-codeblock).HyperMD-header-3::before { background-color: var(--h3-accent-color); height: calc(1.3em - 8px); }
.is-live-preview .cm-line:not(.HyperMD-codeblock).HyperMD-header-4::before { background-color: var(--h4-accent-color); height: calc(1.4em - 8px); }
.is-live-preview .cm-line:not(.HyperMD-codeblock).HyperMD-header-5::before { background-color: var(--h5-accent-color); height: calc(1.5em - 8px); }
.is-live-preview .cm-line:not(.HyperMD-codeblock).HyperMD-header-6::before { background-color: var(--h6-accent-color); height: calc(1.5em - 8px); }
/* --- 2. 阅读 (Reading) 模式下的标题样式 --- */
/* 为阅读模式下的标题启用相对定位，并设置左边距 */
.markdown-reading-view h1,
.markdown-reading-view h2,
.markdown-reading-view h3,
.markdown-reading-view h4,
.markdown-reading-view h5,
.markdown-reading-view h6 {
position: relative;
padding-left: 15px;
border-bottom: none !important;
}
/* 使用伪元素绝对定位创建竖线 */
.markdown-reading-view h1::before,
.markdown-reading-view h2::before,
.markdown-reading-view h3::before,
.markdown-reading-view h4::before,
.markdown-reading-view h5::before,
.markdown-reading-view h6::before {
content: '';
position: absolute;
left: 0px;
width: 3px;
border-radius: 4px;
top: 4px;
}
/* 为各级标题的伪元素设置不同的背景色和精确的高度 */
.markdown-reading-view h1::before { background-color: var(--h1-accent-color); height: calc(1.2em - 8px); }
.markdown-reading-view h2::before { background-color: var(--h2-accent-color); height: calc(1.2em - 8px); }
.markdown-reading-view h3::before { background-color: var(--h3-accent-color); height: calc(1.3em - 8px); }
.markdown-reading-view h4::before { background-color: var(--h4-accent-color); height: calc(1.4em - 8px); }
.markdown-reading-view h5::before { background-color: var(--h5-accent-color); height: calc(1.5em - 8px); }
.markdown-reading-view h6::before { background-color: var(--h6-accent-color); height: calc(1.5em - 8px); }
/* --- 3. 优化：字体粗细与间距 (同时应用到两种视图) --- */
/* 引用 Velocity 主题的字重变量，确保风格统一 */
.HyperMD-header-1, .markdown-rendered h1 { font-weight: var(--h1-weight); }
.HyperMD-header-2, .markdown-rendered h2 { font-weight: var(--h2-weight); }
.HyperMD-header-3, .markdown-rendered h3 { font-weight: var(--h3-weight); }
.HyperMD-header-4, .markdown-rendered h4 { font-weight: var(--h4-weight); }
.HyperMD-header-5, .markdown-rendered h5 { font-weight: var(--h5-weight); }
.HyperMD-header-6, .markdown-rendered h6 { font-weight: var(--h6-weight); }