> ## 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.