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”.

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.

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).

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.