Design tokens

Theme

Explore the twblazor live theme tokens: semantic colours, neutral surface and text tokens, shadows and border radius, as registered by your app theme.

Last updated 25 September 2026

Semantic Colors

Every color-aware component accepts a Color from the Color enum: Primary, Accent, Success, Danger, Warning, Info, Light and Dark. Each button below is rendered with that color, so what you see is exactly what your registered theme produces - the border class underneath is read live from TwBlazorTheme.Border.Colors.

border-purple-600 dark:border-purple-500

border-fuchsia-600 dark:border-fuchsia-400

border-green-600 dark:border-green-400

border-red-600 dark:border-red-400

border-yellow-600 dark:border-yellow-400

border-blue-600 dark:border-blue-400

border-gray-100 dark:border-gray-700

border-gray-900 dark:border-gray-700

Neutral Surface & Text

Components that aren't tied to a semantic color - cards, dialogs, popovers, sidebars - share a small set of neutral tokens instead, defined once on TwBlazorColor.NeutralSurface and TwBlazorColor.NeutralText and reused everywhere so a single change restyles every consumer.

Surfaces

Background bg-[oklch(100%_0_0)] dark:bg-[oklch(25.33%_0.016_252.42)]

Background Subtle bg-[oklch(98%_0_0)] dark:bg-[oklch(23.26%_0.014_253.1)]

Border border-[oklch(95%_0_0)] dark:border-[oklch(21.15%_0.012_254.09)]

Border Subtle border-[oklch(98%_0_0)] dark:border-[oklch(23.26%_0.014_253.1)]

Hover hover:bg-[oklch(98%_0_0)] dark:hover:bg-[oklch(23.26%_0.014_253.1)]

Text

Heading text-[oklch(21%_0.006_285.885)] dark:text-[oklch(97.807%_0.029_256.847)]

Secondary text-[oklch(40%_0.006_285.885)] dark:text-[oklch(88%_0.02_256.847)]

Muted text-[oklch(50%_0.006_285.885)] dark:text-[oklch(78%_0.02_256.847)]

Subtle text-[oklch(55%_0.006_285.885)] dark:text-[oklch(68%_0.02_256.847)]

Shadows & Rounding

Every component resolves its shadow and border radius from these scales via Shadows.DefaultShadow and Rounded.DefaultRounded, unless overridden per-instance with the Shadow or Rounded parameter. The current default of each scale is marked below.

Shadow Scale

None

Sm (default)

Rounded Scale

None

Md (default)

Full

Customizing the Theme

Every class shown on this page comes from a single TwBlazorTheme, registered once via AddTwBlazor(). Copy the default theme into your own project and change any string to restyle every component that reads it - see Get Started for the full setup, including the complete theme source.