---
title: "Styling"
url: "https://twistcal.com/docs/styling"
description: "Override TwistCal's appearance with CSS custom properties. 25+ --tc-* variables covering button, menu, items, and shared values."
---

The component is style-isolated by Shadow DOM. Override CSS custom properties on the host:

```
twist-cal {
  --tc-btn-bg: #dc2626;
  --tc-btn-bg-hover: #b91c1c;
  --tc-radius: 4px;
}
```

## Button

| Property | Default | Description |
| --- | --- | --- |
| --tc-btn-bg | #2563eb | Button background |
| --tc-btn-bg-hover | #1d4ed8 | Button background on hover |
| --tc-btn-border | none | Button border (use for custom variants) |
| --tc-btn-padding | 8px 16px | Button padding |
| --tc-btn-fs | 14px | Button font size |
| --tc-btn-fw | 600 | Button font weight |
| --tc-btn-gap | 6px | Gap between label and caret |
| --tc-text | #fff | Button text color |
| --tc-border | #111 | Outline variant border color |
| --tc-caret-size | 4px | Caret triangle size |

## Menu

| Property | Default | Description |
| --- | --- | --- |
| --tc-menu-bg | #fff | Menu background |
| --tc-menu-border | #e5e7eb | Menu border color |
| --tc-menu-shadow | 0 4px 16px rgba(0,0,0,0.12) | Menu box shadow |
| --tc-menu-padding | 4px | Menu inner padding |
| --tc-menu-min-w | 200px | Menu minimum width |
| --tc-menu-gap | 4px | Gap between button and menu |

## Menu items

| Property | Default | Description |
| --- | --- | --- |
| --tc-item-color | #1f2937 | Item text color |
| --tc-item-hover-bg | #f3f4f6 | Item hover background |
| --tc-item-padding | 8px 12px | Item padding |
| --tc-item-fs | 14px | Item font size |
| --tc-item-gap | 8px | Gap between icon and text |
| --tc-item-radius | 6px | Item border radius |
| --tc-icon-size | 16px | Icon size |

## Shared

| Property | Default | Description |
| --- | --- | --- |
| --tc-radius | 8px | Button + menu border radius |
| --tc-font | system stack | Font family |
| --tc-focus | 2px solid #60a5fa | Focus ring outline |
| --tc-focus-offset | 2px | Focus ring offset |

## Theming examples

Brand red:

```
twist-cal {
  --tc-btn-bg: #dc2626;
  --tc-btn-bg-hover: #b91c1c;
  --tc-radius: 4px;
}
```

Dark mode (apply on `prefers-color-scheme`):

```
@media (prefers-color-scheme: dark) {
  twist-cal {
    --tc-btn-bg: #1f2937;
    --tc-btn-bg-hover: #374151;
    --tc-menu-bg: #111827;
    --tc-menu-border: #374151;
    --tc-item-color: #f3f4f6;
    --tc-item-hover-bg: #1f2937;
    --tc-text: #fff;
  }
}
```

Outline variant — the `variant="outline"` attribute flips to white bg + dark border, but you can override the border color:

```
<twist-cal variant="outline" title="..." start="..." end="..."></twist-cal>
```

```
twist-cal {
  --tc-border: #2563eb;
  --tc-text: #2563eb;
}
```

## Next

-   [Web component](/docs/web-component/) — all attributes
-   [API](/docs/api/) — programmatic access