Skip to content

Instantly share code, notes, and snippets.

@duongphuhiep

duongphuhiep/radzen-material.css

Created July 18, 2025 23:24
Show Gist options
  • Save duongphuhiep/dac590d14b9d43469f4547e554663c4b to your computer and use it in GitHub Desktop.
Save duongphuhiep/dac590d14b9d43469f4547e554663c4b to your computer and use it in GitHub Desktop.
Download ZIP
Radzen's Material theme complementary: supporting dark, light variant, react to prefers-color-scheme and data-theme attributes
Raw
radzen-material.css
/* Default value */
:root {
color-scheme: light;
--rz-alert-message-margin: 0.125rem 0;
--rz-alert-icon-margin: 0.125rem 0;
--rz-base: #eeeeee;
--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-base-light: #f5f5f5;
--rz-base-dark: #757575;
--rz-base-darker: #212121;
--rz-primary: #4340d2;
--rz-primary-light: #6966db;
--rz-primary-lighter: rgba(67, 64, 210, 0.12);
--rz-primary-dark: #3633a8;
--rz-primary-darker: #2e2c8f;
--rz-secondary: #e31c65;
--rz-secondary-light: #e94984;
--rz-secondary-lighter: rgba(227, 28, 101, 0.12);
--rz-secondary-dark: #b61651;
--rz-secondary-darker: #9a1345;
--rz-on-base: #212121;
--rz-on-base-light: #212121;
--rz-on-base-lighter: #212121;
--rz-on-primary-lighter: #4340d2;
--rz-on-secondary-lighter: #e31c65;
--rz-body-background-color: var(--rz-base-100);
--rz-text-title-color: var(--rz-base-900);
--rz-text-color: var(--rz-base-800);
--rz-text-secondary-color: var(--rz-base-700);
--rz-text-tertiary-color: var(--rz-base-600);
--rz-text-disabled-color: var(--rz-base-400);
--rz-text-body1-color: var(--rz-text-color);
--rz-text-body2-color: var(--rz-text-color);
--rz-text-button-color: var(--rz-text-color);
--rz-text-caption-color: var(--rz-text-color);
--rz-text-overline-color: var(--rz-text-color);
--rz-base-background-color: var(--rz-white);
--rz-border-normal: var(--rz-border-width) solid var(--rz-base-400);
--rz-border-hover: var(--rz-border-width) solid var(--rz-base-900);
--rz-border-disabled: var(--rz-border-width) solid var(--rz-base-300);
--rz-accordion-item-border: var(--rz-border-base-200);
--rz-button-focus-outline: var(--rz-outline-normal);
--rz-card-border: var(--rz-border-base-300);
--rz-carousel-pager-button-hover-background-color: var(--rz-base-dark);
--rz-carousel-pager-button-hover-color: var(--rz-on-base-dark);
--rz-carousel-pager-button-active-background-color: var(--rz-base-dark);
--rz-carousel-pager-button-active-color: var(--rz-on-base-dark);
--rz-chart-axis-label-color: var(--rz-base-500);
--rz-checkbox-checked-disabled-background-color: var(--rz-base-400);
--rz-checkbox-checked-disabled-border: var(--rz-border-base-400);
--rz-chip-background-color: var(--rz-base-200);
--rz-datalist-border: var(--rz-border-base-300);
--rz-datalist-item-border: var(--rz-border-base-300);
--rz-datepicker-calendar-hover-color: var(--rz-text-title-color);
--rz-datepicker-calendar-hover-background-color: var(--rz-base-100);
--rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-light);
--rz-datepicker-calendar-selected-hover-background-color: var(
--rz-secondary-light
);
--rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-text-color);
--rz-timepicker-button-background-color: var(--rz-base-300);
--rz-timepicker-border: var(--rz-border-base-300);
--rz-dialog-background-color: var(--rz-base-background-color);
--rz-dialog-title-background-color: var(--rz-base-background-color);
--rz-dialog-mask-background-color: var(--rz-base-800);
--rz-dropdown-item-hover-background-color: var(--rz-base-100);
--rz-dropdown-item-hover-color: var(--rz-text-title-color);
--rz-dropdown-filter-border: var(--rz-border-base-200);
--rz-dropdown-open-background-color: var(--rz-base-background-color);
--rz-editor-border: var(--rz-border-base-300);
--rz-editor-separator-background-color: var(--rz-base-200);
--rz-fieldset-border: var(--rz-border-base-300);
--rz-fieldset-legend-color: var(--rz-text-color);
--rz-fieldset-toggle-color: var(--rz-text-tertiary-color);
--rz-form-field-filled-background-color: var(--rz-base-200);
--rz-form-field-filled-hover-background-color: var(--rz-base-300);
--rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-200);
--rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-300);
--rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-200);
--rz-grid-cell-border: var(--rz-border-base-300);
--rz-grid-bottom-cell-border: var(--rz-border-base-300);
--rz-grid-hover-background-color: var(--rz-base-100);
--rz-grid-hover-color: var(--rz-text-title-color);
--rz-grid-header-cell-border-bottom: var(--rz-border-base-300);
--rz-grid-header-sorted-background-color: var(--rz-base-200);
--rz-grid-foot-background-color: var(--rz-base-100);
--rz-grid-filter-background-color: var(--rz-base-background-color);
--rz-grid-filter-buttons-background-color: var(--rz-base-background-color);
--rz-grid-clear-filter-button-background-color: var(
--rz-base-background-color
);
--rz-grid-apply-filter-button-background-color: var(
--rz-base-background-color
);
--rz-grid-border: var(--rz-border-base-300);
--rz-grid-stripe-background-color: var(--rz-base-50);
--rz-grid-detail-template-background-color: var(--rz-base-100);
--rz-grid-frozen-cell-border: var(--rz-border-base-300);
--rz-grid-group-header-item-background-color: var(--rz-base-200);
--rz-grid-group-header-item-border: var(--rz-border-base-200);
--rz-header-background-color: var(--rz-primary);
--rz-header-color: var(--rz-on-primary);
--rz-listbox-filter-border: var(--rz-border-base-200);
--rz-menu-background-color: var(--rz-base-background-color);
--rz-menu-item-hover-color: var(--rz-text-title-color);
--rz-menu-item-hover-background-color: var(--rz-base-100);
--rz-menu-item-selected-color: var(--rz-text-title-color);
--rz-menu-item-icon-hover-color: var(--rz-text-title-color);
--rz-menu-top-item-color: var(--rz-on-primary);
--rz-menu-top-item-background-color: var(--rz-primary);
--rz-menu-top-item-hover-color: var(--rz-on-primary);
--rz-menu-top-item-hover-background-color: transparent;
--rz-menu-top-item-selected-color: var(--rz-on-primary);
--rz-menu-top-item-icon-color: var(--rz-on-primary);
--rz-menu-top-item-icon-hover-color: var(--rz-on-primary);
--rz-notification-container-background-color: var(--rz-white);
--rz-overlay-background-color: var(--rz-base-background-color);
--rz-pager-numeric-button-hover-background-color: var(--rz-base-100);
--rz-pager-numeric-button-hover-color: var(--rz-text-title-color);
--rz-pager-numeric-button-selected-color: var(--rz-on-primary-lighter);
--rz-pager-summary-color: var(--rz-text-tertiary-color);
--rz-panel-menu-item-border: var(--rz-border-base-200);
--rz-panel-menu-item-color: var(--rz-text-title-color);
--rz-panel-menu-item-hover-color: var(--rz-text-title-color);
--rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.04);
--rz-panel-menu-item-2nd-level-color: var(--rz-text-tertiary-color);
--rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-100);
--rz-panel-menu-item-3rd-level-color: var(--rz-text-tertiary-color);
--rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-100);
--rz-panel-menu-icon-color: var(--rz-text-tertiary-color);
--rz-profile-menu-background-color: var(--rz-base-background-color);
--rz-profile-menu-top-item-background-color: var(--rz-primary);
--rz-profile-menu-toggle-button-color: var(--rz-text-contrast-color);
--rz-profile-menu-item-hover-background-color: var(--rz-base-100);
--rz-radio-checked-color: var(--rz-text-contrast-color);
--rz-rating-focus-color: var(--rz-primary-darker);
--rz-scheduler-border: var(--rz-border-base-300);
--rz-scheduler-border-color: var(--rz-base-300);
--rz-scheduler-minor-border-color: var(--rz-base-200);
--rz-scheduler-color: var(--rz-text-tertiary-color);
--rz-scheduler-view-button-border: var(--rz-border-base-300);
--rz-scheduler-view-selected-border-color: var(--rz-base-300);
--rz-scheduler-header-border: var(--rz-border-base-300);
--rz-scheduler-weekend-color: var(--rz-text-disabled-color);
--rz-scheduler-weekend-background-color: var(--rz-base-50);
--rz-scheduler-other-month-background-color: var(--rz-base-100);
--rz-scrollbar-color: rgba(0, 0, 0, 0.12);
--rz-selectbar-background-color: var(--rz-base-backgorund-color);
--rz-selectbar-border: var(--rz-border-base-300);
--rz-selectbar-selected-border: var(--rz-border-base-300);
--rz-sidebar-toggle-color: var(--rz-on-primary);
--rz-sidebar-toggle-hover-color: var(--rz-on-primary-light);
--rz-sidebar-toggle-hover-background-color: var(--rz-primary-light);
--rz-sidebar-border-inline-end: var(--rz-border-base-200);
--rz-sidebar-color: var(--rz-text-color);
--rz-slider-disabled-background-color: var(--rz-base-300);
--rz-slider-disabled-range-background-color: var(--rz-base-500);
--rz-slider-disabled-handle-background-color: var(--rz-base-500);
--rz-splitter-bar-color: var(--rz-text-secondary-color);
--rz-steps-color: var(--rz-text-tertiary-color);
--rz-steps-number-color: var(--rz-text-contrast-color);
--rz-steps-number-background-color: var(--rz-base-500);
--rz-switch-background-color: var(--rz-base-400);
--rz-switch-circle-background-color: var(--rz-text-contrast-color);
--rz-tabs-tab-selected-top-border-color: var(--rz-secondary);
--rz-tabs-tab-hover-background-color: var(--rz-base-200);
--rz-tabs-tab-focus-background-color: var(--rz-base-200);
--rz-timeline-point-background-color: var(--rz-base-300);
--rz-timeline-line-color: var(--rz-base-300);
--rz-tree-node-hover-background-color: var(--rz-base-100);
--rz-tree-node-hover-color: var(--rz-text-title-color);
--rz-tree-transition: var(--rz-transition-all), width 0, height 0;
--rz-upload-button-bar-background-color: var(--rz-base-100);
--rz-upload-files-remove-background-color: var(--rz-base-200);
--rz-upload-choose-background-color: var(--rz-base-200);
--rz-upload-choose-hover-background-color: var(--rz-base-200);
--rz-upload-choose-hover-color: var(--rz-text-title-color);
--rz-upload-choose-active-background-color: var(--rz-base-200);
--rz-upload-choose-active-color: var(--rz-text-title-color);
--rz-upload-cancel-background-color: var(--rz-base-200);
}
/* 3. Prefers-color-scheme (lowest precedence) */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--rz-alert-message-margin: 0;
--rz-alert-icon-margin: 0;
--rz-base: #383838;
--rz-base-50: #e0e0e0;
--rz-base-100: #a0a0a0;
--rz-base-200: #6c6c6c;
--rz-base-300: #545454;
--rz-base-400: #383838;
--rz-base-500: #333333;
--rz-base-600: #2e2e2e;
--rz-base-700: #252525;
--rz-base-800: #1e1e1e;
--rz-base-900: #121212;
--rz-base-light: #a0a0a0;
--rz-base-dark: #252525;
--rz-base-darker: #000000;
--rz-primary: #bb86fc;
--rz-primary-light: #c99efd;
--rz-primary-lighter: rgba(187, 134, 252, 0.12);
--rz-primary-dark: #966bca;
--rz-primary-darker: #7f5bab;
--rz-secondary: #01a299;
--rz-secondary-light: #34b5ad;
--rz-secondary-lighter: rgba(1, 162, 153, 0.12);
--rz-secondary-dark: #01827a;
--rz-secondary-darker: #016e68;
--rz-on-base: #ffffff;
--rz-on-base-light: #121212;
--rz-on-base-lighter: #121212;
--rz-on-primary-lighter: #bb86fc;
--rz-on-secondary-lighter: #01a299;
--rz-body-background-color: var(--rz-base-900);
--rz-text-title-color: var(--rz-base-50);
--rz-text-color: var(--rz-base-50);
--rz-text-secondary-color: var(--rz-base-100);
--rz-text-tertiary-color: var(--rz-base-200);
--rz-text-disabled-color: var(--rz-base-300);
--rz-text-body1-color: var(--rz-text-title-color);
--rz-text-body2-color: var(--rz-text-title-color);
--rz-text-button-color: var(--rz-text-title-color);
--rz-text-caption-color: var(--rz-text-title-color);
--rz-text-overline-color: var(--rz-text-title-color);
--rz-base-background-color: var(--rz-base-800);
--rz-border-normal: var(--rz-border-width) solid var(--rz-base-300);
--rz-border-hover: var(--rz-border-width) solid var(--rz-base-100);
--rz-border-disabled: var(--rz-border-width) solid var(--rz-base-500);
--rz-accordion-item-border: var(--rz-border-base-900);
--rz-button-focus-outline: var(--rz-outline-focus);
--rz-card-border: var(--rz-border-base-500);
--rz-carousel-pager-button-hover-background-color: var(--rz-base-200);
--rz-carousel-pager-button-hover-color: var(--rz-on-base);
--rz-carousel-pager-button-active-background-color: var(--rz-base-50);
--rz-carousel-pager-button-active-color: var(--rz-on-base-light);
--rz-chart-axis-label-color: var(--rz-text-secondary-color);
--rz-checkbox-checked-disabled-background-color: var(--rz-base-300);
--rz-checkbox-checked-disabled-border: var(--rz-border-300);
--rz-chip-background-color: var(--rz-base-600);
--rz-datalist-border: var(--rz-border-base-600);
--rz-datalist-item-border: var(--rz-border-base-600);
--rz-datepicker-calendar-hover-color: var(--rz-white);
--rz-datepicker-calendar-hover-background-color: var(--rz-base-600);
--rz-datepicker-calendar-selected-hover-color: var(
--rz-on-secondary-dark
);
--rz-datepicker-calendar-selected-hover-background-color: var(
--rz-secondary-dark
);
--rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-base-100);
--rz-timepicker-button-background-color: var(--rz-base-700);
--rz-timepicker-border: var(--rz-border-base-600);
--rz-dialog-background-color: var(--rz-base-900);
--rz-dialog-title-background-color: var(--rz-base-900);
--rz-dialog-mask-background-color: var(--rz-black);
--rz-dropdown-item-hover-background-color: var(--rz-base-400);
--rz-dropdown-item-hover-color: var(--rz-white);
--rz-dropdown-filter-border: var(--rz-border-base-500);
--rz-dropdown-open-background-color: var(--rz-base-600);
--rz-editor-border: var(--rz-border-base-600);
--rz-editor-separator-background-color: var(--rz-base-600);
--rz-fieldset-border: var(--rz-border-base-600);
--rz-fieldset-legend-color: var(--rz-text-secondary-color);
--rz-fieldset-toggle-color: var(--rz-text-secondary-color);
--rz-form-field-filled-background-color: var(--rz-base-600);
--rz-form-field-filled-hover-background-color: var(--rz-base-500);
--rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-600);
--rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-500);
--rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-600);
--rz-grid-cell-border: var(--rz-border-base-600);
--rz-grid-bottom-cell-border: var(--rz-border-base-600);
--rz-grid-hover-background-color: var(--rz-base-600);
--rz-grid-hover-color: var(--rz-white);
--rz-grid-header-cell-border-bottom: var(--rz-border-base-600);
--rz-grid-header-sorted-background-color: var(--rz-base-600);
--rz-grid-foot-background-color: var(--rz-base-600);
--rz-grid-filter-background-color: var(--rz-base-600);
--rz-grid-filter-buttons-background-color: var(--rz-base-600);
--rz-grid-clear-filter-button-background-color: var(--rz-base-600);
--rz-grid-apply-filter-button-background-color: var(--rz-base-600);
--rz-grid-border: var(--rz-border-base-600);
--rz-grid-stripe-background-color: var(--rz-base-900);
--rz-grid-detail-template-background-color: var(--rz-base-900);
--rz-grid-frozen-cell-border: var(--rz-border-base-600);
--rz-grid-group-header-item-background-color: var(--rz-base-600);
--rz-grid-group-header-item-border: var(--rz-border-base-600);
--rz-header-background-color: var(--rz-base-700);
--rz-header-color: var(--rz-text-color);
--rz-listbox-filter-border: var(--rz-border-base-500);
--rz-menu-background-color: var(--rz-base-700);
--rz-menu-item-hover-color: var(--rz-white);
--rz-menu-item-hover-background-color: var(--rz-base-400);
--rz-menu-item-selected-color: var(--rz-primary);
--rz-menu-item-icon-hover-color: var(--rz-white);
--rz-menu-top-item-color: var(--rz-text-color);
--rz-menu-top-item-background-color: var(--rz-base-700);
--rz-menu-top-item-hover-color: var(--rz-primary);
--rz-menu-top-item-hover-background-color: var(--rz-base-700);
--rz-menu-top-item-selected-color: var(--rz-primary);
--rz-menu-top-item-icon-color: var(--rz-text-color);
--rz-menu-top-item-icon-hover-color: var(--rz-primary);
--rz-notification-container-background-color: var(--rz-base-800);
--rz-overlay-background-color: var(--rz-base-600);
--rz-pager-numeric-button-hover-background-color: var(--rz-base-600);
--rz-pager-numeric-button-hover-color: var(--rz-white);
--rz-pager-numeric-button-selected-color: var(--rz-primary);
--rz-pager-summary-color: var(--rz-text-secondary-color);
--rz-panel-menu-item-border: var(--rz-border-base-600);
--rz-panel-menu-item-color: var(--rz-text-color);
--rz-panel-menu-item-hover-color: var(--rz-white);
--rz-panel-menu-item-hover-background-color: var(--rz-base-600);
--rz-panel-menu-item-2nd-level-color: var(--rz-text-color);
--rz-panel-menu-item-2nd-level-hover-background-color: var(
--rz-base-600
);
--rz-panel-menu-item-3rd-level-color: var(--rz-text-color);
--rz-panel-menu-item-3rd-level-hover-background-color: var(
--rz-base-600
);
--rz-panel-menu-icon-color: var(--rz-text-secondary-color);
--rz-profile-menu-background-color: var(--rz-base-700);
--rz-profile-menu-top-item-background-color: var(--rz-base-700);
--rz-profile-menu-toggle-button-color: var(--rz-text-color);
--rz-profile-menu-item-hover-background-color: var(--rz-base-400);
--rz-radio-checked-color: var(--rz-text-color);
--rz-rating-focus-color: var(--rz-primary-light);
--rz-scheduler-border: var(--rz-border-base-600);
--rz-scheduler-border-color: var(--rz-base-600);
--rz-scheduler-minor-border-color: var(--rz-base-700);
--rz-scheduler-color: var(--rz-text-secondary-color);
--rz-scheduler-view-button-border: var(--rz-border-base-600);
--rz-scheduler-view-selected-border-color: var(--rz-base-600);
--rz-scheduler-header-border: var(--rz-border-base-600);
--rz-scheduler-weekend-color: var(--rz-text-tertiary-color);
--rz-scheduler-weekend-background-color: var(--rz-base-700);
--rz-scheduler-other-month-background-color: var(--rz-base-900);
--rz-scrollbar-color: rgba(255, 255, 255, 0.12);
--rz-selectbar-background-color: var(--rz-base-background-color);
--rz-selectbar-border: var(--rz-border-base-600);
--rz-selectbar-selected-border: var(--rz-border-base-600);
--rz-sidebar-toggle-color: var(--rz-text-color);
--rz-sidebar-toggle-hover-color: var(--rz-white);
--rz-sidebar-toggle-hover-background-color: var(--rz-base-500);
--rz-sidebar-border-inline-end: var(--rz-border-base-800);
--rz-sidebar-color: var(--rz-white);
--rz-slider-disabled-background-color: var(--rz-base-400);
--rz-slider-disabled-range-background-color: var(--rz-base-200);
--rz-slider-disabled-handle-background-color: var(--rz-base-200);
--rz-splitter-bar-color: var(--rz-text-color);
--rz-steps-color: var(--rz-text-secondary-color);
--rz-steps-number-color: var(--rz-text-secondary-color);
--rz-steps-number-background-color: var(--rz-base-600);
--rz-switch-background-color: var(--rz-base-600);
--rz-switch-circle-background-color: var(--rz-text-color);
--rz-tabs-tab-selected-top-border-color: var(--rz-primary);
--rz-tabs-tab-hover-background-color: var(--rz-base-600);
--rz-tabs-tab-focus-background-color: var(--rz-base-background-color);
--rz-timeline-point-background-color: var(--rz-base-200);
--rz-timeline-line-color: var(--rz-base-200);
--rz-tree-node-hover-background-color: var(--rz-base-600);
--rz-tree-node-hover-color: var(--rz-white);
--rz-tree-transition: var(--rz-transition-all);
--rz-upload-button-bar-background-color: var(--rz-base-700);
--rz-upload-files-remove-background-color: var(--rz-base-600);
--rz-upload-choose-background-color: var(--rz-base-600);
--rz-upload-choose-hover-background-color: var(--rz-base-400);
--rz-upload-choose-hover-color: var(--rz-white);
--rz-upload-choose-active-background-color: var(--rz-base-400);
--rz-upload-choose-active-color: var(--rz-white);
--rz-upload-cancel-background-color: var(--rz-base-600);
}
}
/* 2. Data-theme attribute (medium precedence) */
[data-theme="light"] {
color-scheme: light;
--rz-alert-message-margin: 0.125rem 0;
--rz-alert-icon-margin: 0.125rem 0;
--rz-base: #eeeeee;
--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-base-light: #f5f5f5;
--rz-base-dark: #757575;
--rz-base-darker: #212121;
--rz-primary: #4340d2;
--rz-primary-light: #6966db;
--rz-primary-lighter: rgba(67, 64, 210, 0.12);
--rz-primary-dark: #3633a8;
--rz-primary-darker: #2e2c8f;
--rz-secondary: #e31c65;
--rz-secondary-light: #e94984;
--rz-secondary-lighter: rgba(227, 28, 101, 0.12);
--rz-secondary-dark: #b61651;
--rz-secondary-darker: #9a1345;
--rz-on-base: #212121;
--rz-on-base-light: #212121;
--rz-on-base-lighter: #212121;
--rz-on-primary-lighter: #4340d2;
--rz-on-secondary-lighter: #e31c65;
--rz-body-background-color: var(--rz-base-100);
--rz-text-title-color: var(--rz-base-900);
--rz-text-color: var(--rz-base-800);
--rz-text-secondary-color: var(--rz-base-700);
--rz-text-tertiary-color: var(--rz-base-600);
--rz-text-disabled-color: var(--rz-base-400);
--rz-text-body1-color: var(--rz-text-color);
--rz-text-body2-color: var(--rz-text-color);
--rz-text-button-color: var(--rz-text-color);
--rz-text-caption-color: var(--rz-text-color);
--rz-text-overline-color: var(--rz-text-color);
--rz-base-background-color: var(--rz-white);
--rz-border-normal: var(--rz-border-width) solid var(--rz-base-400);
--rz-border-hover: var(--rz-border-width) solid var(--rz-base-900);
--rz-border-disabled: var(--rz-border-width) solid var(--rz-base-300);
--rz-accordion-item-border: var(--rz-border-base-200);
--rz-button-focus-outline: var(--rz-outline-normal);
--rz-card-border: var(--rz-border-base-300);
--rz-carousel-pager-button-hover-background-color: var(--rz-base-dark);
--rz-carousel-pager-button-hover-color: var(--rz-on-base-dark);
--rz-carousel-pager-button-active-background-color: var(--rz-base-dark);
--rz-carousel-pager-button-active-color: var(--rz-on-base-dark);
--rz-chart-axis-label-color: var(--rz-base-500);
--rz-checkbox-checked-disabled-background-color: var(--rz-base-400);
--rz-checkbox-checked-disabled-border: var(--rz-border-base-400);
--rz-chip-background-color: var(--rz-base-200);
--rz-datalist-border: var(--rz-border-base-300);
--rz-datalist-item-border: var(--rz-border-base-300);
--rz-datepicker-calendar-hover-color: var(--rz-text-title-color);
--rz-datepicker-calendar-hover-background-color: var(--rz-base-100);
--rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-light);
--rz-datepicker-calendar-selected-hover-background-color: var(
--rz-secondary-light
);
--rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-text-color);
--rz-timepicker-button-background-color: var(--rz-base-300);
--rz-timepicker-border: var(--rz-border-base-300);
--rz-dialog-background-color: var(--rz-base-background-color);
--rz-dialog-title-background-color: var(--rz-base-background-color);
--rz-dialog-mask-background-color: var(--rz-base-800);
--rz-dropdown-item-hover-background-color: var(--rz-base-100);
--rz-dropdown-item-hover-color: var(--rz-text-title-color);
--rz-dropdown-filter-border: var(--rz-border-base-200);
--rz-dropdown-open-background-color: var(--rz-base-background-color);
--rz-editor-border: var(--rz-border-base-300);
--rz-editor-separator-background-color: var(--rz-base-200);
--rz-fieldset-border: var(--rz-border-base-300);
--rz-fieldset-legend-color: var(--rz-text-color);
--rz-fieldset-toggle-color: var(--rz-text-tertiary-color);
--rz-form-field-filled-background-color: var(--rz-base-200);
--rz-form-field-filled-hover-background-color: var(--rz-base-300);
--rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-200);
--rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-300);
--rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-200);
--rz-grid-cell-border: var(--rz-border-base-300);
--rz-grid-bottom-cell-border: var(--rz-border-base-300);
--rz-grid-hover-background-color: var(--rz-base-100);
--rz-grid-hover-color: var(--rz-text-title-color);
--rz-grid-header-cell-border-bottom: var(--rz-border-base-300);
--rz-grid-header-sorted-background-color: var(--rz-base-200);
--rz-grid-foot-background-color: var(--rz-base-100);
--rz-grid-filter-background-color: var(--rz-base-background-color);
--rz-grid-filter-buttons-background-color: var(--rz-base-background-color);
--rz-grid-clear-filter-button-background-color: var(
--rz-base-background-color
);
--rz-grid-apply-filter-button-background-color: var(
--rz-base-background-color
);
--rz-grid-border: var(--rz-border-base-300);
--rz-grid-stripe-background-color: var(--rz-base-50);
--rz-grid-detail-template-background-color: var(--rz-base-100);
--rz-grid-frozen-cell-border: var(--rz-border-base-300);
--rz-grid-group-header-item-background-color: var(--rz-base-200);
--rz-grid-group-header-item-border: var(--rz-border-base-200);
--rz-header-background-color: var(--rz-primary);
--rz-header-color: var(--rz-on-primary);
--rz-listbox-filter-border: var(--rz-border-base-200);
--rz-menu-background-color: var(--rz-base-background-color);
--rz-menu-item-hover-color: var(--rz-text-title-color);
--rz-menu-item-hover-background-color: var(--rz-base-100);
--rz-menu-item-selected-color: var(--rz-text-title-color);
--rz-menu-item-icon-hover-color: var(--rz-text-title-color);
--rz-menu-top-item-color: var(--rz-on-primary);
--rz-menu-top-item-background-color: var(--rz-primary);
--rz-menu-top-item-hover-color: var(--rz-on-primary);
--rz-menu-top-item-hover-background-color: transparent;
--rz-menu-top-item-selected-color: var(--rz-on-primary);
--rz-menu-top-item-icon-color: var(--rz-on-primary);
--rz-menu-top-item-icon-hover-color: var(--rz-on-primary);
--rz-notification-container-background-color: var(--rz-white);
--rz-overlay-background-color: var(--rz-base-background-color);
--rz-pager-numeric-button-hover-background-color: var(--rz-base-100);
--rz-pager-numeric-button-hover-color: var(--rz-text-title-color);
--rz-pager-numeric-button-selected-color: var(--rz-on-primary-lighter);
--rz-pager-summary-color: var(--rz-text-tertiary-color);
--rz-panel-menu-item-border: var(--rz-border-base-200);
--rz-panel-menu-item-color: var(--rz-text-title-color);
--rz-panel-menu-item-hover-color: var(--rz-text-title-color);
--rz-panel-menu-item-hover-background-color: rgba(0, 0, 0, 0.04);
--rz-panel-menu-item-2nd-level-color: var(--rz-text-tertiary-color);
--rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-100);
--rz-panel-menu-item-3rd-level-color: var(--rz-text-tertiary-color);
--rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-100);
--rz-panel-menu-icon-color: var(--rz-text-tertiary-color);
--rz-profile-menu-background-color: var(--rz-base-background-color);
--rz-profile-menu-top-item-background-color: var(--rz-primary);
--rz-profile-menu-toggle-button-color: var(--rz-text-contrast-color);
--rz-profile-menu-item-hover-background-color: var(--rz-base-100);
--rz-radio-checked-color: var(--rz-text-contrast-color);
--rz-rating-focus-color: var(--rz-primary-darker);
--rz-scheduler-border: var(--rz-border-base-300);
--rz-scheduler-border-color: var(--rz-base-300);
--rz-scheduler-minor-border-color: var(--rz-base-200);
--rz-scheduler-color: var(--rz-text-tertiary-color);
--rz-scheduler-view-button-border: var(--rz-border-base-300);
--rz-scheduler-view-selected-border-color: var(--rz-base-300);
--rz-scheduler-header-border: var(--rz-border-base-300);
--rz-scheduler-weekend-color: var(--rz-text-disabled-color);
--rz-scheduler-weekend-background-color: var(--rz-base-50);
--rz-scheduler-other-month-background-color: var(--rz-base-100);
--rz-scrollbar-color: rgba(0, 0, 0, 0.12);
--rz-selectbar-background-color: var(--rz-base-backgorund-color);
--rz-selectbar-border: var(--rz-border-base-300);
--rz-selectbar-selected-border: var(--rz-border-base-300);
--rz-sidebar-toggle-color: var(--rz-on-primary);
--rz-sidebar-toggle-hover-color: var(--rz-on-primary-light);
--rz-sidebar-toggle-hover-background-color: var(--rz-primary-light);
--rz-sidebar-border-inline-end: var(--rz-border-base-200);
--rz-sidebar-color: var(--rz-text-color);
--rz-slider-disabled-background-color: var(--rz-base-300);
--rz-slider-disabled-range-background-color: var(--rz-base-500);
--rz-slider-disabled-handle-background-color: var(--rz-base-500);
--rz-splitter-bar-color: var(--rz-text-secondary-color);
--rz-steps-color: var(--rz-text-tertiary-color);
--rz-steps-number-color: var(--rz-text-contrast-color);
--rz-steps-number-background-color: var(--rz-base-500);
--rz-switch-background-color: var(--rz-base-400);
--rz-switch-circle-background-color: var(--rz-text-contrast-color);
--rz-tabs-tab-selected-top-border-color: var(--rz-secondary);
--rz-tabs-tab-hover-background-color: var(--rz-base-200);
--rz-tabs-tab-focus-background-color: var(--rz-base-200);
--rz-timeline-point-background-color: var(--rz-base-300);
--rz-timeline-line-color: var(--rz-base-300);
--rz-tree-node-hover-background-color: var(--rz-base-100);
--rz-tree-node-hover-color: var(--rz-text-title-color);
--rz-tree-transition: var(--rz-transition-all), width 0, height 0;
--rz-upload-button-bar-background-color: var(--rz-base-100);
--rz-upload-files-remove-background-color: var(--rz-base-200);
--rz-upload-choose-background-color: var(--rz-base-200);
--rz-upload-choose-hover-background-color: var(--rz-base-200);
--rz-upload-choose-hover-color: var(--rz-text-title-color);
--rz-upload-choose-active-background-color: var(--rz-base-200);
--rz-upload-choose-active-color: var(--rz-text-title-color);
--rz-upload-cancel-background-color: var(--rz-base-200);
}
[data-theme="dark"] {
color-scheme: dark;
--rz-alert-message-margin: 0;
--rz-alert-icon-margin: 0;
--rz-base: #383838;
--rz-base-50: #e0e0e0;
--rz-base-100: #a0a0a0;
--rz-base-200: #6c6c6c;
--rz-base-300: #545454;
--rz-base-400: #383838;
--rz-base-500: #333333;
--rz-base-600: #2e2e2e;
--rz-base-700: #252525;
--rz-base-800: #1e1e1e;
--rz-base-900: #121212;
--rz-base-light: #a0a0a0;
--rz-base-dark: #252525;
--rz-base-darker: #000000;
--rz-primary: #bb86fc;
--rz-primary-light: #c99efd;
--rz-primary-lighter: rgba(187, 134, 252, 0.12);
--rz-primary-dark: #966bca;
--rz-primary-darker: #7f5bab;
--rz-secondary: #01a299;
--rz-secondary-light: #34b5ad;
--rz-secondary-lighter: rgba(1, 162, 153, 0.12);
--rz-secondary-dark: #01827a;
--rz-secondary-darker: #016e68;
--rz-on-base: #ffffff;
--rz-on-base-light: #121212;
--rz-on-base-lighter: #121212;
--rz-on-primary-lighter: #bb86fc;
--rz-on-secondary-lighter: #01a299;
--rz-body-background-color: var(--rz-base-900);
--rz-text-title-color: var(--rz-base-50);
--rz-text-color: var(--rz-base-50);
--rz-text-secondary-color: var(--rz-base-100);
--rz-text-tertiary-color: var(--rz-base-200);
--rz-text-disabled-color: var(--rz-base-300);
--rz-text-body1-color: var(--rz-text-title-color);
--rz-text-body2-color: var(--rz-text-title-color);
--rz-text-button-color: var(--rz-text-title-color);
--rz-text-caption-color: var(--rz-text-title-color);
--rz-text-overline-color: var(--rz-text-title-color);
--rz-base-background-color: var(--rz-base-800);
--rz-border-normal: var(--rz-border-width) solid var(--rz-base-300);
--rz-border-hover: var(--rz-border-width) solid var(--rz-base-100);
--rz-border-disabled: var(--rz-border-width) solid var(--rz-base-500);
--rz-accordion-item-border: var(--rz-border-base-900);
--rz-button-focus-outline: var(--rz-outline-focus);
--rz-card-border: var(--rz-border-base-500);
--rz-carousel-pager-button-hover-background-color: var(--rz-base-200);
--rz-carousel-pager-button-hover-color: var(--rz-on-base);
--rz-carousel-pager-button-active-background-color: var(--rz-base-50);
--rz-carousel-pager-button-active-color: var(--rz-on-base-light);
--rz-chart-axis-label-color: var(--rz-text-secondary-color);
--rz-checkbox-checked-disabled-background-color: var(--rz-base-300);
--rz-checkbox-checked-disabled-border: var(--rz-border-300);
--rz-chip-background-color: var(--rz-base-600);
--rz-datalist-border: var(--rz-border-base-600);
--rz-datalist-item-border: var(--rz-border-base-600);
--rz-datepicker-calendar-hover-color: var(--rz-white);
--rz-datepicker-calendar-hover-background-color: var(--rz-base-600);
--rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-dark);
--rz-datepicker-calendar-selected-hover-background-color: var(
--rz-secondary-dark
);
--rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-base-100);
--rz-timepicker-button-background-color: var(--rz-base-700);
--rz-timepicker-border: var(--rz-border-base-600);
--rz-dialog-background-color: var(--rz-base-900);
--rz-dialog-title-background-color: var(--rz-base-900);
--rz-dialog-mask-background-color: var(--rz-black);
--rz-dropdown-item-hover-background-color: var(--rz-base-400);
--rz-dropdown-item-hover-color: var(--rz-white);
--rz-dropdown-filter-border: var(--rz-border-base-500);
--rz-dropdown-open-background-color: var(--rz-base-600);
--rz-editor-border: var(--rz-border-base-600);
--rz-editor-separator-background-color: var(--rz-base-600);
--rz-fieldset-border: var(--rz-border-base-600);
--rz-fieldset-legend-color: var(--rz-text-secondary-color);
--rz-fieldset-toggle-color: var(--rz-text-secondary-color);
--rz-form-field-filled-background-color: var(--rz-base-600);
--rz-form-field-filled-hover-background-color: var(--rz-base-500);
--rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-600);
--rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-500);
--rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-600);
--rz-grid-cell-border: var(--rz-border-base-600);
--rz-grid-bottom-cell-border: var(--rz-border-base-600);
--rz-grid-hover-background-color: var(--rz-base-600);
--rz-grid-hover-color: var(--rz-white);
--rz-grid-header-cell-border-bottom: var(--rz-border-base-600);
--rz-grid-header-sorted-background-color: var(--rz-base-600);
--rz-grid-foot-background-color: var(--rz-base-600);
--rz-grid-filter-background-color: var(--rz-base-600);
--rz-grid-filter-buttons-background-color: var(--rz-base-600);
--rz-grid-clear-filter-button-background-color: var(--rz-base-600);
--rz-grid-apply-filter-button-background-color: var(--rz-base-600);
--rz-grid-border: var(--rz-border-base-600);
--rz-grid-stripe-background-color: var(--rz-base-900);
--rz-grid-detail-template-background-color: var(--rz-base-900);
--rz-grid-frozen-cell-border: var(--rz-border-base-600);
--rz-grid-group-header-item-background-color: var(--rz-base-600);
--rz-grid-group-header-item-border: var(--rz-border-base-600);
--rz-header-background-color: var(--rz-base-700);
--rz-header-color: var(--rz-text-color);
--rz-listbox-filter-border: var(--rz-border-base-500);
--rz-menu-background-color: var(--rz-base-700);
--rz-menu-item-hover-color: var(--rz-white);
--rz-menu-item-hover-background-color: var(--rz-base-400);
--rz-menu-item-selected-color: var(--rz-primary);
--rz-menu-item-icon-hover-color: var(--rz-white);
--rz-menu-top-item-color: var(--rz-text-color);
--rz-menu-top-item-background-color: var(--rz-base-700);
--rz-menu-top-item-hover-color: var(--rz-primary);
--rz-menu-top-item-hover-background-color: var(--rz-base-700);
--rz-menu-top-item-selected-color: var(--rz-primary);
--rz-menu-top-item-icon-color: var(--rz-text-color);
--rz-menu-top-item-icon-hover-color: var(--rz-primary);
--rz-notification-container-background-color: var(--rz-base-800);
--rz-overlay-background-color: var(--rz-base-600);
--rz-pager-numeric-button-hover-background-color: var(--rz-base-600);
--rz-pager-numeric-button-hover-color: var(--rz-white);
--rz-pager-numeric-button-selected-color: var(--rz-primary);
--rz-pager-summary-color: var(--rz-text-secondary-color);
--rz-panel-menu-item-border: var(--rz-border-base-600);
--rz-panel-menu-item-color: var(--rz-text-color);
--rz-panel-menu-item-hover-color: var(--rz-white);
--rz-panel-menu-item-hover-background-color: var(--rz-base-600);
--rz-panel-menu-item-2nd-level-color: var(--rz-text-color);
--rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-600);
--rz-panel-menu-item-3rd-level-color: var(--rz-text-color);
--rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-600);
--rz-panel-menu-icon-color: var(--rz-text-secondary-color);
--rz-profile-menu-background-color: var(--rz-base-700);
--rz-profile-menu-top-item-background-color: var(--rz-base-700);
--rz-profile-menu-toggle-button-color: var(--rz-text-color);
--rz-profile-menu-item-hover-background-color: var(--rz-base-400);
--rz-radio-checked-color: var(--rz-text-color);
--rz-rating-focus-color: var(--rz-primary-light);
--rz-scheduler-border: var(--rz-border-base-600);
--rz-scheduler-border-color: var(--rz-base-600);
--rz-scheduler-minor-border-color: var(--rz-base-700);
--rz-scheduler-color: var(--rz-text-secondary-color);
--rz-scheduler-view-button-border: var(--rz-border-base-600);
--rz-scheduler-view-selected-border-color: var(--rz-base-600);
--rz-scheduler-header-border: var(--rz-border-base-600);
--rz-scheduler-weekend-color: var(--rz-text-tertiary-color);
--rz-scheduler-weekend-background-color: var(--rz-base-700);
--rz-scheduler-other-month-background-color: var(--rz-base-900);
--rz-scrollbar-color: rgba(255, 255, 255, 0.12);
--rz-selectbar-background-color: var(--rz-base-background-color);
--rz-selectbar-border: var(--rz-border-base-600);
--rz-selectbar-selected-border: var(--rz-border-base-600);
--rz-sidebar-toggle-color: var(--rz-text-color);
--rz-sidebar-toggle-hover-color: var(--rz-white);
--rz-sidebar-toggle-hover-background-color: var(--rz-base-500);
--rz-sidebar-border-inline-end: var(--rz-border-base-800);
--rz-sidebar-color: var(--rz-white);
--rz-slider-disabled-background-color: var(--rz-base-400);
--rz-slider-disabled-range-background-color: var(--rz-base-200);
--rz-slider-disabled-handle-background-color: var(--rz-base-200);
--rz-splitter-bar-color: var(--rz-text-color);
--rz-steps-color: var(--rz-text-secondary-color);
--rz-steps-number-color: var(--rz-text-secondary-color);
--rz-steps-number-background-color: var(--rz-base-600);
--rz-switch-background-color: var(--rz-base-600);
--rz-switch-circle-background-color: var(--rz-text-color);
--rz-tabs-tab-selected-top-border-color: var(--rz-primary);
--rz-tabs-tab-hover-background-color: var(--rz-base-600);
--rz-tabs-tab-focus-background-color: var(--rz-base-background-color);
--rz-timeline-point-background-color: var(--rz-base-200);
--rz-timeline-line-color: var(--rz-base-200);
--rz-tree-node-hover-background-color: var(--rz-base-600);
--rz-tree-node-hover-color: var(--rz-white);
--rz-tree-transition: var(--rz-transition-all);
--rz-upload-button-bar-background-color: var(--rz-base-700);
--rz-upload-files-remove-background-color: var(--rz-base-600);
--rz-upload-choose-background-color: var(--rz-base-600);
--rz-upload-choose-hover-background-color: var(--rz-base-400);
--rz-upload-choose-hover-color: var(--rz-white);
--rz-upload-choose-active-background-color: var(--rz-base-400);
--rz-upload-choose-active-color: var(--rz-white);
--rz-upload-cancel-background-color: var(--rz-base-600);
}
@duongphuhiep
Copy link
Author

https://forum.radzen.com/t/themeservice-system-settings/18954/2

This radzen-material.css converts the Radzen's "Material" (or "Material Dark") theme into a "unified theme", supporting both Dark and Light variants following web standard and best practices. You can use it as follows:

Copy it to the www folder of your Radzen project then:

<head>
    <RadzenTheme Theme="material" @rendermode="InteractiveAuto" />  
    <link rel="stylesheet" href="@Assets['radzen-material.css']"/>
    ...
</head>

the "Material" theme becomes reactive to both prefers-color-scheme (system-wide) and the data-theme attribute.

  • Your radzen project will follow the system-wide Dark/Light settings
  • You can use any standard Dar/kLight Theme Switcher Web component to force the Dark/Light theme on client side (no need to call the server)

Using the data-theme attribute, you can even mix dark and light theme variants:

<div class="rz-p-12" data-theme="dark">  
    <RadzenButton>This button is always Dark</RadzenButton>  
</div>  
<div class="rz-p-12" data-theme="light">  
    <RadzenButton>This button is always Light</RadzenButton>  
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment