Expose calendar color as a CSS custom property (--cal-color)

[pierrefardel]

Motivation

Kronolith sets each calendar's color directly as an inline background-color
(and color) on events, the legend and sidebar entries. That inline value is
not reusable from CSS: a theme cannot derive tints, tones or borders from it,
because there is no way to read an inline background-color back into a
color-mix() / calc() expression.

As a result, themes are stuck with the flat, fully-saturated calendar color as
the event background. They cannot implement the now-common "event pill" look
(light tinted background + darker same-hue text + colored accent) used by Google
Calendar, Outlook Web and most modern calendar UIs.

Change

In addition to the existing inline background-color/color, also expose the
raw calendar color as a CSS custom property --cal-color on the same elements:
events (month / week / day / agenda), the print legend, and sidebar
calendar/tasklist entries — including on live recolor (saveCalendarCallback),
so themes relying on it update immediately without a reload.

div.style.setProperty('--cal-color', calendarColor);

Why this is safe / non-breaking

• It only adds a custom property; the existing background-color/color
  inline styles are untouched. Default rendering is byte-for-byte identical.

• No existing theme references --cal-color, so nothing changes visually
  anywhere unless a theme opts in.

• It gives themes a clean hook to style events by color, e.g.:

  .kronolith-event {
    background-color: color-mix(in srgb, var(--cal-color) 14%, white);
    color: color-mix(in srgb, var(--cal-color) 72%, black);
    border-left: 3px solid var(--cal-color);
  }

Example

Below: the UPJV theme using --cal-color to render events, the legend and the
sidebar as tinted pills — impossible today because the color is locked in an
inline background-color. (Screenshot added in a comment.)

[pierrefardel]

[Copilot]

Pull request overview

This PR adds a theming hook by exposing each calendar’s raw background color as a CSS custom property (--cal-color) on the same UI elements that already receive inline background-color/color styles. This enables themes to derive tints/tones/borders from the calendar color (e.g., via color-mix()), without changing the default rendering.

Changes:

• Set --cal-color on sidebar calendar/tasklist rows when inserting them into the list.
• Set --cal-color on print legend entries when adding legend items.
• Set --cal-color on event elements across views (day/week/workweek, month, agenda) and update it during live recolor (saveCalendarCallback).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ralflang]

Thank you, I like that.