Theming

The panel is built with StellarAdmin.UI and uses its themes. A theme is a CSS file of variables that you load after the panel's own stylesheet:

builder.Services.AddStellarAdmin(admin =>
{
    admin.AddStylesheet("https://fonts.googleapis.com/css2?family=Lexend:wght@400..700&display=swap");
    admin.AddStylesheet("~/css/theme.css");
});

Stylesheets load after the panel's, in the order you add them. Add any web fonts your theme needs the same way.

To make a theme:

• Start from a preset in the theme builder, tweak it, and export the file.
• Ask your coding agent, with the stellar-admin-theme skill.
• Write one by hand from the theme variables.

See theming in the StellarAdmin.UI docs for how themes work, and dark mode for the light and dark variants.

Form layoutCopy Anchor Link

How form sections look is a panel setting rather than part of the theme:

admin.ConfigureUI(ui => ui.ConfigureForms(forms => forms.SectionLayout = FormSectionLayout.Card));

See form layout.

ScriptsCopy Anchor Link

AddScript adds your own scripts to every panel page, after the panel's:

admin.AddScript("~/js/admin.js");