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.
What browsers do you see the problem on?
No response
Any additional comments?
No response
Blazorise Version
2.1.1
What Blazorise provider are you running on?
Bootstrap5
Link to minimal reproduction or a simple code snippet
Alerts.razor
ThemeManager.cs
Steps to reproduce & bug description
Bug:
BackgroundLevelandColorLevelonAlertOptionsonly apply toPrimaryandSecondaryalert colorsThe
BackgroundLevelandColorLevelproperties inAlertOptions(theme configuration) appear to have no effect when the alert color is set to anything other thanPrimaryorSecondary. Colors such asSuccess,Danger,Warning, etc. render with the same color regardless of theBackgroundLevelvalue.What is expected?
BackgroundLevelandColorLevelshould apply consistently across all alert color variants, not justPrimaryandSecondary.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 = 10andColorLevel = -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.
What browsers do you see the problem on?
No response
Any additional comments?
No response