Document DB v7: Temporal Support Feed The Machine Here

Theming

Shiny Controls ship a central, Material 3 style theming system shared by MAUI and Blazor. A theme is a set of design tokens — color roles, shape, elevation, type scale, state and spacing. The core packages define the token contract and a built-in Basic theme; additional themes (Ocean, Material) install as separate NuGet packs.

How it works

A theme is described by ~11 seed colors. From those, Shiny derives the full Material 3 tonal role set (light + dark) plus shape, elevation, type and spacing tokens, and emits platform assets:

MAUI → C# ResourceDictionary classes; controls bind colors with SetDynamicResource(…, ShinyThemeKeys.Color.X).
Blazor → a CSS file of --shiny-* custom properties; controls reference var(--shiny-color-x, <fallback>). The original value is kept as the fallback, so controls look correct even before a theme stylesheet is linked.

Swapping the theme restyles the entire control suite at once — including a live light/dark switch.

Using a theme — MAUI

Basic is applied automatically by UseShinyControls(). Install a pack and select it:

// dotnet add package Shiny.Maui.Controls.Themes.Ocean
builder.UseShinyControls(cfg => cfg.UseOceanTheme());   // or .UseMaterialTheme() / .UseBasicTheme()

Switch at runtime — light/dark follows the OS automatically and hot-swaps:

ShinyThemeManager.SetTheme(new OceanTheme());
Application.Current.UserAppTheme = AppTheme.Dark;       // flips to the dark scheme live

Explicitly setting a control color (e.g. Fab.FabBackgroundColor) still overrides the theme.

Using a theme — Blazor

The core Basic stylesheet ships in Shiny.Blazor.Controls. Link it in index.html:

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

Install a pack and link its stylesheet after the core one (it overrides :root):

<!-- dotnet add package Shiny.Blazor.Controls.Themes.Ocean -->
<link href="_content/Shiny.Blazor.Controls.Themes.Ocean/css/shiny-theme-ocean.css" rel="stylesheet" />

Dark mode follows the OS by default. Force it by adding shiny-theme-dark (or shiny-theme-light) to <html> or any container — the tokens cascade to that subtree.

Token categories

Category	Examples
Color (M3 roles)	`primary`, `on-primary`, `primary-container`, `surface`, `on-surface`, `outline`, …
Color (Shiny status)	`success`, `info`, `warning`, `caution`, `critical` (each with `on-` and `-container`)
Shape	`corner-small` (8), `corner-medium` (12), `corner-large` (16), `corner-full`
Elevation	`elevation-1` … `elevation-5`
State	`hover-opacity`, `focus-opacity`, `pressed-opacity`, `dragged-opacity`
Type	`body-large`, `title-medium`, `label-small`, … (size / line-height / weight / tracking)
Spacing	`spacing-0` … `spacing-8` (0, 4, 8, 12, 16, 24, 32, 48, 64)

Authoring a new theme

Use the Theme Creator, or copy themes/basic.json and edit the seeds.
Run dotnet run --project tools/ShinyThemeGen to regenerate both platforms.
For a new pack, add the two project files (model them on the Ocean pack) and register them in Shiny.Controls.slnx / Build.slnf.