> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Theme Editor - Availability indicator
> Style the availability status dot and its text, shared across the storefront.
The Availability indicator panel styles the status dot and its accompanying text. The indicator is shared: it appears inside the [pickup availability card](/docs/sales-channels/online-store/theme-editor/settings/pickup-availability) on the listing page and on the listing availability line on collection pages. Found under **Cards** in the theme editor.
## Colors
| Setting | Default | Description |
| ----------- | --------- | ------------------------------------------- |
| Available | `#17B26A` | Dot colour when the listing is available. |
| Unavailable | `#D0D5DD` | Dot colour when the listing is unavailable. |
| Text | `#374152` | Colour of the text next to the dot. |
## CSS variables
```css CSS variables theme={null}
:root {
--storefront-availability-indicator-available-color: #17B26A;
--storefront-availability-indicator-unavailable-color: #D0D5DD;
--storefront-availability-indicator-text-color: #374152;
}
```
## Related
Style the card the indicator appears in.
How availability is determined.