Do we have any option for a Dark/Light theme for React Grid? or is there any alternative for it? Please provide a sample example to change the theme on React Grid. I have seen all the samples available on the Infragistics website, but unable to find out any option to change the theme color for the Header Toolbar (Filter UI/Column chooser etc.).
www.infragistics.com/.../data-grid
Hello and thank you for contacting Infragistics. Our API (linked below) can be styled in CSS using lower-case property names based on the component it belongs to. IgrDataGrid > ig-data-grid
www.infragistics.com/.../igrdatagrid.html
eg. The column options and toolbar are separate components that need to be styled as such:
.ig-grid-column-options { --background-color: #191919; --text-color: #7446b9;}
.ig-data-grid-toolbar { --background-color: #191919; --text-color: #7446b9;}
Here is a template and sample from our Grid portion in Dark.
eg. codesandbox.io/.../hardcore-almeida-suxfxn
.ig-data-grid { /* shared variables used in custom properties */ --grid_selected_background: #58258b; --grid_selected_text_color: #ffffff; --grid_normal_background: #191919; --grid_normal_text_color: #cccccc; --grid_section_background: #333333; --grid_section_text_color: #cccccc; --grid_focused_color: #7446b9; --grid_hyperlink_text_color: #926ec7; --grid_error_text_color: #c62828; --grid_hover_background: #777777; --grid_icon_color: #333333; --grid_lines: #272727;
/* root summary */ --summary-root-background: #7446b9; --summary-root-label-text-color: #191919; --summary-root-value-text-color: #191919;
background-color: var(--grid_normal_background);
--row-separator-background: var(--grid_lines); --row-separator-last-sticky-row-background: var(--grid_lines); --row-separator-pinned-row-background: var(--grid_focused_color); --row-separator-sticky-row-background: var(--grid_focused_color);
--header-background: var(--grid_normal_background); --header-text-color: var(--grid_normal_text_color); --header-separator-background: var(--grid_lines); --header-separator-width: 5px;
--section-header-background: var(--grid_section_background); --section-header-text-color: var(--grid_section_text_color); --section-header-selected-background: var(--grid_selected_background); --section-header-selected-text-color: var(--grid_selected_text_color);
--cell-selected-background: var(--grid_selected_background); --cell-selected-text-color: var(--grid_selected_text_color);
--cell-text-color: var(--grid_normal_text_color); --cell-background: var(--grid_normal_background);
--sticky-row-background: var(--grid_color_focused); --last-sticky-row-background: var(--grid_color_focused);
--pinned-row-background: var(--grid_color_focused); --pinned-row-opacity: 0.5;
/* not working column properties */ /* --default-column-width: 150; */ /* --default-column-min-width: 20; */
--column-resizing-separator-background: var(--grid_focused_color); --column-moving-separator-background: var(--grid_focused_color);}
Thanks, @Michael for the update.
I can run this Sample, but I cannot change the styling for "IgrDataGridToolbar" (columnChooser, columnPinning) UI. Please guide me if I am missing something here. Please see the below screenshots for more information.
Hello and thank you for following up. I've created a bug internally to address this issue. I've switched this forum over to a private case. C-00227938, and you can access it after signing into your account on the Infragistics website, here: account.infragistics.com/support-cases.
No alternative solutions were found when I investigated this.
Okay, Thanks for the update. Do we have any alternative for this behavior.? To apply background-color or text-color to the column chooser and column pinning portions of the IgrToolbarComponent.