28 lines
1.1 KiB
Markdown
28 lines
1.1 KiB
Markdown
# SufiBlazor Theming
|
||
|
||
## SbThemeProvider
|
||
|
||
Wrap app content. Set **Theme** (`Light` / `Dark`) and **Direction** (`Ltr` / `Rtl`).
|
||
Toggle theme (and optionally persist in localStorage) to switch at runtime.
|
||
|
||
## Tokens
|
||
|
||
CSS variables under `:root` and `[data-theme="dark"]` control:
|
||
|
||
- **Colors** — Primary, secondary, semantic (success, warning, danger), surface, background, text, border.
|
||
- **Typography** — Font family, sizes (xs–3xl), weights, line heights.
|
||
- **Spacing** — `--sb-space-0` through `--sb-space-16`.
|
||
- **Radius** — sm, md, lg, xl, full.
|
||
- **Shadows** — sm, md, lg, xl.
|
||
- **Z-index** — Dropdown, modal, popover, tooltip, toast.
|
||
|
||
Override in your own CSS to customize. Use semantic tokens (e.g. `--sb-color-primary`) rather than raw values.
|
||
|
||
## RTL
|
||
|
||
Set `Direction="Rtl"` on `SbThemeProvider`. Components use logical properties so layout flips automatically.
|
||
|
||
## Custom Themes
|
||
|
||
Define a new set of variable overrides (e.g. `brand-theme.css`), load after `sufiblazor.css`. No extra C# theme types required unless you add custom theme selection logic.
|