零基础主题定制入门
不需要写完整的 CSS 主题，通过修改几个 CSS 变量就能让 Obsidian 焕然一新。本文面向零前端基础的用户。
先了解：主题是怎么工作的
Obsidian 的界面由 CSS 变量控制颜色、间距、字体等：
css
/* 主色调 */
--color-accent: #7c3aed; /* 主题强调色 */
--interactive-accent: #7c3aed; /* 交互元素强调色 */
/* 文字颜色 */
--text-normal: #222222; /* 正文 */
--text-muted: #888888; /* 次要文字 */
--text-faint: #aaaaaa; /* 浅色文字 */
/* 背景色 */
--background-primary: #ffffff; /* 主背景 */
--background-secondary: #f6f6f6; /* 次要背景 */方法一：CSS 代码片段（推荐入门）
CSS 代码片段是最安全的方式——只覆盖你想改的变量，不影响原始主题。
第 1 步：创建代码片段
在仓库的 .obsidian/snippets/ 目录下创建一个 .css 文件：
你的仓库/
└── .obsidian/
└── snippets/
└── my-custom.css ← 创建这个文件第 2 步：写入自定义样式
css
/* my-custom.css — 只改主色调 */
.theme-light {
--color-accent: #3b82f6; /* 蓝色强调 */
--interactive-accent: #3b82f6;
--text-accent: #3b82f6;
}
.theme-dark {
--color-accent: #60a5fa; /* 暗色下浅蓝 */
--interactive-accent: #60a5fa;
--text-accent: #60a5fa;
}第 3 步：启用代码片段
在 Obsidian 中：
- 设置 → 外观
- 滚动到 CSS 代码片段 区域
- 点击刷新按钮 🔄
- 打开
my-custom的开关
效果即时生效，无需重启。
常用自定义场景
调整正文字号
css
body {
--font-text-size: 16px; /* 默认正文 16px */
--font-text-size: 18px; /* 放大到 18px */
--font-editor-theme: 'Inter'; /* 更换编辑区字体 */
}更换字体
css
/* 使用系统字体 */
body {
--font-interface-theme: 'Inter', sans-serif;
--font-text-theme: 'Inter', sans-serif;
--font-monospace-theme: 'JetBrains Mono', 'Fira Code', monospace;
}自定义链接颜色
css
.theme-light {
--link-color: #2563eb; /* 链接颜色 */
--link-color-hover: #1d4ed8; /* 悬停颜色 */
--link-external-color: #059669; /* 外部链接颜色 */
}加宽编辑区
css
/* 编辑区更宽，适合大屏幕 */
.markdown-source-view.mod-cm6 .cm-content,
.markdown-reading-view .markdown-preview-view {
max-width: 900px; /* 默认 700px */
}隐藏界面元素
css
/* 隐藏标题栏（适合极简风格） */
.mod-macos .titlebar { display: none; }
/* 隐藏状态栏 */
.status-bar { display: none; }
/* 隐藏文件列表的 "新建" 按钮（减少干扰） */
.nav-action-button[aria-label="新建笔记"] { display: none; }圆角设置
css
body {
--radius-s: 4px; /* 小元素圆角 */
--radius-m: 8px; /* 中等元素圆角 */
--radius-l: 12px; /* 大元素圆角 */
}暗色模式微调
css
.theme-dark {
/* 背景不那么黑 */
--background-primary: #1e1e2e;
--background-secondary: #181825;
/* 代码块背景暖色 */
--code-background: #2a2a3a;
}方法二：Style Settings 插件
如果使用的是支持 Style Settings 的主题（如 Minimal、AnuPpuccin），可以直接通过界面调整：
安装
- 设置 → 第三方插件 → 浏览
- 搜索 Style Settings
- 安装并启用
使用
- 安装时确保使用了支持 Style Settings 的主题
- 设置 → Style Settings 插件 → Options
- 展开你的主题选项，可视调节颜色、字体、间距
支持 Style Settings 的热门主题：
| 主题 | 可调选项数 |
|---|---|
| Minimal | 50+ （字体、颜色、布局等） |
| AnuPpuccin | 80+ （多种预设风格） |
| ITS Theme | 70+ （滑块、颜色盘） |
| Border | 30+ （卡片式布局风格） |
| Prism | 40+ （三种装饰风格） |
方法三：快速换肤公式
不想深入学习？复制以下代码到你的代码片段文件，修改颜色值即可：
css
/* ===== 一键换肤模板 ===== */
/* [填入你的主题名] */
.theme-light {
/* 主色调 */
--color-accent: #7c3aed; /* ← 改成你喜欢的颜色 */
--interactive-accent: #7c3aed;
/* 链接 */
--link-color: #2563eb;
--link-color-hover: #3b82f6;
/* 标题色 */
--h1-color: #111827;
--h2-color: #1f2937;
/* 代码块 */
--code-background: #f3f4f6;
--code-normal: #e11d48;
}
.theme-dark {
--color-accent: #a78bfa;
--interactive-accent: #a78bfa;
--link-color: #93c5fd;
--link-color-hover: #60a5fa;
--h1-color: #f9fafb;
--h2-color: #f3f4f6;
--code-background: #1e293b;
--code-normal: #f472b6;
}常用 CSS 变量的搜索方法
在 Obsidian 中打开开发者工具（Ctrl+Shift+I / Cmd+Option+I）：
- 切换到 Elements 面板
- 点击左上角的选取工具 🖱️
- 点击你想修改的元素
- 在右侧 Styles 面板查看
var(--xxx)变量名
你也可以在 /advanced/core/css-snippets 中找到更多预设模板。
故障排查
修改没生效？
- 确认代码片段开关已打开
- 检查
.theme-light/.theme-dark选择器是否与当前模式匹配 - 确认 CSS 语法正确（分号、括号完整）
代码片段文件没有出现？
确保文件放在 .obsidian/snippets/ 目录下，点击刷新按钮。
不想搞砸？
创建备份：复制当前代码片段并注释掉旧内容，在注释里保留原始代码。代码片段可随时关闭恢复原样。
与主题开发的关系
| 你需要的场景 | 参考文档 |
|---|---|
| 我想零代码改外观 | ⬅ 本文（CSS 代码片段 + Style Settings） |
| 我想创建完整的 Obsidian 主题 | 主题开发 |
| 我想安装别人做好的主题 | 主题定制 |
| 我想学习更多 CSS 技巧 | CSS 代码片段 |