Skip to content
Shiny.NET
Blog
Document DB v7: Temporal Support Feed The Machine Here

Theme Creator

Pick a few seed colors and Shiny derives a full Material 3 token set — light and dark — for the whole control suite. The output here is byte-identical to running the ShinyThemeGen tool in the repo, so anything you design is reproducible.

Start from a built-in palette, tweak the seeds, watch the live preview, then grab the Theme JSON (source of truth), the Blazor CSS, or the MAUI C# dictionaries.

Start from:
slug: my-theme

Accents

Primary
Secondary
Tertiary

Neutrals

Neutral
Neutral Variant

Status

Success
Info
Warning
Caution
Critical
Error

Accent roles

Primary
#0055D9
PrimaryContainer
#C2D6FF
Secondary
#565F6D
SecondaryContainer
#D9E3F3
Tertiary
#6A4CAD
TertiaryContainer
#F7CFFF

Status roles

Success
#81FB9A
Info
#C2D6FF
Warning
#FFC862
Caution
#FFB469
Critical
#FFA78D
Error
#FFA78D

Surfaces

Background
#F8F9FB
Surface
#F8F9FB
SurfaceVariant
#DBE3F2
SurfaceContainerLowest
#FFFFFF
SurfaceContainerLow
#F2F4F6
SurfaceContainer
#EBEEF2
SurfaceContainerHigh
#E5E8ED
SurfaceContainerHighest
#DEE3E9
Outline
#707785
OutlineVariant
#BFC7D6

Sample controls

SuccessInfoWarningCautionCritical

Surface card

Body text uses on-surface-variant on a surface container.

Outlined text field
Saved Undo
{
    "$schema": "./shiny-theme.schema.json",
    "name": "My Theme",
    "slug": "my-theme",
    "description": "A custom Shiny Controls theme.",
    "seeds": {
        "primary": "#2563EB",
        "secondary": "#5B6472",
        "tertiary": "#7C5CBF",
        "neutral": "#5F6368",
        "neutralVariant": "#5C6370",
        "error": "#DC2626",
        "success": "#16A34A",
        "info": "#2563EB",
        "warning": "#D97706",
        "caution": "#EA580C",
        "critical": "#DC2626"
    }
}

What to do with the output

Section titled “What to do with the output”
  • Theme JSON — drop it into /themes/<slug>.json in your fork of the controls repo and run dotnet run --project tools/ShinyThemeGen to (re)generate both platforms.
  • Blazor CSS — save as shiny-theme-<slug>.css, ship it as a static asset, and <link> it after the core shiny-theme.css.
  • MAUI C# — drop the generated ResourceDictionary classes into a library, then UseShinyControls(cfg => cfg.UseTheme(new YourTheme())).

See the Theming overview for how the tokens are consumed by controls.