主题

概述

有两种方式自定义主题：

• 代码片段
• 主题包

代码片段

1. 打开 设置 - 外观 ，点击 代码片段设置，选中 CSS 页签
2. 填入标题
3. 根据主题和 theme.css 中的变量参照如下写法进行编码后填入代码片段中

   html[data-light-theme="daylight"][data-theme-mode="light"] {
       --b3-theme-primary: red;
   }
   
   html[data-light-theme="daylight"][data-theme-mode="dark"] {
       --b3-theme-primary: blue;
   }

4. 开启该代码片段
5. 点击确定按钮

主题包

主题包可以从社区集市下载或者手动安装。

社区集市

• 在 设置 - 外观 - 集市 - 主题 中在线浏览社区开发者贡献的主题
• 选择所需主题在线安装或者更新

手动安装

1. 从某处获取主题并解压
2. 设置 - 外观 - 主题 - 打开主题文件夹
3. 将主题拷贝到该文件夹中
4. 重启后在 设置 - 外观 - 主题 中选择所需主题

开发

步骤

1. 为你的主题取一个好听的名字，如 alice
2. 设置 - 外观 - 主题 - 打开主题文件夹
3. 在打开的文件夹中新建文件夹 alice，在 alice 中新建 theme.css 和 theme.json 文件，具体示例请参考 github repo: siyuan-note/theme-sample
4. 打开 theme.css 文件，开启你的编码旅程
5. 重启后在 设置 - 外观 - 主题 中选择安装好的主题

编码

• 熟悉 CSS 基础知识

• 修改 :root {…} 中的配色。⚠️ 不可删除官方中原有的变量项

• 按照图中 1-4 步不断进行修改

  ![custom-theme1.png](assets/custom-theme1-20210512172221-x541iq1.png)

• 将修改后的内容复制贴入 theme.css 中并保存

• 在 Network 中勾选 Disable cache 后运行 window.location.reload() 以查看最终效果

  ![custom-theme2.png](assets/custom-theme2-20210512172239-pcnzes0.png)

上架主题集市

请参考社区集市仓库。