主题定制

内置主题

Obsidian 提供两种内置主题：

• 默认主题（浅色）：明亮风格，适合日间使用
• 默认主题（深色）：暗色风格，保护眼睛

切换主题

1. 打开设置 → 外观
2. 选择「基础主题」或「基础配色方案」
3. 选择浅色/深色/跟随系统

跟随系统设置

启用「跟随系统」后，Obsidian 会自动切换主题：

• macOS：系统偏好设置 → 外观
• Windows：设置 → 个性化 → 颜色
• Linux：桌面环境设置

社区主题

浏览和安装

1. 打开设置 → 外观
2. 点击「管理」按钮
3. 浏览或搜索社区主题
4. 点击「使用」安装并应用

推荐主题

极简风格

主题名称	特点描述
Minimal	极简设计，高度可定制，搭配 Minimal Theme Settings
Things	现代简洁设计，灵感来自 Things 3
Typomagical	专注排版，适合写作

精美配色

主题名称	特点描述
Blue Topaz	精美的蓝绿色调，功能丰富
Dracula	经典 Dracula 配色，护眼
Catppuccin	温暖柔和的配色
California Coast	温暖的加州海岸风格

专业风格

主题名称	特点描述
Atom	类似 Atom 编辑器风格
Obsidian You	类似 Google Material You 设计
ITS Theme	功能强大，支持多种场景

主题推荐选择

推荐选择:
  追求效率:
    - Minimal（最简洁）
    - Things（现代风格）
  
  长时间使用:
    - Dracula（护眼）
    - Catppuccin（柔和）
  
  功能丰富:
    - Blue Topaz
    - ITS Theme

自定义 CSS

使用 CSS 代码片段

创建代码片段

1. 打开设置 → 外观
2. 点击「CSS 代码片段」旁的文件夹图标
3. 在打开的文件夹中创建 .css 文件
4. 返回设置，刷新并启用代码片段

文件结构

.obsidian/
└── snippets/
    ├── custom-fonts.css
    ├── link-colors.css
    └── hide-elements.css

常用自定义示例

修改字体

/* 编辑器字体 */
.cm-s-obsidian .cm-line,
.markdown-source-view {
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
  font-size: 15px;
  line-height: 1.6;
}

