Referencing Blazorise Theme Values in Custom CSS

Introduction

Blazorise is an excellent library that I’ve been using a lot lately. While it has great support for declaring custom visual themes, you’ll occasionally run into situations where what you’re trying to do isn’t fully supported.

Take this super contrived example: I want to set the shadow on a div to use the primary colour defined in my theme, but there’s no attribute in Blazorise to do this directly (at time of writing). I could hard-code the colour to the same hex value as what I’ve set in my theme, but not only is this generally bad practice (since it’s easy to update one value and not the other), it locks you into only one colour even though the theme can be modified dynamically during runtime. So how can we access our Blazorise theme values in custom CSS?

Solution

I’ve put together an example site where you can see this approach in action and the implementation is available on GitHub. The screenshots I use are from there!

Thankfully there is a pretty clean way that we can approach this! If you’ve defined a theme, Blazorise embeds a style element in the HTML body with an id of “b-theme-variables”.

A screenshot of the Inspector panel in Firefox of a Blazorise solution. The screenshot is of the top of the element and has highlighted a tag with an id of "b-theme-variables"
There it is!

This contains all of the theme values that Blazorise uses throughout your project and can be referenced in custom CSS. Although it’s best to check your own instance to see the variables you have available to you, I’ve put together a Gist of the values available in a default Blazorise project.

The names should generally give you an idea of what each variable is used for; in our case the primary theme colour we’re looking for is called --b-theme-primary! Referencing this variable in CSS can be done by substituting var(--b-theme-primary) where you would have otherwise placed the value directly.

Putting together the above elements, we now know we can set our <Div> element (capital D because we’re using the Blazorise element) up as follows:

<Div Margin="Margin.Is2.FromTop.Is3.FromBottom"
     Border="Border.Dark.OnAll"
     Padding="Padding.Is2"
     style="box-shadow: 10px 10px var(--b-theme-primary)">
    <Heading Size="HeadingSize.Is2">Shadow Colour: @Theme.ColorOptions.Primary</Heading>
    <Paragraph>Here's an example of a div with a shadow defined using the CSS variable <code>--b-theme-primary</code>, which is directly linked to the Blazorise theme value (currently @Theme.ColorOptions.Primary). Pretty cool right?</Paragraph>
</Div>

Example

Let’s look at this approach in practice and how it compares to hard-coding the value.

When you first load the Blazorise Examples test site you can see that both the hardcoded (upper) and variable-based (lower) divs have identical shadows, both set to #45B1E8.

A screenshot of the Blazorise Examples test site. The shadows on both div elements have a colour of #45B1E8 (the initial theme value)
All looking good so far…

If you click the handy “Change Theme Colour” button though, we can see the differences between the two implementations. The upper shadow is still set to the initial value of #45B1E8 while the lower is automatically updated to whatever random value gets selected for the theme (#691235 in the below example).

A screenshot of the Blazorise Examples test site. The shadows on the upper div element still has the initial colour of #45B1E8, but the lower div element has an updated colour of #691235 (the current theme value)
The cracks start to show!

The magic of this approach is that the reference stays up to date with everything else (including the button colour and the text references in the header and paragraph) with no extra code required!

The above only serves to display the practical differences as well; it doesn’t take into account the fact that it also allows you to avoid hard-coding colour values. Magic numbers/constants are generally considered an anti-pattern, so this is a way to avoid that issue!

Caveats

While this works pretty effectively it’s worth mentioning that this is an undocumented feature and as such the variables could change name or disappear altogether in future versions/releases of Blazorise. Where possible it is far better to use the inbuilt themes and attributes directly, only resorting to this approach where needed to fill a gap in Blazorise functionality.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.