Theming

The calendar reads its colors, sizes and fonts from --vfc-* custom properties. Set one on the calendar, on any ancestor, or on :root. Pick a theme below and watch the tokens change.

<div class="my-calendar">
  <FunctionalCalendar v-model="value" is-date-range can-clear-range />
</div>

<style>
.my-calendar {
  --vfc-primary: #e11d48;
  --vfc-on-primary: #ffffff;
}
</style>

Where to set tokens

:root {
  --vfc-radius: 4px;
}

.booking-form {
  --vfc-primary: #0d9488;
  --vfc-on-primary: #ffffff;
}

You can also set them on one calendar with a style or class attribute. Both land on the root element of the component.

<FunctionalCalendar style="--vfc-primary: #0d9488; --vfc-on-primary: #fff" is-date-picker />

A token on :root applies in light and dark. To change a value in dark mode only, scope it to .vfc-dark:

.vfc-dark {
  --vfc-primary: #2dd4bf;
  --vfc-on-primary: #042f2e;
}

Dark mode

isDark adds the vfc-dark class to the calendar and its input. The dark block changes colors and shadows only. Radius, spacing, fonts, --vfc-day-size, --vfc-header-height and --vfc-transition keep their values. --vfc-today and --vfc-focus default to --vfc-primary, so they follow the dark primary.

To follow your site theme, bind isDark:

<FunctionalCalendar :is-dark="colorMode.value === 'dark'" is-date-picker />

isDark is watched, so the calendar follows the theme without a re-key.

Color tokens

Shadow tokens

Shape, spacing and type tokens

These are the same in light and dark.

Derived colors

Where the browser supports color-mix(), eight tokens derive from three base colors, so changing --vfc-primary, --vfc-bg or --vfc-text recolors the whole calendar.

In dark mode, --vfc-bg-raised also derives, as --vfc-text 5% over --vfc-bg.

Browsers without color-mix

Safari below 16.2 and other browsers without color-mix() use the fixed values from the tables above. They match the default colors only. If you change --vfc-primary, --vfc-bg or --vfc-text, override the derived tokens together:

.my-calendar {
  --vfc-primary: #0d9488;
  --vfc-primary-hover: #0f766e;
  --vfc-range: #ccfbf1;
  --vfc-range-strong: #99f6e4;
  --vfc-text-muted: #5b6770;
  --vfc-text-disabled: #b3bcc2;
  --vfc-border: #e2e8ec;
  --vfc-border-strong: #7b8a94;
  --vfc-hover: #f0f4f6;
}

Add --vfc-bg-raised under .vfc-dark as well. --vfc-range-mix has no effect in these browsers.

Class overrides

The vfc-* class names are the same as in 2.x, so CSS overrides written for 2.x keep working. Tokens and class rules mix freely.