css 为blazor定制Radzen

dldeef67  于 2023-05-19  发布在  其他
关注(0)|答案(3)|浏览(97)

有人知道如何为Blazor定制Radzen组件的配色方案吗?我已经尝试通过找出我应该改变哪个css类来做到这一点,但我根本无法在Tree组件上做到这一点。

sxissh06

sxissh061#

如果你只是想使用一个黑暗的主题,然后取代它

<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">

用这个

<link rel="stylesheet" href="_content/Radzen.Blazor/css/dark.css">
ohfgkhjo

ohfgkhjo2#

您必须从源代码重新编译CSS,然后在index.html或_host.cshtml中引用新的css。
Radzen Blazor Source Code

fzsnzjdm

fzsnzjdm3#

如果只想更改配色方案,请在_Host.cshtml中切换样式表的导入顺序

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
<link href="css/site.css" rel="stylesheet" />

然后将以下内容添加到css/site.css

:root {
--rz-white: #ffffff;
--rz-black: #000000;
--rz-base-50: #fafafa;
--rz-base-100: #f5f5f5;
--rz-base-200: #eeeeee;
--rz-base-300: #e0e0e0;
--rz-base-400: #bdbdbd;
--rz-base-500: #9e9e9e;
--rz-base-600: #757575;
--rz-base-700: #616161;
--rz-base-800: #424242;
--rz-base-900: #212121;
--rz-primary: #8cbe44;
--rz-primary-light: #6966db;
--rz-primary-lighter: rgba(67, 64, 210, 0.12);
--rz-primary-dark: #3633a8;
--rz-primary-darker: #2e2c8f;
--rz-secondary: #e91e63;
--rz-secondary-light: #ed4b82;
--rz-secondary-lighter: rgba(233, 30, 99, 0.12);
--rz-secondary-dark: #ba184f;
--rz-secondary-darker: #9e1443;
--rz-info: #2196f3;
--rz-info-light: #4dabf5;
--rz-info-lighter: rgba(33, 150, 243, 0.2);
--rz-info-dark: #1a78c2;
--rz-info-darker: #1666a5;
--rz-success: #4caf50;
--rz-success-light: #70bf73;
--rz-success-lighter: rgba(76, 175, 80, 0.16);
--rz-success-dark: #3d8c40;
--rz-success-darker: #347736;
--rz-warning: #ff9800;
--rz-warning-light: #ffad33;
--rz-warning-lighter: rgba(255, 152, 0, 0.2);
--rz-warning-dark: #cc7a00;
--rz-warning-darker: #ad6700;
--rz-danger: #f44336;
--rz-danger-light: #f6695e;
--rz-danger-lighter: rgba(244, 67, 54, 0.2);
--rz-danger-dark: #c3362b;
--rz-danger-darker: #a62e25;
--rz-series-1: #3700b3;
--rz-series-2: #ba68c8;
--rz-series-3: #f06292;
--rz-series-4: #ff8a65;
--rz-series-5: #ffee58;
--rz-series-6: #9ccc65;
--rz-series-7: #26a69a;
--rz-series-8: #4fc3f7;
--rz-series-9: #7f5cce;
--rz-series-10: #ce93d8;
--rz-series-11: #f48fb1;
--rz-series-12: #ffab91;
--rz-series-13: #fff176;
--rz-series-14: #aed581;
--rz-series-15: #4db6ac;
--rz-series-16: #81d4fa;
--rz-series-17: #a58cdd;
--rz-series-18: #e1bee7;
--rz-series-19: #f8bbd0;
--rz-series-20: #ffccbc;
--rz-series-21: #fff59d;
--rz-series-22: #c5e1a5;
--rz-series-23: #80cbc4;
--rz-series-24: #b3e5fc;

}

相关问题