Menu
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.
How can I change this primary color?
261
asked Nov 01 '25 07:11
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;
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With