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';
// in template
<ag-grid-vue
:theme="theme"
...
></ag-grid-vue>
// in component setup hook
setup() {
return {
theme: themeBalham,
};
}
Built-in Themes
- Quartz - Our default theme, with high contrast and generous padding. Will use the IBM Plex Sans font if available⁺.
- Balham - A more traditional theme modelled after a spreadsheet application.
- Material - A theme designed according to Google's Material v2 design system. This theme looks great for simple applications with lots of white space, and is the obvious choice if the rest of your application uses Material Design. Will use the Google Roboto font if available⁺.
- 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.
⁺ You can load these fonts yourself or pass the loadThemeGoogleFonts grid option to load them from Google's CDN. See Customising Fonts for more information.
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.