Customizing the Theme

The Styles Parameter

Every component supports passing CSS classes via the Styles parameter. Components with complex layouts provide additional parameters for customization.

dotnet add package PureBlazor.Components.AspNetCore

Components automatically merge any Tailwind classes that conflict with an existing class.

For example, if you prefer a lighter color when hovering over a button:

Extending the Default Theme

Extend DefaultTheme to selectively change the appearance of components:

// Create a dictionary of customized variants for the PureButton component
var customizedVariants = new Dictionary<PureVariant, Dictionary<Accent, string>>
{
    {
        PureVariant.Default,
        new Dictionary<Accent, string>
        {
            {
                Accent.Brand,
                "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:bg-gradient-to-l"
            },
            { Accent.Success, "bg-gradient-to-r from-brand-300 to-emerald-500 hover:bg-gradient-to-l" },
            {
                Accent.Danger,
                "bg-gradient-to-r from-orange-300 from-10% via-red-700 via-50% to-90% to-orange-700 hover:bg-gradient-to-l"
            },
            {
                Accent.Default,
                "bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500"
            }
        }
    }
};

// Get the existing style for the PureButton component so we can use it as a base
var existingStyle = theme.Styles[nameof(PureButton)];

// Bundle the customized variants into a dictionary of customized styles
var customizedStyles = new Dictionary<string, ComponentStyle>
{
    {
        nameof(PureButton),

        // Create a new ComponentStyle with the customized variants
        new ComponentStyle(existingStyle.Base, null, customizedVariants, existingStyle.Sizes)
    }
};

// merge the customized styles with the existing styles
demoTheme = theme with { Styles = customizedStyles };

Register the new theme as a CascadingValue or in the call to AddPureBlazorComponents(new DemoTheme());

<CascadingValue Value="new DemoTheme()">
    <PureButton>This uses the DemoTheme!</PureButton>
</CascadingValue>

Building Custom Theme

Extend PureTheme to completely customize all components:

public record DefaultTheme : PureTheme
{
    public DefaultTheme()
    {
        ButtonDefaults.PressEffect = Effect.InsetShadow;
        ButtonDefaults.HoverEffect = Effect.Unset;
        StylePrioritizer = new StylePrioritizer();
        Styles = new Dictionary<string, ComponentStyle>
        {
            {
                nameof(PureButton),
                new ComponentStyle(ButtonStyles.Base, null, ButtonStyles.Variants, ButtonStyles.Sizes)
            },
            {
                nameof(PureIconButton),
                new ComponentStyle(ButtonStyles.Base, null, ButtonStyles.Variants, ButtonStyles.Sizes)
            },
            {
                nameof(PureDropdown),
                new ComponentStyle(DropdownStyles.Base, null, null, DropdownStyles.Sizes)
                {
                    InnerContainer = new ComponentStyle(DropdownStyles.Container.Base, null, null, null)
                }
            },
            {
                nameof(PureDropdownItem),
                new ComponentStyle(DropdownStyles.MenuItem.Base, DropdownStyles.MenuItem.Accents, null,
                    DropdownStyles.MenuItem.Sizes)
            },
            { nameof(PureBanner), new ComponentStyle(BannerStyles.Base, null, BannerStyles.Variants, null) },
            { nameof(PureLink), new ComponentStyle(LinkStyles.Base, null, null, null) },
            { nameof(PureBadge), new ComponentStyle("", null, BadgeStyles.Variants, null) },
            { nameof(PureAlert), new ComponentStyle(AlertStyles.Base, AlertStyles.Accents, null, null) },
            {
                nameof(PureColorIndicator),
                new ComponentStyle("", null, null, null)
                {
                    InnerContainer = new ComponentStyle("", IndicatorStyles.Background, null, null)
                    {
                        OuterContainer = new ComponentStyle("", IndicatorStyles.Foreground, null, null)
                    }
                }
            },
        };
    }
}