> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daylightcalendar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# uix: Inject Custom CSS into Daylight Calendar Card

> Use the uix.style option to inject raw CSS into Daylight Calendar Card's shadow DOM and override internal styling for events, days, and headers.

The `uix` option is a YAML-only escape hatch for power users who need low-level visual control beyond what the standard appearance, event-style, and day-style options provide. Set `uix.style` to a raw CSS string and the card injects that CSS directly into its shadow DOM at render time. This lets you override any internal style — spacing, font sizes, element visibility, animation durations — without needing a custom theme or additional frontend resources like Card Mod.

> [!NOTE]
>
> `uix.style` is intended for advanced users. Internal class names and CSS variables may change between card releases, so custom `uix` overrides may need updating after card upgrades.

## Configuration

**uix.style** `string`

A raw CSS string injected into the card's shadow DOM. Use a YAML block scalar (`|`) so newlines and indentation are preserved verbatim.

## Basic Example

```yaml theme={null}
type: custom:daylight-calendar-card
entities:
  - calendar.family
uix:
  style: |
    .day-number { font-weight: 700; }
    .event-chip { border-radius: 4px; }
```

## Common Use Cases

### Make day numbers bolder

```yaml theme={null}
uix:
  style: |
    .day-number {
      font-weight: 700;
      font-size: 1.05em;
    }
```

### Round event chips

```yaml theme={null}
uix:
  style: |
    .event-chip {
      border-radius: 6px;
    }
```

### Tighten internal padding

```yaml theme={null}
uix:
  style: |
    .calendar-body {
      padding: 4px;
    }
```

## When to Use `uix.style` vs Other Options

Reach for `uix.style` only when the built-in options don't cover what you need.

| Goal | Use |
| - | - |
| Change event background or icon | [`event_styles`](https://docs.daylightcalendar.com/advanced/event-styles) |
| Highlight a specific day or weekend | [`day_styles`](https://docs.daylightcalendar.com/advanced/day-styles) |
| Add a chip to days with certain events | [`day_badges`](https://docs.daylightcalendar.com/advanced/day-badges) |
| Header colors, background images, density | [Appearance options](https://docs.daylightcalendar.com/configuration/appearance.md) |
| Anything else not covered above | `uix.style` |

## Cautions

> [!WARNING]
>
> CSS injected via `uix.style` is applied as written. Mistyped selectors or invalid declarations can leave the card visually broken — if that happens, remove the `uix` block to restore the default styling.

> [!WARNING]
>
> Class names inside the card's shadow DOM are not part of a public API. They may change in any release. If a future upgrade visually breaks your overrides, expect to update the selectors.


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