> ## Documentation Index
> Fetch the complete documentation index at: https://super-calendar.afonsojramos.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Colors, typography, dark mode, and business hours.

## Theme tokens

Pass a `Partial<CalendarTheme>` — anything you omit falls back to `defaultTheme`.

```tsx theme={null}
<Calendar
  // ...
  theme={{
    colors: { todayBackground: "#E5484D", nowIndicator: "#E5484D" },
    text: { dayNumber: { fontSize: 24, fontWeight: "800" } },
  }}
/>
```

### Color tokens

Every coloured surface is a token, so the visual touches below are all yours to
restyle. The names are shared by both renderers — the React Native theme nests
them under `colors`, the dom theme (`DomCalendarTheme`) is flat.

| Token | Colors |
| - | - |
| `text` / `textMuted` / `textDisabled` | Day numbers / hour & "+N more" labels / disabled & adjacent-month days |
| `gridLine` | Hour lines, day separators, month-cell borders |
| `surface` | Opaque surface behind the date-picker field and popover |
| `weekendBackground` | Weekend column/cell tint |
| `outsideHoursBackground` | Closed-hours shade (business hours) |
| `hoverBackground` | Hover highlight behind a day (web/mouse only) |
| `todayBackground` / `todayText` | Today badge fill / text |
| `selectedBackground` / `selectedText` | Selected day & range-endpoint badge fill / text |
| `rangeBackground` | The selected-range band |
| `nowIndicator` | Current-time line |
| `eventBackground` / `eventText` | Default event chip fill / text |

Metric tokens cover the sizes: `rangeBandHeight` (the pill strip's height; its
corner radius is half this), the day-badge size/radius, and on dom `cellHeight`
and `fontFamily`. See `CalendarTheme` / `DomCalendarTheme` for the exact types.

The time-grid column header is fully themeable on React Native: `text.dayNumber`
(the day number), `text.columnHeaderWeekday` (the weekday label; include a
`color` to override the muted default), and the `columnHeader` /
`columnHeaderBadge` containers below. Combined with `onPressDateHeader`, this
lets an app restyle the built-in header instead of replacing it via
`renderTimeGridHeader`.

### Container styles (React Native)

Beyond text and colours, the React Native theme takes a `containers` map of
`ViewStyle` overrides for the renderer's container elements — the native
counterpart of the web renderer's per-slot [classes](/guides/styling). Each is
merged onto the built-in style, so you set only what you need:

```tsx theme={null}
<Calendar
  theme={{ containers: { agendaRow: { paddingHorizontal: 20 }, allDayLane: { opacity: 0.9 } } }}
/>
```

Available slots:

| Slot | Element |
| - | - |
| `monthContainer` | The month view's outer container |
| `weekdayHeader` | The weekday-label header row |
| `weekRow` | Each week (row of 7 day cells) |
| `dayCell` | Each day cell in the month grid |
| `dayBadge` | The date badge (circle) inside a day |
| `monthEvent` | An event chip inside a month day cell |
| `columnHeader` | Each day's column header in the time grid |
| `columnHeaderBadge` | The day-number badge (circle) in that header |
| `timeGridEvent` | A timed event's positioned box |
| `nowIndicator` | The current-time indicator line |
| `agendaList` / `agendaRow` | The schedule list and each of its event rows |
| `allDayLane` / `allDayColumn` | The all-day lane and each day's column in it |

The date selection in [`MonthList`](/guides/month-list) draws filled endpoint
badges (`selectedBackground` / `selectedText`) and a rounded band across the span
(`rangeBackground`, height `rangeBandHeight`). The band caps at the endpoint
circles; pass `fillCellOnSelection` to fill the whole cell instead of the pill.

### Dark mode

A ready-made `darkTheme` is included. Switch on the system scheme with
`useColorScheme()`:

```tsx theme={null}
import { Calendar, darkTheme, defaultTheme } from "@super-calendar/native";
import { useColorScheme } from "react-native";

const scheme = useColorScheme();
<Calendar /* ... */ theme={scheme === "dark" ? darkTheme : defaultTheme} />;
```

### Reading the theme

Inside a custom `renderEvent` (or any descendant), read the active theme with
`useCalendarTheme()`.

### Tailwind & per-part classes (web)

The theme recolours everything at once. To hand a specific part of the **web**
calendar to Tailwind or your own CSS (with `data-*` state variants like
`data-[today]:`), use per-slot `classNames` / `styles` — see
[Styling with Tailwind & CSS](/guides/styling).

## Business hours

Pass `businessHours` to tint the closed hours on the week/day grid. It's a
function of the day, so open hours can vary and weekends can read as closed:
return `{ start, end }` (hours, fractions allowed) to shade outside that range,
or `null` to shade the whole day. The tint is the theme's
`outsideHoursBackground`.

```tsx theme={null}
<Calendar
  /* ... */
  businessHours={(date) => {
    const weekday = date.getDay();
    if (weekday === 0 || weekday === 6) return null; // weekends closed
    return { start: 9, end: 17 };
  }}
/>
```

## Per-date column styling

For shading specific dates (holidays, the selected day) across month cells and
week/day columns, use `calendarCellStyle` — a function of the date returning a
style. Unlike `businessHours` (which shades a time band), this tints the whole
day.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.