sufi-blazor/docs/theming.md

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.