构建一个主题

翻译自官方开发文档Build a theme

在此指南中，您可以学到如何开始开发一个 Obsdian 的主题。主题允许您使用 CSS 自定义 Obsidian 的外观

您将学到什么

当您完成此指南，您可以：

• 学会设置开发 Obsidian 主题的环境
• 使用 CSS变量改变 Obsidian 的外观
• 创建一个支持亮色模式和暗色模式的主题

前置条件

To complete this tutorial, you'll need:
为完成此指南，您需要：

• 在你的设备上安装Git
• 一个代码编辑器，比如 Visual Studio Code.

第一步：下载示例主题

在这一步中，你会下载一个示例主题到你的仓库.obsidian 文件夹中的themes文件夹，这样 Obsidian 可以找到它。

在此指南中你会用到的示例主题在 GitHub 仓库可以找到

1. 打开一个终端窗口，并将项目目录切换到themes文件夹

   cd path/to/vault/.obsidian/themes
   

2. 用 Git 克隆示例主题

   git clone https://github.com/obsidianmd/obsidian-sample-theme.git "Sample Theme"
   

第二步：激活主题

1. 在Obsidian中打开设置
2. I在侧边列表中，选择外观
3. 在主题右侧，在下拉菜单中选择示例主题

你已经可以激活示例主题。下一步，我们将对它进行一些更改

第三步：更新 manifest 清单

在这一步中，你可以通过更新 manifest 清单manifest.json来对主题进行重命名。manifest 清单包含了关于你的主题的信息，如名字和描述。

1. Open manifest.json in your code editor. 在你的代码编辑器中打开
2. Change name to a human-friendly name, such as "Disco Lights". 将修改为一个易于理解的，比如：
3. Rename the theme directory under themes to the same name. The name of the theme directory must exactly match the name property in manifest.json.将下的主题文件夹重命名为同一个名称。主题文件夹的名称必须与中的属性精准匹配

	mv "Sample Theme" "Disco Lights"

1. Restart Obsidian to load the new changes to the manifest.重启以加载清单中的新更改

Go back to Settings → Appearance → Themes and notice that the name of the theme has been changed.留意主题的名称已经变更

Remember to restart Obsidian whenever you make changes to manifest.json.无论何时，记得变更后重启

第4步：改变字体

Obsidian uses CSS variables to style the user interface. In this step, you'll use a CSS variable to change the font in the editor.使用来美化用户界面。在这一步骤，你会使用 CSS 变量来改变编辑器里的字体

1. Create a new note, for example "Theme Development".创建一条笔记，如“主题开发”

2. Enter the following text into the note:将下面的文字输入到笔记中：

   Themes let you make [Obsidian](https://obsidian.md) look the way **you** want it.
   

3. In theme.css, add the following:在中，添加如下内容：

   body {
     --font-text-theme: Georgia, serif;
   }
   

The editor displays the note using the font you defined.编辑器会用你刚定义的字体显示此条笔记

第五步：改变背景颜色

Themes can support both light and dark color schemes. Define your CSS variables under .theme-dark or .theme-light.主题可以同时支持亮色系和暗色系。在或下定义你的 CSS 变量

1. In theme.css, add the following:在中，添加如下：

   .theme-dark {
     --background-primary: #18004F;
     --background-secondary: #220070;
   }
   
   .theme-light {
     --background-primary: #ECE4FF;
     --background-secondary: #D9C9FF;
   }
   

2. In Obsidian, open Settings.在，打开：

3. Under Appearance, toggle Base color scheme between "Light" and "Dark".在外观下，切换

You'll see that Obsidian picks the colors based on the color scheme you've selected. Try changing the colors to red, green, or blue for a more dramatic change.你会看到按你选择的色系挑选颜色。尝试将颜色改为，或更引人注目的变化。

第 6 步：更改输入悬停边框的颜色

当您希望主题中的每个子元素都可以访问变量时， :root 通常会使用选择器。这个选择器通常填充了插件变量。

下面是一个示例来说明其用法：

:root {
--input-focus-border-color: Highlight;
--input-focus-outline: 1px solid Canvas;
--input-unfocused-border-color: transparent;
--input-disabled-border-color: transparent;
--input-hover-border-color: black;
/* Default Input Variables for Root /
/ Root的默认输入变量 */
}

现在，让我们修改 CSS 中的悬停边框颜色：

:root {
   --input-hover-border-color: red;
/* Change from Black to Red */
}

在此更新中，当您将鼠标悬停在任何输入字段上时，边框颜色将变为亮红色。

第 7 步：发现正在使用的 CSS 变量

Obsidian 公开了 400 多个不同的 CSS 变量，用于自定义用户界面的不同部分。在此步骤中，您将找到用于更改功能区背景的 CSS 变量。

1. 在 Obsidian 中，按Ctrl+Shift+I（或在 macOS 上按Cmd+Option+I）打开开发人员工具。
2. 打开Sources选项卡。
3. 在Page→top→ obsidian.md下，选择app.css。
4. 滚动到顶部 app.css 以查找所有可用的 CSS 变量。
5. Search for variables related to the ribbon by pressing Ctrl+F (or Cmd+F on macOS) and typing " --ribbon-". Notice the two blank spaces, which return the definitions rather than their uses.
   通过按 Ctrl + F （或macOS 上的 Cmd  + F ）并键入“ --ribbon-”来搜索与功能区相关的变量。请注意两个空格，它们返回定义而不是它们的用法。

One of the results is --ribbon-background, which sounds promising. To be sure, you can also inspect the HTML to find the CSS variable used by a specific element.
其中一个结果是 --ribbon-background ，这听起来很有希望。为了进一步确认，您还可以检查 HTML 以查找特定元素使用的 CSS 变量。

1. In the upper-left corner of the Developer Tool, select the icon that looks like a cursor on top of a rectangle.
   在开发人员工具的左上角，选择看起来像矩形顶部光标的图标。
2. Select the middle of the ribbon on the left side of the Obsidian window.
   选择“黑曜石”窗口左侧功能区的中间。

In the Styles tab, on the right side of the Developer Tools, you can now see the CSS that is applied to the element you selected, such as background-color: var(--ribbon-background).
在“样式”选项卡的“开发人员工具”右侧，现在可以看到应用于所选元素的 CSS，例如 background-color: var(--ribbon-background) .

Now that you know --ribbon-background controls the ribbon background color, add the following to theme.css:
现在您已经知道了， --ribbon-background 控制功能区背景颜色，请将以下内容添加到 theme.css ：

body {
  --ribbon-background: magenta;
}

总结

在本教程中，您已经构建了第一个黑曜石主题。您已经修改了主题并重新加载了它，以反映黑曜石内部的变化。您还了解了如何找到 CSS 变量来设置用户界面特定部分的样式。

Links to this page 链接到此页面

关于样式

Build a Publish theme构建一个 Publish 主题

首页