Built-in themes provide a starting point for theming your application.
Themes are objects imported from the ag-grid-community package and provided to grid instances using the theme grid option.
import { themeBalham } from 'ag-grid-community';
Built-in Themes
- Quartz - Our default theme, with high contrast and generous padding.
- Balham - A more traditional theme modelled after a spreadsheet application.
- Alpine - The default theme before Quartz. We recommend quartz for new projects; this theme is intended to ease migration to the Theming API for applications already using Alpine.
Changing the Default Theme
import { themeBalham } from 'ag-grid-community';
<AgGridReact
theme={themeBalham}
...
/>
This is a minimal example of importing a theme from ag-grid-community and applying it to a grid instance.
Customising Built-in Themes
Themes are simply preset configurations of parts and parameters. After choosing a theme as a starting point, you can:
- Choose a different Color Scheme if required.
- Use Theme Parameters to customise borders, compactness, fonts and more.
- Use Theme Parts mix and match elements from different themes, for example the icons from Quartz with the text inputs from Material.
- Write your own CSS for unlimited control over grid appearance.