【Obsidian样式】多彩便笺背景

参考双语文档的中英文视图切换显示的方法,用 cssclasses+quickadd 来控制笔记样式,采用 Obsidian 自带的 cssclasses 属性,设置对应 Snippets,通过 QuickAdd 脚本及 Commander 插件设置按钮,实现以下效果,模拟切换笔记背景的便笺:
2024-04-16_Obsidian样式-多彩便笺背景_IMG-1

QuickAdd Macro脚本
const activeFile = app.workspace.getActiveFile();
const choices = ["默认视图", "YellowNote", "GreenNote", "PinkNote","PurpleNote","BlueNote","BlackNote"];

const quickaddApi = app.plugins.plugins.quickadd.api;
const choice = await quickaddApi.suggester(choices, choices);

await app.fileManager.processFrontMatter(activeFile, fm => {
if (!fm["cssclasses"]) fm["cssclasses"] = [];
// 清除所有选项
fm["cssclasses"] = fm["cssclasses"].filter(item => !choices.includes(item));

// 根据选择的选项添加对应的视图
for (let i = 1; i < choices.length; i++) {
  if (choice === choices[i]) {
	fm["cssclasses"].push(choices[i]);
	return;
  }
}
});
console.log("运行完成");
Obsidian Snippets
.view-content:has(> .YellowNote) {
  --background-primary: rgb(255, 247, 209) !important;
}

.view-content:has(> .GreenNote) {
  --background-primary: rgb(228, 249, 224);
}

.view-content:has(> .PinkNote) {
  --background-primary: rgb(255, 228, 241);
}

.view-content:has(> .PurpleNote) {
  --background-primary: rgb(242, 230, 255);
}

.view-content:has(> .BlueNote) {
  --background-primary: rgb(226, 241, 255);
}

.view-content:has(> .BlackNote) {
  --background-primary: rgb(105, 105, 105);
  --text-faint: rgb(255, 255, 255);
  --text-normal: rgb(255, 255, 255);
  --checklist-done-color: rgb(255, 255, 255);
}
3 个赞

做个一个小库,可以体验一下:
PixPin_2024-04-20_18-32-35