theming

Light, dark or the system's. Your own colors over the library's, or no library styles at all.

##theme

'light' (the default), 'dark', or 'auto', which follows the operating system with prefers-color-scheme and ships no JavaScript. A signal changes it at runtime:

Colors change in 150 ms, and at once with prefers-reduced-motion.

##your own styles

Every rule of the stylesheet goes through :where(), so they weigh nothing: a rule of yours on a part or a data attribute wins, without !important. A class on the root through containerProps keeps it to one calendar.

##unstyled

unstyled leaves the calendar without the library's styles: the markup, the keyboard and the attributes stay. Style it through the props of its parts and its data attributes. The chevrons are 1em wide, so the text around sizes them.

<Calendar
  unstyled
  containerProps={{ class: 'calendar' }}
  dayButtonProps={{ class: 'day' }}
/>

For markup of your own, not only styles, use the headless parts.

##right to left

In a right-to-left page, or with dir="rtl" on the calendar, the chevrons turn around and the left and right arrow keys swap, so they move the way they point.