svelte5plus·calendar GitHub

主题与暗色模式

日历中的每个颜色、圆角和字体都是 .s5c 根节点上的 CSS 自定义属性——纯 CSS 即可换肤，无需改动组件。

内置主题

  • theme="light" — 默认。
  • theme="dark" — 精调的暗色调色板（事件颜色提亮以保证对比度）。
  • theme="auto" — 跟随操作系统的 prefers-color-scheme。
暗色模式与品牌变量

2026/9/7 – 2026/9/13

周一
7
周二
8
周三
9
周四
10
周五
11
周六
12
周日
13
全天
1时
2时
3时
4时
5时
6时
7时
8时
9时
10时
11时
12时
13时
14时
15时
16时
17时
18时
19时
20时
21时
22时
23时
0时

覆盖变量

/* Rebrand the calendar from plain CSS — no build step required. */
.my-app .s5c {
  --s5c-accent: #e4572e;          /* buttons, today, selection            */
  --s5c-today-num-bg: #e4572e;    /* the round "today" badge              */
  --s5c-now-color: #e4572e;       /* current-time line                    */
  --s5c-font: 'Inter', sans-serif;
  --s5c-radius: 12px;             /* toolbar buttons, popovers            */
  --s5c-event-radius: 8px;        /* event pills & blocks                 */
  --s5c-border: #e2e2e2;
  --s5c-bg-subtle: #fafafa;
}

关键变量

变量控制
--s5c-accent主强调色：激活的视图按钮、今天、框选高亮。
--s5c-bg / --s5c-bg-subtle / --s5c-bg-hover背景与悬停态。
--s5c-border / --s5c-border-strong网格线与控件边框。
--s5c-text / --s5c-text-muted / --s5c-text-faint文字层级。
--s5c-today-bg / --s5c-today-num-bg今日列底色与圆形日期徽标。
--s5c-now-color当前时间线。
--s5c-red … --s5c-pink事件使用的 10 个调色板颜色。
--s5c-font / --s5c-font-size字体排印。
--s5c-radius / --s5c-event-radius组件与事件的圆角。
作用域 — 把变量设置在任意祖先元素上（或通过 class 属性作用到 .s5c 本身），即可按区块、页面甚至租户维度定制主题。