Forums Ignite UI for React
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Bharat Jangir
90
Dark/Light Theme for Ignite UI for React Grid
posted

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

  • 29065
    Offline posted

    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);
    }