Obsidian 样式 - 多彩便笺背景

效果

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

Obsidian 样式 - 多彩便笺背景--效果

QuickAdd Macro 脚本

const activeFile = app.workspace.getActiveFile();
const choices = ["默认视图", "YellowNote", "GreenNote", "PinkNote","PurpleNote","BlueNote","BlackNote"];
module.exports = async (params) => {
  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("运行完成");
};

Snippets CSS

.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);
}