How it works

A DrylTheme only carries seeds — a brand accent (two gradient stops), an optional separate AI accent, and optional semantic and chart-palette overrides. Everything else is derived in dryl.css, so a theme can never drift out of visual coherence. Change a seed and the soft fills, accent lines, glow rings, AI aura and the first two chart series all glide together.

1 · Add the provider

Mount a single DrylThemeProvider once in your layout. It applies the seeds to :root and animates the transition whenever the theme changes. Pass a starting Theme (any DrylThemes preset, or your own).

1
2

@* MainLayout.razor (or wherever your app root lives) *@
<DrylThemeProvider Theme="DrylThemes.Nebula" />

2 · Pick a preset — or build your own

Four curated presets ship in the box. Each one sets its accent seeds (plus, where the accent hue would collide with a chart series anchor, a curated chart-slot override):

Building your own is just a DrylTheme with a DrylAccent:

1
2
3
4
5
6
7

using DRYL.Components.Theming;

// Two seed colors are all you need — DRYL derives the rest.
var brand = new DrylTheme
{
    Accent = new DrylAccent("#7c5cff", "#22d3ee"),
};

3 · Switch at runtime

Inject IDrylThemeService anywhere and call SetThemeAsync or the SetAccentAsync shortcut. The provider picks up the change and animates. This site's top-bar theme switcher is built exactly like this.

1
2
3
4

@inject IDrylThemeService Theme

<DrylButton OnClick="@(() => Theme.SetThemeAsync(DrylThemes.Ember))">Ember</DrylButton>
<DrylButton OnClick="@(() => Theme.SetAccentAsync("#f59e0b", "#f43f5e"))">Custom</DrylButton>

Going further · AI accent & semantics

A theme can give AI surfaces their own accent (the aura and indicators only), and can override the semantic status colors. Leave them unset and AI reuses the brand accent while the default semantics apply — so opting in never disturbs existing screens.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var theme = new DrylTheme
{
    Accent   = new DrylAccent("#7c5cff", "#22d3ee"),

    // Optional: AI surfaces (aura, indicators) get their own accent.
    AiAccent = new DrylAccent("#34d399", "#22d3ee"),

    // Optional: override the semantic status colors.
    Semantic = new DrylSemantic
    {
        Success = "#34d399",
        Warning = "#f59e0b",
        Danger  = "#f43f5e",
        Info    = "#38bdf8",
    },
};