React Data GridTheme Builder Import and Export

The Theme Builder provides a visual interface for creating and customising AG Grid themes. You can export themes to use in your application, and import existing theme code back into the Theme Builder for further modification.

Exporting Themes Copy Link

To export your theme from Theme Builder:

1. Click the "Import / Export" button at the bottom left of the Theme Builder
2. The "Export" tab shows JavaScript code that creates your theme
3. Click "Download" to save as a file, or "Copy" to copy to your clipboard

The exported code defines a theme using Theme Parts and Theme Parameters:

import { themeQuartz, iconSetQuartzLight } from 'ag-grid-community';

export const myTheme = themeQuartz
    .withPart(iconSetQuartzLight)
    .withParams({
        accentColor: "#5A9F7D",
        borderRadius: 8,
        headerTextColor: "#2E4A3F"
    });

To use the exported theme, pass the theme object to the theme grid option, see Built-in Themes examples in your framework.

Importing Themes Copy Link

Theme Builder can import existing theme code. Select the "Import" tab and drag or upload a code file, or paste in code.