Skip to content
Shiny.NET
Blog
ShinySoft TechnologiesShinySoft Technologies
Shiny Controls v1.0 - The Ultra Control Suite for .NET MAUI & BlazorO...M...G!

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 copy any single file from the export tabs — or hit Download all for a zip containing every file for every platform.

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
#F7F9FC
Surface
#F7F9FC
SurfaceVariant
#DBE3F2
SurfaceContainerLowest
#FFFFFF
SurfaceContainerLow
#F1F4F8
SurfaceContainer
#EBEEF3
SurfaceContainerHigh
#E4E8EE
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

The source of truth — everything else is generated from these seeds.

themes/my-theme.json
{
    "$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"
    }
}

Drop into /themes/ and run the ShinyThemeGen tool to regenerate both platforms.

What to do with the output

Section titled “What to do with the output”

The zip lays the files out per platform:

  • themes/<slug>.json — the source of truth. Drop it into /themes/ in your fork of the controls repo and run dotnet run --project tools/ShinyThemeGen to (re)generate both platforms.
  • blazor/shiny-theme-<slug>.css — ship it as a static asset and <link> it after the core shiny-theme.css. Toggle .shiny-theme-dark / .shiny-theme-light on <html> to force a scheme; otherwise it follows the OS preference.
  • maui/<Name>Theme.cs plus the light/dark ResourceDictionary classes — drop them into your MAUI project, then UseShinyControls(cfg => cfg.UseTheme(new YourTheme())).
  • README.md — the same wiring notes, bundled for later.

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