Theme Packs

A theme pack is a NuGet package containing one generated theme. Basic ships inside the core control packages and applies automatically; the rest install separately.

Each pack differs on more than colour — see Theming for the axes involved.

Basic

The neutral default: a clean, blue-accented palette on the shared geometry, type scale, spacing and Material drop shadows. Nothing to install, and nothing to opt into — UseShinyControls() applies it.

Material

Material Design 3 inspired: the signature M3 purple, Roboto, corner radii scaled up 1.5×, heavier label weights, and shadows tinted by the theme’s own shadow role rather than pure black.

builder.UseShinyControls(cfg => cfg.UseMaterialTheme());

Ocean

Cool teal and cyan, soft and roomy: corners scaled 1.75× into pillows, density 1.2× so controls breathe, looser line height, and large diffuse shadows at low opacity — depth you have to look for.

builder.UseShinyControls(cfg => cfg.UseOceanTheme());

Terminal

A console: phosphor green, every corner squared off (shape.scale: 0, including corner-full), monospace throughout, density 0.8× so rows pack tight, stronger state layers, and elevation.style: outline — a hairline ring where other packs float a shadow.

builder.UseShinyControls(cfg => cfg.UseTerminalTheme());

Caution

Terminal asks for a monospace family. On Blazor that is a CSS stack and resolves on any platform. On MAUI a family name only resolves if the host app registered it with ConfigureFonts; an unregistered name falls back to the system font, so the theme still applies — it just keeps the default typeface.

Aurora

Vivid violet and cyan where depth is light rather than shadow: elevation.style: glow puts a soft primary-coloured halo around anything raised, corners scale 1.4×, and weightOffset: 200 makes the whole type scale read bold.

builder.UseShinyControls(cfg => cfg.UseAuroraTheme());

Blazor

Every pack ships one stylesheet. Link it after the core theme so it overrides :root:

<link href="_content/Shiny.Blazor.Controls/css/shiny-theme.css" rel="stylesheet" />
<link href="_content/Shiny.Blazor.Controls.Themes.Aurora/css/shiny-theme-aurora.css" rel="stylesheet" />

Swap the second <link> at runtime to switch packs live — the controls read every value through custom properties, so nothing needs re-rendering.