Tutorial: Custom Themes — Blazor

IsaThemeLoader (runtime applicator) is the theming component the package ships, operating on a plain IsaThemeConfig POCO. Package: Isabyte.PowerTools.Blazor. The visual editor is no longer a library component — it lives in your Isabyte account as Theme Studio (/theme-studio), which exports the same config.

Step 1 — The Theme Model

public class IsaThemeConfig
{
    public string ThemeName { get; set; } = "Custom Theme";
    public IsaThemeColors Colors { get; set; } = new();
    public IsaThemeMetrics Metrics { get; set; } = new();
    public IsaThemeTypography Typography { get; set; } = new();
    public Dictionary<string, Dictionary<string, string>> ComponentOverrides { get; set; } = new();
}

The accent colours match Bootstrap's defaults, so an "empty" theme is close to no theme at all — but not pixel-identical: the border and focus-ring defaults differ slightly from the shipped core CSS, so borders and focus rings shift once a theme is applied.

Step 2 — Design the Theme in Theme Studio

The visual editor is not part of the package. Open Theme Studio on your Isabyte account, design the theme (the color-selector demo shows the colour picker on its own), and export it. Save the export in your app's wwwroot/themes/ folder — for example wwwroot/themes/acme.theme.json — so IsaThemeLoader can fetch it in Step 4.

Step 3 — Pick an Export Format

JSON round-trips losslessly (including ComponentOverrides) and is recommended for anything you'll re-edit later; CSS and SCSS-ZIP are for one-way "ship it" deployments.

Step 4 — Apply at Runtime

<!-- MainLayout.razor: headless, single theme -->
<IsaThemeLoader Url="/themes/acme.theme.json" />

<!-- Dropdown picker -->
<IsaThemeLoader Themes="_themes" @bind-SelectedTheme="_currentTheme" />

Step 5 — Per-Component Overrides

theme.ComponentOverrides["IsabyteDropdown"] = new Dictionary<string, string>
{
    ["popup-bg"] = "#1E1E1E",
    ["item-selected-bg"] = "#264C7A",
};

Common Gotchas

JSON is the only lossless format — CSS/SCSS exports can't round-trip ComponentOverrides.
Gate a global theme picker behind [Authorize(Roles="Administrator")] — a theme saved for the whole app changes it for every user.

Theme Building