Add "theme" option to Enums like ButtonColor

[FoobarLegend]

We're using an Admin template that uses css selectors like "btn btn-outline-theme", note the -theme suffix. We don't want to create a new Component that extends the BlazorBootstrap button but ideally have the option to use the "theme" option for selecting from color related Enums.

For example:

<Button Color="ButtonColor.Theme" Type="ButtonType.Submit">
   I am a button
</Button>

that would translate into:

<button type="submit" class="btn btn-theme">I am a button</button>

[gvreddy04]

@FoobarLegend Is it possible to share the theme link? How do you handle ButtonColor.Primary, ButtonColor.Success and other colors?

[FoobarLegend]

@gvreddy04 Thanks for the quick reply.

We're using the following admin template: https://themeforest.net/item/hud-bootstrap-5-admin-template/34000752 and are using a very monotone color palette.

For now (our product is not production ready yet) we're using mostly buttons with ButtonColor.Danger:

<Button Color="ButtonColor.Danger" Type="ButtonType.Submit" @onclick="OnSaveClick" ... etc

but a consistent button implementation is on our backlog.

Ideally for "primary buttons" we want the buttons to translate to:

<button type="submit" class="btn btn-outline-theme">I am a primary actionable button</button>

and for "secondary" buttons:

<button type="submit" class="btn btn-outline-default">I am a secondary actionable button</button>

Here's a sreenshot so you can see the difference between the button output (and styling) we like to have (left) vs the button output on the right if we use the Color.Danger (closer than that is not possible with BlazorBootstrap if we don't apply additional css classes)

Also if you think about it, the Color/CSS system in BlazorBootstrap is based on Enums (not extensible in any way) and fixed default CSS classes. Maybe it's possible to go forward to an implementation where the Colors and CSS are more configurable. Something like the IOptions pattern with settings from appsettings.json:

{
    "BlazorBootstrapOptions": {
        "Buttons": {
            "DefaultCssClass": "btn",
            "DefaultCssClassSuffix": "-theme",
            "ColorDangerCssClassMapping": "-theme"
        }
    }
}

Extending the ToButtonClass(this ButtonColor buttonColor) extension method, and for all Color types actually, in https://github.com/vikramlearning/blazorbootstrap/blob/master/blazorbootstrap/Extensions/EnumExtensions.cs with a check if there are overrides set in Options and if so apply them within the switch statement. This way you have backwards compatibility for existing users and the public API stays intact (with the Color types) but also provide more extensibility and flexibility.

[MarvinKlein1508]

@FoobarLegend

you could simply overwrite the default bootstrap colors. This way there is no need for special button classes. https://getbootstrap.com/docs/5.3/customize/css-variables/