Theme Loader

IsaThemeLoader

The IsaThemeLoader component loads and applies IsaThemeBuilder themes at runtime. It supports CSS, JSON, and SCSS ZIP formats from URLs, byte arrays, or base64 strings. JSON is the recommended format — it fully preserves component-specific overrides (popup colors, selected states, hover effects, etc.) which CSS and SCSS imports cannot restore. It can run as an invisible headless component or as a dropdown theme picker.

Component Preview (affected by loaded theme)

The loaded theme's --isa-* variables restyle this preview container.

PrimaryBorderBackground

Scoped to .isabyte-tl-demo-preview - the host page keeps its own theme.

Current Configuration

📋

<IsaThemeLoader Themes="@themes"
                Scope=".my-preview"
                OnThemeLoaded="HandleThemeLoaded" />

@code {
    // URL -> label; the loader fetches and applies the picked theme.
    private Dictionary<string, string> themes = new()
    {
        ["/themes/light.json"] = "Light",
        ["/themes/dark.json"] = "Dark",
        ["/themes/nord.json"] = "Nord",
    };

    private void HandleThemeLoaded(IsaThemeConfig? config)
    {
        // Theme applied under .my-preview
    }
}

Related learning

See the Custom Theme tutorial for a step-by-step walkthrough.