1

I am working with Radzen and Bootstrap 5 on a Blazor project. However I don't want the default colors that come with it.

I want to change Radzen primary colors so that my app has a different color theme.

So I added this to my app.css:

:root {
  --rz-primary: #3e5b87;
}

I also changed the order which app.css and stylesheets is loaded, putting it in last. head content

How can I change this primary color?

Inês Borges
  • 103
  • 1
  • 11

2 Answers2

0

I had a similar problem. The "material-base" CSS doesn't load. Change it to "material" instead and things should work. I'm able to change the root variables with no problem.

Shawn Hubbard
  • 932
  • 10
  • 23
0

I had the same problem. Update the order of the stylesheets in _Host.cshtml so that site.css appears after the Radzen theme CSS to fix it:

_Host.cshtml example:

    @page "/"
    @using Microsoft.AspNetCore.Components.Web
    @namespace StoreStocktake.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <base href="~/" />
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link rel="icon" type="image/png" href="favicon.png"/>
        <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
        <link href="css/site.css" rel="stylesheet" />
        <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
    </head>

site.css example:

:root {
    --rz-text-font-family: Arial;
    --rz-text-title-color: #333746;
    --rz-text-color: #333746;
    --rz-text-secondary-color: #394652;
    --rz-text-disabled-color: #DEDEE0;
    --rz-body-background-color: #ffffff;
    --rz-grid-border: 1px solid  #333746;
    --rz-grid-stripe-background-color: #DEDEE0;
    --rz-grid-cell-color: #333746;
    --rz-grid-hover-color: #394652;
    --rz-grid-selected-background-color: #394652;
    --rz-grid-hover-background-color: #394652;
    --rz-grid-column-resizer-helper-background-color: #333746;
    --rz-grid-header-background-color: #DEDEE0;
    --rz-grid-filter-focus-color: #394652;
    --rz-grid-apply-filter-button-background-color: #394652;
    --rz-grid-foot-background-color: #ffffff;
    --rz-grid-header-filter-icon-active-color: #00B2A9;
    --rz-primary: #333746;
    --rz-secondary: #394652;
    --rz-success: #00B2A9;
    --rz-info: #DEDEE0;
    --rz-warning: #FFB500;
    --rz-danger: #ED0089;
}
Gilbor
  • 1
  • 2