Dynamic Theme Styling By Updating CSS Variables

This React example shows how themes for both a grid and a chart can be be toggled via one button.

When using React, changing the grid's theme is quite easy, we can use a `useEffect` hook to track the change of theme:

 const [lightModeActive, setLightModeActive] = useState<boolean>(true);

This can be toggled via a button, each time it's pressed, the grid is re-rendered and the `className` re-evaluated.

Since chart-themes are passed as a grid-property:

chartThemes={[lightModeActive ? 'ag-vivid' : 'ag-vivid-dark']}

(In this case an array which we hack by only supplying one element/theme to...)

We can use a `useEffect` hook to listen for changes in the `lightModeActive` state to destroy and re-create a new chart each time the state is toggled:

  useEffect(() => {
    const api = gridRef.current?.api;
    if (!api) return;
    if (!api.getChartRef) return;
    let id = api.getChartModels()[0]?.chartId;

    api.getChartRef(id).destroyChart();
    createChart(api);
  }, [lightModeActive]);

Note that here we are using the following function to create the chart:

  const createChart = useCallback((api: GridApi): void => {
    api.createRangeChart({
      cellRange: {
        rowStartIndex: 0,
        rowEndIndex: 79,
        columns: ['country', 'gold', 'silver', 'bronze'],
      },
      chartType: 'groupedColumn',
      chartContainer: chartDivRef.current,
      aggFunc: 'sum',
    });
  }, []);