/* 界面字体 */
body {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 预览字体 */
.markdown-preview-view {
  font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
  font-size: 16px;
}

调整行高和段落间距

/* 增加行高 */
.cm-line,
.markdown-preview-view p {
  line-height: 1.8;
}

/* 段落间距 */
.markdown-preview-view p {
  margin-bottom: 1.2em;
}

/* 列表间距 */
.cm-line,
.markdown-preview-view li {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

自定义链接颜色

/* 内部链接 */
.internal-link,
.cm-link {
  color: #7c3aed !important;
}

.internal-link:hover {
  color: #6d28d9 !important;
  text-decoration: underline;
}

/* 外部链接 */
.external-link {
  color: #2563eb !important;
}

.external-link:hover {
  color: #1d4ed8 !important;
}

/* 未存在链接 */
.is-unresolved {
  color: #9ca3af !important;
  opacity: 0.8;
}

高亮当前行

/* 编辑模式当前行 */
.cm-active {
  background-color: rgba(124, 58, 237, 0.1) !important;
  border-left: 2px solid #7c3aed;
}

/* 预览模式高亮 */
.markdown-preview-view:has(.is-live-preview) .active-line {
  background-color: rgba(124, 58, 237, 0.05);
}

标题样式

/* 一级标题 */
.cm-header-1,
.markdown-preview-view h1 {
  font-size: 2em;
  color: #7c3aed;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.3em;
}

/* 二级标题 */
.cm-header-2,
.markdown-preview-view h2 {
  font-size: 1.5em;
  color: #6d28d9;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.2em;
}

/* 三级标题 */
.cm-header-3,
.markdown-preview-view h3 {
  font-size: 1.25em;
  color: #5b21b6;
}

代码块样式

/* 代码块背景 */
.markdown-preview-view pre,
.cm-line .cm-inline-code {
  background-color: #1e1e2e;
  border-radius: 8px;
}

/* 行内代码 */
.cm-inline-code {
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
}

/* 代码块 */
.markdown-preview-view pre code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
}

引用块样式

/* 引用块 */
.markdown-preview-view blockquote,
.cm-quote {
  border-left: 4px solid #7c3aed;
  padding-left: 1em;
  margin-left: 0;
  color: #6b7280;
  background-color: rgba(124, 58, 237, 0.05);
  border-radius: 0 8px 8px 0;
}

隐藏界面元素

/* 隐藏标题栏 */
.titlebar {
  display: none;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 隐藏文件探索器标题 */
.nav-folder-title-content {
  font-weight: normal;
}

/* 隐藏帮助按钮 */
.workspace-ribbon-action[aria-label="帮助"] {
  display: none;
}

深色模式适配

/* 自动适配深色模式 */
.theme-dark {
  --text-normal: #e2e8f0;
  --background-primary: #1a1a2e;
  --background-secondary: #16213e;
}

.theme-light {
  --text-normal: #1f2937;
  --background-primary: #ffffff;
  --background-secondary: #f3f4f6;
}

Style Settings 插件

安装

Style Settings 插件可以图形化配置主题样式：

1. 在插件市场搜索「Style Settings」
2. 安装并启用
3. 打开设置 → Style Settings

配置选项

支持的主题通常提供以下自定义选项：

• 颜色配置（主色调、背景色、文字色）
• 字体设置（编辑器字体、界面字体）
• 布局调整（侧边栏宽度、行高）
• 图标样式（文件夹图标、文件图标）
• 动画效果（过渡动画、悬停效果）

在 CSS 中添加配置选项

/* @settings
name: 我的自定义样式
id: my-custom-style
settings:
  - 
    id: heading-color
    title: 标题颜色
    type: variable-themed-color
    format: hex
    default-light: '#7c3aed'
    default-dark: '#a78bfa'
  -
    id: line-height
    title: 行高
    type: variable-number
    default: 1.6
*/

:root {
  --heading-color: var(--heading-color, #7c3aed);
  --line-height: var(--line-height, 1.6);
}

主题开发

主题文件结构

.obsidian/
└── themes/
    └── your-theme/
        ├── obsidian.css    # 主题样式文件（必需）
        ├── manifest.json   # 主题清单（必需）
        └── theme.css       # 可选的额外样式

manifest.json 示例

{
  "name": "Your Theme Name",
  "version": "1.0.0",
  "minAppVersion": "1.0.0",
  "author": "Your Name",
  "authorUrl": "https://github.com/yourusername",
  "fundingUrl": "https://ko-fi.com/yourusername"
}

开发流程

1. 创建主题文件夹
2. 编写 CSS 样式
3. 创建 manifest.json
4. 在本地测试
5. 发布到社区

发布主题

1. 在 GitHub 创建仓库
2. 上传主题文件
3. 在 obsidian-releases 仓库提交 PR
4. 等待审核合并

配色方案

CSS 变量

Obsidian 使用 CSS 变量定义颜色，可在主题或代码片段中覆盖：

:root {
  /* 主色调 */
  --accent-h: 262;
  --accent-s: 83%;
  --accent-l: 58%;
  
  /* 背景色 */
  --background-primary: #ffffff;
  --background-secondary: #f3f4f6;
  --background-modifier-border: #e5e7eb;
  
  /* 文字色 */
  --text-normal: #1f2937;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
}

.theme-dark {
  --background-primary: #1a1a2e;
  --background-secondary: #16213e;
  --text-normal: #e2e8f0;
}

常用 CSS 变量

:root {
  /* 品牌色 */
  --interactive-accent: #7c3aed;
  --interactive-accent-hover: #6d28d9;
  
  /* 交互元素 */
  --interactive-normal: #f3f4f6;
  --interactive-hover: #e5e7eb;
  
  /* 文本选择 */
  --text-selection: rgba(124, 58, 237, 0.3);
  
  /* 搜索高亮 */
  --text-highlight-bg: rgba(255, 208, 0, 0.4);
  
  /* 标签颜色 */
  --tag-color: #7c3aed;
  --tag-background: rgba(124, 58, 237, 0.1);
}

创建自定义配色

在 CSS 代码片段中添加：

/* 薰衣草配色方案 */
.theme-light {
  --accent-h: 262;
  --accent-s: 83%;
  --accent-l: 58%;
  --background-primary: #faf5ff;
  --background-secondary: #f3e8ff;
  --text-normal: #3b0764;
}

.theme-dark {
  --accent-h: 262;
  --accent-s: 70%;
  --accent-l: 70%;
  --background-primary: #1e1b2e;
  --background-secondary: #2d2640;
  --text-normal: #e9d5ff;
}

实用代码片段

紧凑模式

/* 紧凑布局 */
.workspace-leaf-content {
  padding: 0;
}

.cm-line {
  padding-top: 0;
  padding-bottom: 0;
}

.markdown-preview-view {
  padding: 0 1rem;
}

宽屏阅读

/* 增加内容区宽度 */
.markdown-source-view,
.markdown-preview-view {
  max-width: 900px;
  margin: 0 auto;
}

禅模式

/* 专注写作模式 */
body {
  --content-max-width: 700px;
}

.workspace-ribbon,
.workspace-tabs {
  opacity: 0;
  transition: opacity 0.3s;
}

.workspace-ribbon:hover,
.workspace-tabs:hover {
  opacity: 1;
}

卡片布局

/* 文件列表卡片样式 */
.nav-file {
  border-radius: 8px;
  margin: 4px 8px;
  padding: 8px;
}

.nav-file:hover {
  background-color: var(--interactive-hover);
}

常见问题

主题不生效？

1. 检查主题是否已启用
2. 检查 CSS 语法是否正确
3. 清除缓存并重启
4. 检查是否有 CSS 片段冲突

如何恢复默认主题？

1. 设置 → 外观
2. 点击主题管理
3. 选择「默认主题」

CSS 变量在哪查看？

• 使用开发者工具 Ctrl/Cmd + Shift + I
• 检查 :root 元素的样式
• 查看 Obsidian 官方主题源码

下一步

• 自定义主题进阶 - 深入主题开发
• 主题开发 - 开发自己的主题
• 同步方案 - 设置多设备同步