---
url: /reference/theming.md
description: >-
  Scheduler Pro follows your panel's colours, radius, font and dark mode,
  mirrors for RTL, and exposes CSS variables.
---

# Theming & RTL

The widgets use your panel's colour, gray, radius and font tokens, follow the panel's dark mode, and mirror themselves for right-to-left locales.

## Right to left

Arabic ships in the box. With an RTL locale, the timeline, toolbar, board and menus mirror.

| Scheduler | Board |
| --- | --- |
| ![Scheduler in Arabic](/images/rtl.png) | ![Board in Arabic](/images/board-rtl.png) |

## CSS variables

Override any `--sp-*` variable on `.sp-root`:

```css
.sp-root {
    --sp-side: 280px;
    --sp-now: var(--primary-500);
}
```

## Motion

Animations respect `prefers-reduced-motion`.