svelte5plus·calendar GitHub

Theming & Dark Mode

Every color, radius and font in the calendar is a CSS custom property on the .s5c root — restyle it from plain CSS without touching the component.

Built-in themes

  • theme="light" — the default.
  • theme="dark" — a tuned dark palette (lighter event hues for contrast).
  • theme="auto" — follows the OS prefers-color-scheme.
Dark mode & brand variables

Sep 6 – 12, 2026

Sun
6
Mon
7
Tue
8
Wed
9
Thu
10
Fri
11
Sat
12
All-day
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
12 AM

Overriding variables

/* 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;
}

Key variables

VariableControls
--s5c-accentPrimary accent: active view button, today, selection tint.
--s5c-bg / --s5c-bg-subtle / --s5c-bg-hoverSurfaces and hover states.
--s5c-border / --s5c-border-strongGrid lines and control borders.
--s5c-text / --s5c-text-muted / --s5c-text-faintText hierarchy.
--s5c-today-bg / --s5c-today-num-bgToday column tint and the round date badge.
--s5c-now-colorThe current-time line.
--s5c-red … --s5c-pinkThe 10 palette colors used by events.
--s5c-font / --s5c-font-sizeTypography.
--s5c-radius / --s5c-event-radiusCorner radii for chrome and events.
Scoping — set variables on any ancestor (or on .s5c itself via the class prop) to theme calendars per-section, per-page or per-tenant.