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
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

Parents
No Data
Reply
  • 0
    Offline posted

    Infragistics provides a "Theme Manager" for React Grid, which allows you to easily switch between various built-in themes or create your own custom theme. Here's an example of how to use the Theme Manager to switch between the "light" and "dark" themes for the React Grid:

    First, you need to install the Infragistics React Controls package:

    npm install igniteui-react-core igniteui-react-grids

    Then, in your React component, import the necessary modules:

    import { ThemeManager, Theme } from "igniteui-react-core";
    import { IgrGrid } from "igniteui-react-grids";

    To switch between the "light" and "dark" themes, you can use the setTheme method of the ThemeManager. Here's an example of how to toggle between the two themes:

    // Define the light and dark themes
    const lightTheme = Theme.createEmpty();
    const darkTheme = Theme.createEmpty();
    darkTheme.fillColors = ["#1e1e1e"];
    darkTheme.accentColor = "#fff";
    
    // Initialize the grid and set the initial theme
    const gridRef = React.useRef(null);
    React.useEffect(() => {
      ThemeManager.setTheme(lightTheme);
    }, []);
    
    // Toggle between the light and dark themes
    const toggleTheme = () => {
      const currentTheme = ThemeManager.theme;
      if (currentTheme === lightTheme) {
        ThemeManager.setTheme(darkTheme);
      } else {
        ThemeManager.setTheme(lightTheme);
      }
    };
    
    // Render the grid and a button to toggle the theme
    return (
      <>
        <IgrGrid ref={gridRef} />
        <button onClick={toggleTheme}>Toggle Theme</button>
      </>
    );

    This example initializes the React Grid with the "light" theme and sets up a button to toggle between the "light" and "dark" themes. When the button is clicked, the toggleTheme function switches between the two themes using the setTheme method of the ThemeManager.

    Note that you can customize the built-in themes or create your own custom theme by modifying the various properties of the Theme object. You can find more information about the ThemeManager and Theme objects in the Infragistics documentation.

Children
No Data