Rgba colors in constants

Radzen.Blazor Components
1

Hi, i go a problem when try to set background-color in frozen column with Software theme
background-color: var(--rz-info-lighter)
--rz-info-lighter: rgba(44, 200, 200, 0.2);
The set transparency leads to problems with frozen columns

Example:

image
image526×560 31.3 KB

Code:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3">Order Details</RadzenText>
<RadzenDataGrid AllowFiltering="false" AllowPaging="true" AllowSorting="false" FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
            Data="@orderDetails" ColumnWidth="200px" AllowColumnResize="true" Style="max-width: 500px;"
            CellRender="@CellRender">
    <Columns>
        <RadzenDataGridColumn Property="@nameof(OrderDetail.Quantity)" Title="Quantity" Frozen="true">
            <Template Context="data">
                @if (data.Quantity > 20)
                {
                    <span style='color: var(--rz-text-contrast-color)'>@data.Quantity</span>
                }
                else
                {
                    <span style='color: var(--rz-text-color)'>@data.Quantity</span>
                }
            </Template>
            <FooterTemplate>
                Total quantity: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orderDetails.Sum(o => o.Quantity))</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(OrderDetail.OrderID)" Title="OrderID">
            <FooterTemplate>
                Total records: <b>@orderDetails.Count()</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(OrderDetail.ProductID)" Title="ProductID/ProductName" 
            SortProperty="Product.ProductName" FilterProperty="Product.ProductName">
            <FooterTemplate>
                Most ordered product: <b>@orderDetails.GroupBy(o => o.Product.ProductName).OrderBy(g => g.Count()).Select(g => g.Key).FirstOrDefault()</b>,
                Least ordered product: <b>@orderDetails.GroupBy(o => o.Product.ProductName).OrderByDescending(g => g.Count()).Select(g => g.Key).FirstOrDefault()</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="Product.ProductName" Title="Product" />
        <RadzenDataGridColumn Property="@nameof(OrderDetail.Discount)" Title="Discount" FormatString="{0:P}">
            <FooterTemplate>
                Average discount: <b>@String.Format("{0:P}", orderDetails.Average(o => o.Discount))</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

@code {
    IEnumerable<OrderDetail> orderDetails;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        orderDetails = dbContext.OrderDetails.Include("Product").ToList();
    }

    void CellRender(DataGridCellRenderEventArgs<OrderDetail> args)
    {
        if (args.Column.Property == "Quantity")
        {
            args.Attributes.Add("style", $"background-color: var(--rz-info-lighter) !important;");
            args.Attributes.Add("class", args.Data.Quantity > 20 ? "my-class" : "my-other-class");
        }
    }
}

Could you change the colors for all themes to the HEX format?

2

Hi @Vitaliy_Tkachenko,

You can always define your own values, for example:

<RadzenDataGrid Style="--rz-info-lighter: rgba(44, 200, 200, 1)" ... >

The lighter colors are set with transparency on purpose - allowing smoother look & feel mainly used with selection or highlight on different background colors of underlying elements.

3 
<RadzenDataGrid Style="--rz-info-lighter: rgba(44, 200, 200, 1)" ... >

This approach won't work because I use a lot of themes and this will result in the color remaining the same when changing the theme to another one.

4

Also, the color will be different from what it was originally, and you will have to change each color for each theme, which will lead to another problem "updating themes"

but you can go through each similar color in the rgba with an eyedropper and change it to HEX: #d5f4f4. And the color does not change

image
image671×457 13.6 KB

image
image666×441 12.8 KB

5

You can use the css class added to RadzenLayout to assign different values:

:root:has(.rz-material) {
    --rz-info-lighter: rgba(30, 147, 243, 1);
}

:root:has(.rz-material-dark) {
    --rz-info-lighter: rgba(30, 147, 243, 1);
}

You can even define your own custom CSS variable and use it as suggested:

:root:has(.rz-material) {
    --my-frozen-column-background: rgba(30, 147, 243, 1);
}

:root:has(.rz-material-dark) {
    --my-frozen-column-background: rgba(30, 147, 243, 1);
}

and 

args.Attributes.Add("style", $"background-color: var(--my-frozen-column-background) !important;");

Changing the default color values in all themes to address a custom scenario is not viable and practical.