Skip to content

[Bug]: Bootstrap5 Alert BackgroundLevel not working #6559

@Maarty

Description

@Maarty

Blazorise Version

2.1.1

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

Alerts.razor

@foreach (var alert in AlertManager.Alerts)
{
	<Div Flex="Flex.AlignItems.Center.JustifyContent.Center">
		<Alert Color="@GetColor(alert.Severity)" Visible Dismisable Width="Width.Is50.OnFullHD.Is100.OnTablet">
			@if (alert.Severity is not AlertSeverity.Primary and not AlertSeverity.Secondary)
			{
				<AlertMessage>@(alert.Severity + ": ")</AlertMessage>
			}
			<AlertDescription>
				@alert.Message
			</AlertDescription>
			<CloseButton Clicked="@(() => AlertManager.Remove(alert))" />
		</Alert>
	</Div>
}

ThemeManager.cs

...
 theme.AlertOptions = new ThemeAlertOptions
        {
            BackgroundLevel = themeColors.AlertBackgroundLevel,
            ColorLevel = -themeColors.AlertBackgroundLevel
        };

        theme.ThemeHasChanged();
...

Steps to reproduce & bug description

Bug: BackgroundLevel and ColorLevel on AlertOptions only apply to Primary and Secondary alert colors

The BackgroundLevel and ColorLevel properties in AlertOptions (theme configuration) appear to have no effect when the alert color is set to anything other than Primary or Secondary. Colors such as Success, Danger, Warning, etc. render with the same color regardless of the BackgroundLevel value.

What is expected?

BackgroundLevel and ColorLevel should apply consistently across all alert color variants, not just Primary and Secondary.

What is actually happening?

The unmodified background color is lighter than the alert text color, causing poor contrast and readability when the general page background is in darker shades (we are implementing dark theme, but this seems to be a blocker). This is particularly noticeable because the same Danger (and similar) colors work well in other contexts — for example, on buttons against a darker page background — but inside alerts, the lighter background breaks the visual harmony.

On the attached screenshot I am using BackgroundLevel = 10 and ColorLevel = -10.
See the difference in Primary and Secondary - buttons vs alerts - alerts use a different shade because of correctly applied levels, but other severities are not changing.

Image

What browsers do you see the problem on?

No response

Any additional comments?

No response

Metadata

Metadata

Assignees

Labels

Type

Projects

Status

✔ Done

Relationships

None yet

Development

No branches or pull requests

Issue actions