Defining Themes for Custom Components

The theming feature of Blazor Library extends beyond the built-in components and also applies to developer-defined components. Developers have the flexibility to define new components and their respective variants by modifying the Components value in the theme pack configuration. Here's an example:

{
    "Name": "Default Pack",
    "Author": "Blazor Library",
    "Themes":
    [
        {
            "Name": ...,
            "Imports": ...,
            "Components":
            {
                ...
                "MyComponent": "my-class",
                "MyComponent.rounded": "rounded-1",
                "MyComponent.red": "background-red",
            }
        }
    ]
}

In this example, the Components section within the theme pack configuration allows you to define your own component, such as MyComponent and its corresponding CSS class or styling. Additionally, you can define variants of the component, such as MyComponent.rounded or MyComponent.red and assign them their respective CSS classes or styles.

By modifying the Components section in the theme pack configuration, developers have the ability to create custom components and define their variants, enabling them to achieve a high level of customization and flexibility when building their applications with the Blazor Library theming feature.

Applying Themes to Components

After defining component themes in the theme pack configuration, developers can apply theme features to specific components/tags by declaring a CascadingParameter of type BlazorApplyTheme. This enables the utilization of theme styles within the component. Consider the following example:

<p class="@CascadedBlazorApplyTheme["MyComponent"]">MyComponent</p>
<p class="@CascadedBlazorApplyTheme["MyComponent","red"]">MyComponent in red variant</p>

    @code {
        [CascadingParameter]
        public BlazorApplyTheme CascadedBlazorApplyTheme { get; set; }
}

In this example, the CascadingParameter of type BlazorApplyTheme is declared to enable theme application. The first paragraph element applies the MyComponent theme class, while the second paragraph element applies the MyComponent theme class with the red variant.

By utilizing the CascadingParameter and BlazorApplyTheme, developers can seamlessly apply theme styles to individual components or tags, enhancing the overall visual consistency and customization of their application.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