Appearance & Color Configuration for Daylight Calendar Card

Customize calendar colors, event color mode, header style, background images, font sizes, and dark mode for the Daylight Calendar Card.

The Daylight Calendar Card gives you extensive control over its visual presentation. You can assign distinct colors to each calendar, choose how those colors are applied to event chips, style the header independently from the card body, and even set a background image — all through YAML configuration.

Calendar Colors

colors · map · default: "[]"

A map of calendar entity IDs to hex color strings. Each calendar’s events are rendered in the color you specify. If you omit a calendar, the card assigns it an automatic color from its built-in palette.

colors:
  calendar.family: "#4CAF50"
  calendar.work: "#2196F3"
  calendar.holidays_in_united_states: "#FF5722"

event_font_colors · map · default: "[]"

A map of calendar entity IDs to hex color strings for the text rendered on event chips. Use this when the auto-contrast logic does not produce readable text against your chosen calendar color.

event_font_colors:
  calendar.family: "#ffffff"
  calendar.work: "#ffffff"

Event Color Modes

event_color_mode · string · default: "classic"

Controls how the calendar color is applied to event chips. Three modes are available:

• classic — the entire event chip background is filled with the calendar color, matching the look of most traditional calendar applications
• left-neutral — the chip has a neutral background with a colored vertical bar on the left edge; good for maintaining readability with dark colors
• left-tint — the chip has a lightly tinted background (derived from the calendar color) with a colored left bar

event_neutral_background · string · default: "#F8F3E9"

The hex background color applied to event chips when event_color_mode is left-neutral. Only this option — not colors — affects the chip background in this mode.

event_tint_opacity · number · default: "80"

A value from 0 to 100 controlling how strongly the calendar color tints the chip background in left-tint mode. 0 produces a fully neutral background; 100 produces a fully saturated background.

event_color_bar_width · number · default: "18"

The width in pixels of the colored left border applied to event chips in left-neutral and left-tint modes.

Header Appearance

header_color · string · default: "var(--primary-color)"

The background color of the card header. Accepts a hex string (e.g. #1A1A2E), a CSS variable (e.g. var(--primary-color)), or the special value match-card-background to make the header blend seamlessly with the card body.

header_text_color · string

The color of text and icon elements inside the header. Accepts a hex string. When omitted, the card calculates a contrasting color automatically based on header_color.

header_background_opacity · number · default: "0"

The transparency of the header background, from 0 (fully opaque) to 100 (fully transparent). Values between these extremes produce a semi-transparent header. Useful when you set a background image and want the image to show through the header.

Card Background

background_opacity · number · default: "0"

The transparency of the card body background, from 0 (fully opaque) to 100 (fully transparent). Setting this to 100 lets the underlying dashboard wallpaper or HA theme background show through.

background_image_url · string

A URL pointing to an image to display behind the calendar grid. Local Home Assistant paths (e.g. /local/calendar-bg.jpg) and remote URLs are both supported.

background_image_size · string · default: "cover"

CSS background-size value for the background image. Options: cover, contain, auto.

background_image_position · string · default: "center"

CSS background-position value for the background image. Options: center, top, bottom, left, right.

background_image_repeat · string · default: "no-repeat"

CSS background-repeat value for the background image. Options: no-repeat, repeat, repeat-x, repeat-y.

Layout

compact_height · boolean · default: "false"

Make the card fit precisely into its parent container’s height rather than expanding to fill its content. Useful in fixed-height grid layouts or when the card is placed inside a vertical stack with constrained space.

compact_width · boolean · default: "false"

Reduce internal horizontal padding. Use this when the card is placed in a narrow column and you want to maximise the space available for the calendar grid itself.

height_scale · number · default: "1.0"

A multiplier applied to the hour-row height in the Schedule view (also known as week-standard). A value of 1.5 makes each hour slot 50% taller; 0.75 compresses them. Does not affect Month, Week Compact, or Agenda views.

Light/Dark Mode

color_scheme · string · default: "auto"

Controls whether the card renders in light or dark mode. auto follows the Home Assistant theme, light always uses the light appearance, and dark always uses the dark appearance regardless of the theme.

Today Highlight

today_background_color · string

A simple hex color applied as the background of today’s cell in all views. For more control, use today_style instead.

today_style · object

An advanced object for fine-grained styling of today’s cell. You can set any combination of the following keys:

Key	Type	Description
background_color	hex string	Background fill color
opacity	0–1	Opacity of the background fill
border_color	hex string	Color of the cell border
border_width	number	Width of the cell border in pixels

When both today_background_color and today_style are set, today_style takes precedence.

today_style:
  background_color: "#1A1A2E"
  opacity: 0.4
  border_color: "#E94560"
  border_width: 2

Example

The configuration below creates a dark-themed card with a background image, semi-transparent header, and custom event colors:

type: custom:daylight-calendar-card
title: Family Calendar
entities:
  - calendar.family
  - calendar.work
color_scheme: dark
colors:
  calendar.family: "#4CAF50"
  calendar.work: "#2196F3"
event_color_mode: left-tint
event_tint_opacity: 60
event_color_bar_width: 14
header_color: "#0D0D1A"
header_text_color: "#E0E0E0"
header_background_opacity: 20
background_image_url: /local/dark-calendar-bg.jpg
background_image_size: cover
background_image_position: center
background_opacity: 85
compact_height: false
height_scale: 1.2
today_style:
  background_color: "#E94560"
  opacity: 0.25
  border_color: "#E94560"
  border_width: 2