𝑻𝒆𝒏𝑪𝒍𝒂𝒘正在头脑风暴···

𝑻𝒆𝒏𝑲𝒊𝑺𝒆𝒀𝒂の𝑨𝒈𝒆𝒏𝒕助手

𝑻𝒆𝒏-𝒇𝒍𝒂𝒔𝒉

Obsidian 自定义主题开发指南

自定义主题可以完全掌控 Obsidian 的外观和体验。

准备工作

安装开发工具

安装 Node.js
安装 Obsidian CLI:
npm install -g @obxd/obsidian-cli

创建项目

obsidian themes new my-theme

主题结构

my-theme/
├── styles.css          # 主要样式文件
├── manifest.json       # 主题信息
├── theme.json          # 默认设置
├── preview.png         # 预览图
└── README.md           # 说明文档

核心概念

常用 CSS 选择器

/* Markdown 内容 */
.markdown-source-view {
  /* 修改编辑器样式 */
}

/* 阅读视图 */
.markdown-preview-view {
  /* 修改阅读样式 */
}

/* 文件列表 */
.side-dock-settings {
  /* 侧边栏 */
}

/* 设置页面 */
.settings-container {
  /* 设置面板 */
}

常用类名

/* 标题 */
h1, h2, h3, h4, h5, h6

/* 段落 */
p

/* 代码块 */
.cm-s-obsidian pre
.cm-s-obsidian code

/* 链接 */
a

/* 图片 */
img

/* 列表 */
ul, ol, li

/* 表格 */
table

/* 代码块 */
pre

/* 引用 */
blockquote

主题变量

使用主题变量

.theme-light {
  --background-primary: #ffffff;
  --text-normal: #242424;
}

.theme-dark {
  --background-primary: #1e1e1e;
  --text-normal: #d4d4d4;
}

可用变量列表

--background-primary         /* 主背景色 */
--background-secondary       /* 次要背景色 */
--background-modifier-border /* 边框颜色 */
--text-normal                /* 正常文字颜色 */
--text-accent                /* 强调文字颜色 */
--interactive-normal         /* 普通交互元素 */
--interactive-hover          /* 悬停交互元素 */
--interactive-active         /* 激活交互元素 */
--interactive-success        /* 成功状态 */
--interactive-error          /* 错误状态 */

实战：创建极简主题

styles.css

/* 基础设置 */
.markdown-source-view {
  --font-editor: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 深色模式 */
.theme-dark {
  --background-primary: #1a1a1a;
  --background-secondary: #2a2a2a;
  --text-normal: #e0e0e0;
}

/* 浅色模式 */
.theme-light {
  --background-primary: #ffffff;
  --background-secondary: #f5f5f5;
  --text-normal: #333333;
}

/* 代码块美化 */
.markdown-preview-view pre {
  background: #282c34;
  border-radius: 8px;
  padding: 16px;
}

/* 链接样式 */
a {
  color: var(--interactive-accent);
  text-decoration: none;
}

/* 水平线 */
hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
}

/* 表格样式 */
table {
  border-collapse: collapse;
  width: 100%;
}

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

manifest.json

{
  "name": "My Minimal Theme",
  "id": "my-minimal-theme",
  "version": "1.0.0",
  "minAppVersion": "0.15.0",
  "description": "A minimal, clean theme for Obsidian",
  "author": "Your Name",
  "isDesktopOnly": false
}

自定义颜色

定义颜色

:root {
  --my-accent-color: #6366f1;
}

.theme-dark {
  --background-primary: #121212;
  --my-accent-color: #818cf8;
}

.theme-light {
  --background-primary: #ffffff;
  --my-accent-color: #4f46e5;
}

使用自定义颜色

/* 按钮颜色 */
.plugin-button {
  background: var(--my-accent-color);
}

/* 强调色 */
h1, h2, h3 {
  color: var(--my-accent-color);
}

交互效果

按钮悬停效果

.mod-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

平滑滚动

html {
  scroll-behavior: smooth;
}

过渡动画

.transition-all {
  transition: all 0.3s ease;
}

.transition-colors {
  transition: background-color 0.2s, color 0.2s;
}

调试技巧

实时预览

obsidian themes watch

启用开发模式

/* 在 styles.css 中 */
/* @import url("debug-classes.css"); */

使用浏览器开发者工具

启动开发服务器
打开 Obsidian
使用浏览器开发者工具检查元素

发布主题

打包主题

obsidian themes pack my-theme

发布到社区

在 Obsidian 社区插件仓库上传主题
填写主题信息
上传预览图和说明文档

进阶技巧

响应式设计

@media (max-width: 768px) {
  .sidebar {
    width: 100% !important;
  }
}

动画效果

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fade-in 0.5s ease;
}

字体优化

/* 避免字体闪烁 */
body {
  font-family: system-ui, -apple-system, sans-serif;
}

/* 优化等宽字体 */
code, pre, .inline-code {
  font-family: 'Fira Code', 'Consolas', monospace;
}