Obsidian Calendar Plugin 周末背景色样式优化指南

在 Obsidian 日历插件中，许多用户希望为周末日期添加背景色以增强视觉区分度。本文将详细介绍如何实现这一效果，并进一步优化样式使其呈现为无圆角的矩形区域。

基础周末背景色设置

Obsidian 日历插件提供了两种方式来设置周末背景色：

1. 通过 CSS 变量方式：

#calendar-container {
  --color-background-weekend: #eeeeee;
}

2. 通过直接选择周末类：

#calendar-container .weekend {
  background-color: var(--background-primary-alt);
}

这两种方法都能实现周末背景色的设置，但默认情况下会保留圆角效果，这可能不符合某些用户的审美需求。

圆角问题分析与解决

圆角效果通常由主题样式引起（如 Minimal 主题）。要消除周末日期的圆角，使其呈现为整齐的矩形区域，可以使用以下 CSS 解决方案：

/* 移除日历表格中最后两列的圆角 */
#calendar-container tr td:nth-last-child(2),
#calendar-container tr td:last-child {
  border-radius: 0;
}

技术说明：

• 此选择器针对表格行的倒数第二个和最后一个单元格
• border-radius: 0 显式移除圆角效果
• 如果您的周起始日不是周一，可能需要调整选择器

今日日期样式优化

许多用户反映默认的"今日"标记不够醒目。以下是增强今日日期视觉效果的推荐样式：

#calendar-container .today {
  color: var(--background-primary);
  background-color: var(--interactive-accent);
  font-weight: 600;
}

#calendar-container .today .dot {
  fill: var(--interactive-accent);
}

样式整合建议

为了获得最佳视觉效果，建议将上述样式整合使用：

/* 周末样式 */
#calendar-container .weekend {
  background-color: var(--background-primary-alt);
}

/* 移除周末圆角 */
#calendar-container tr td:nth-last-child(2),
#calendar-container tr td:last-child {
  border-radius: 0;
}

/* 今日标记增强 */
#calendar-container .today {
  color: var(--background-primary);
  background-color: var(--interactive-accent);
  font-weight: 600;
}

#calendar-container .today .dot {
  fill: var(--interactive-accent);
}

注意事项

1. 这些样式需要添加到 Obsidian 的 CSS 片段中
2. 不同主题可能需要微调颜色变量
3. 如果使用非标准周起始日，选择器可能需要相应调整
4. 建议在修改前备份原始 CSS 文件

通过以上方法，您可以轻松实现周末日期背景色的矩形区域效果，同时增强今日标记的可见性，打造更符合个人偏好的日历视觉体验。