Theming
Theme-agnostic by design: drop the calendar onto any colour scheme with just two colours. Every colour, size and radius is a scoped --cal-* custom property set on the host element only — no global leakage. The palette is OKLCH-derived and AA-contrast-safe in both light and dark, with zero hard-coded brand colours.
Two colours
baseColor (a neutral anchor) and accentColor (the interactive colour) derive the whole palette; themeMode flips the surface between light and dark. Pick two colours below and watch the calendar re-theme live.
<!-- Two colours drive the whole palette; themeMode flips light/dark. -->
<cal-month-view
[events]="events"
[viewDate]="viewDate"
[today]="today"
[baseColor]="base()"
[accentColor]="accent()"
[themeMode]="mode()"
/>Status colours
Pass a statusColors map (status key → hex) and the library derives an event / -ink / -soft triplet per status. Events render in their status colour, kept legible against the surface in both modes.
// Status key → hex. Each colour runs through the accent pipeline to emit a
// derived event / -ink / -soft triplet, contrast-safe in both modes.
statusColors: Record<string, string> = {
scheduled: '#2563eb',
active: '#16a34a',
done: '#7c3aed',
cancelled: '#dc2626',
};CSS tokens
Component CSS reads only var(--cal-*) and hard-codes no colours. The high-level inputs cover ~90% of theming; for the long tail, override any single token on the host element.
| Token | Purpose |
|---|---|
--cal-bg | Surface background |
--cal-ink | Primary text |
--cal-surface | Raised surface |
--cal-grid-line | Grid borders |
--cal-accent | Interactive accent |
--cal-event-<key> / -ink / -soft | Per-status event colours (fill, text, soft background) |
--cal-radius-sm | Corner radius |
/* Any single token is host-overridable for the long tail. */
angular-calendar,
cal-month-view {
--cal-accent: #0d9488;
}Headless theming
deriveTheme and applyTheme let consumers derive and apply the same tokens themselves — pure, SSR-safe and OKLCH-based, guaranteeing AA contrast in both modes. Useful for theming outside a component, or precomputing tokens on the server.
import { deriveTheme, applyTheme } from '@ascentsparksoftware/angular-calendar';
// Pure, SSR-safe, OKLCH-based; guarantees AA contrast in both modes.
const tokens = deriveTheme('#0f172a', '#ff4806', 'dark', { scheduled: '#2563eb' });
applyTheme(hostEl, tokens); // writes scoped --cal-* on hostEl