主题开发

概述

Obsidian 主题是一组 CSS 样式规则，用于改变 Obsidian 的外观。

主题结构

基本文件

my-theme/
├── obsidian.css    # 主题样式文件（必需）
└── manifest.json   # 主题清单（必需）

manifest.json

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

CSS 选择器

常用类名

/* 主题颜色 */
.theme-dark { }  /* 深色主题 */
.theme-light { } /* 浅色主题 */

/* 编辑器 */
.markdown-source-view { }  /* 源码模式 */
.markdown-reading-view { } /* 阅读模式 */
.cm-editor { }             /* CodeMirror 编辑器 */

/* 侧边栏 */
.workspace-leaf { }        /* 侧边栏面板 */
.workspace-drawer { }      /* 移动端抽屉 */

/* 文件列表 */
.nav-files-container { }   /* 文件列表容器 */
.nav-file { }              /* 文件项 */
.nav-folder { }            /* 文件夹项 */

元素选择

/* 标题 */
.markdown-preview-view h1 { }
.markdown-preview-view h2 { }

/* 段落 */
.markdown-preview-view p { }

/* 链接 */
.internal-link { }  /* 内部链接 */
.external-link { }  /* 外部链接 */
.is-unresolved { }  /* 未解析链接 */

/* 代码 */
.code-block { }
.cm-inline-code { }
pre code { }

/* 列表 */
.markdown-preview-view ul { }
.markdown-preview-view ol { }

/* 引用 */
.markdown-preview-view blockquote { }

CSS 变量

颜色变量

.theme-dark {
  /* 背景色 */
  --background-primary: #1e1e1e;
  --background-secondary: #252526;
  --background-modifier-border: #3c3c3c;

  /* 文字颜色 */
  --text-normal: #d4d4d4;
  --text-muted: #8a8a8a;
  --text-faint: #5a5a5a;

  /* 强调色 */
  --accent-h: 210;
  --accent-s: 100%;
  --accent-l: 50%;

  /* 交互状态 */
  --interactive-accent: #007acc;
  --interactive-hover: #1e1e1e;
}

.theme-light {
  --background-primary: #ffffff;
  --background-secondary: #f3f3f3;
  --text-normal: #333333;
}

布局变量

:root {
  /* 字体 */
  --font-text: -apple-system, BlinkMacSystemFont, sans-serif;
  --font-monospace: 'JetBrains Mono', monospace;
  --font-interface: var(--font-text);

  /* 字体大小 */
  --font-size-normal: 16px;
  --font-size-small: 13px;

  /* 间距 */
  --size-4-1: 4px;
  --size-4-2: 8px;
  --size-4-3: 12px;
  --size-4-4: 16px;

  /* 圆角 */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
}

常用样式

字体设置

/* 设置编辑器字体 */
.markdown-source-view {
  font-family: 'Inter', 'PingFang SC', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* 设置代码字体 */
code, pre {
  font-family: 'JetBrains Mono', monospace;
}

颜色方案

/* 深色主题配色 */
.theme-dark {
  --background-primary: #0d1117;
  --background-secondary: #161b22;
  --text-normal: #c9d1d9;
  --text-muted: #8b949e;
  --accent-color: #58a6ff;
}

/* 浅色主题配色 */
.theme-light {
  --background-primary: #ffffff;
  --background-secondary: #f6f8fa;
  --text-normal: #24292f;
  --text-muted: #57606a;
  --accent-color: #0969da;
}

链接样式

/* 内部链接 */
.internal-link {
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.internal-link:hover {
  border-bottom-color: var(--accent-color);
}

/* 外部链接 */
.external-link {
  color: var(--text-muted);
}

.external-link::after {
  content: ' ↗';
  font-size: 0.8em;
}

代码块样式

/* 代码块背景 */
pre {
  background: var(--background-secondary);
  border-radius: var(--radius-m);
  padding: 16px;
  overflow-x: auto;
}

/* 行内代码 */
code {
  background: var(--background-modifier-border);
  padding: 2px 6px;
  border-radius: var(--radius-s);
}

表格样式

/* 表格美化 */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px 12px;
  border: 1px solid var(--background-modifier-border);
}

th {
  background: var(--background-secondary);
  font-weight: 600;
}

tr:nth-child(even) {
  background: var(--background-secondary);
}

响应式设计

移动端适配

/* 手机端 */
.is-mobile {
  --font-size-normal: 14px;
}

/* 平板端 */
@media (min-width: 768px) {
  .markdown-preview-view {
    max-width: 750px;
    margin: 0 auto;
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .markdown-preview-view {
    max-width: 800px;
  }
}

暗色/亮色切换

/* 同时支持两种主题 */
.theme-light {
  --bg-color: #ffffff;
  --text-color: #333333;
}

.theme-dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

高级技巧

图谱样式

/* 图谱节点颜色 */
.graph-view.color-fill {
  color: var(--accent-color);
}

/* 图谱连线 */
.graph-view.color-line {
  color: var(--background-modifier-border);
}

/* 高亮状态 */
.graph-view.color-fill-highlight {
  color: #ff6b6b;
}

动画效果

/* 平滑过渡 */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 链接悬停 */
.internal-link {
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* 按钮效果 */
button {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

自定义滚动条

/* Webkit 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

Style Settings 支持

添加设置选项

在主题 CSS 文件顶部添加注释：

/* @settings

name: My Theme Settings
id: my-theme
settings:

  -
    id: accent-color
    title: Accent Color
    type: class-select
    allowEmpty: false
    default: accent-blue
    options:
      -
        label: Blue
        value: accent-blue
      -
        label: Green
        value: accent-green

  -
    id: font-size
    title: Font Size
    type: variable-number
    default: 16
    format: px

*/

.accent-blue { --accent-color: #007acc; }
.accent-green { --accent-color: #28a745; }

设置类型

类型	说明
class-select	下拉选择
variable-number	数字输入
variable-text	文本输入
variable-color	颜色选择器
class-toggle	开关切换

发布主题

GitHub 发布

1. 创建 GitHub 仓库
2. 上传主题文件
3. 创建 Release

提交到社区

1. Fork obsidian-releases 仓库
2. 编辑 community-css-themes.json
3. 提交 Pull Request

{
  "name": "My Theme",
  "author": "Your Name",
  "repo": "yourusername/my-theme",
  "branch": "main"
}

下一步

• API 参考 - 查阅 API 文档