Styling

From version 9 onward, the card delegates fine-grained styling to card-mod rather than exposing one config key per color. Two patterns work out of the box.

Whole-card styling with card_mod

For the common case — changing the background and text color of the entire card — a single ha-card rule is enough. The calendar grid, event summaries, planner rows, weekday headers, month label, and modal will all inherit the new text color.

type: custom:atomic-calendar-revive
entities:
  - calendar.family
defaultMode: Calendar
card_mod:
  style: |
    ha-card {
      background-color: #1e293b;
      color: #f1f5f9;
      border-radius: 12px;
      padding: 12px;
    }

This pattern works the same in Event, Calendar, Planner and Inline modes.

Granular styling with custom properties

When different parts of the card need different colors, set the matching custom properties on ha-card instead. Inner elements pick these up through the shadow DOM cascade.

Text & calendar grid

Custom property	Affects
--cal-name-color	Card name / title in the header
--cal-weekday-color	Weekday column headers in Calendar mode (Mo, Tu, We…)
--cal-day-color	Day numbers inside the grid cells
--cal-date-color	Month/year label and the prev/next arrows
--cal-event-title-color	Event titles in the Calendar-mode day summary
--cal-description-color	Event description text
--cal-description-size	Event description font size (e.g. 80%)
--cal-grid-color	Calendar grid borders
--cal-active-event-bg	Background of the day cell you click into
--cal-weekend-sat-bg	Saturday column background overlay
--cal-weekend-sun-bg	Sunday column background overlay

Event row

Custom property	Affects
--cal-event-bar-color	“Next event” separator bar (when showCurrentEventLine is on)
--cal-progress-bar	Foreground of the running-event progress bar
--cal-progress-bar-bg	Background track of the running-event progress bar
--cal-progress-shadow	Box-shadow of the progress element (e.g. none to remove)
--cal-location-icon-color	Color of the map-pin icon next to event locations
--cal-location-link-size	Font size of the event location link (e.g. 90%)

Loader, modal & layout

Custom property	Affects
--cal-loader-track-color	Spinner track color (visible while events are loading)
--cal-loader-color	Spinner active arc color
--cal-modal-overlay-bg	Backdrop behind the event-detail modal
--cal-modal-bg	Modal body background
--cal-modal-border-color	Modal border
--cal-modal-color	Modal text color
--cal-modal-close-color	Modal close (×) button color
--cal-modal-close-hover-color	Modal close button color on hover/focus
--cal-host-height	How the card sizes against its parent. Default 100% (fills the Lovelace grid cell). Set to auto to shrink-wrap the content.

Example

type: custom:atomic-calendar-revive
entities:
  - calendar.family
defaultMode: Calendar
card_mod:
  style: |
    ha-card {
      --cal-weekday-color: var(--accent-color);
      --cal-day-color: #f1f5f9;
      --cal-grid-color: rgba(255, 255, 255, 0.1);
      --cal-active-event-bg: rgba(255, 200, 0, 0.25);
      --cal-weekend-sat-bg: rgba(255, 255, 255, 0.02);
      --cal-weekend-sun-bg: rgba(255, 255, 255, 0.08);
      --cal-host-height: auto;
    }

Mixing both patterns is fine: a blanket color rule for the broad strokes and a handful of --cal-* overrides for the elements that need to stand out.

Semantic classes on event titles

Every .event-title element carries extra classes that describe the event, so you can write card_mod rules that depend on event state without DOM-hunting:

Class	Applied when
.event-title-fullday	The event is an all-day event (Event and Planner modes). In Calendar mode the day-summary container uses .summary-fullday-div-accepted or .summary-fullday-div-declined.
.running	The event is currently in progress (startDateTime ≤ now < endDateTime).
.recurring	The event is part of a recurring series (Google Calendar recurringEventId is set).
.Event / .Calendar / .Planner	The view mode rendering this title.
.cal-<slug>	The slugified calendar entity. calendar.family_main becomes .cal-family-main; non-alphanumeric chars collapse to dashes, everything is lowercased.

Example — give all-day birthdays a banner background, fade past recurring events, and tint a specific calendar:

card_mod:
  style: |
    .event-title.event-title-fullday {
      background: rgba(255, 165, 0, 0.18);
      padding: 2px 6px;
      border-radius: 4px;
    }
    .event-title.recurring {
      font-style: italic;
    }
    .event-title.cal-family {
      color: var(--accent-color);
    }

Targeting other elements

The card uses descriptive CSS classes throughout (.calDay, .day-number, .currentDay, .summary-event-div, .bullet-event-div-accepted etc.) so anything not covered by the custom properties above can be targeted with regular card_mod selectors. The video below walks through finding the right class with browser DevTools.

Note

The video predates the --cal-* custom properties documented above and demonstrates only the class-hunting approach. That technique is still valid — and necessary for elements that don’t have a dedicated custom property — but for most styling needs you’ll get a cleaner result by setting the relevant --cal-* variable first.

If a class you need isn’t exposed, please open a feature request.