This page describes the grid's theming system from v32 and before, for the benefit of applications that have not yet migrated to the Theming API. These themes are deprecated and will be removed in a future major version. You may want to visit the new theming docs or check out the migration guide.
The grid comes with several provided themes which act as a great starting point for any application-specific customisations. Click the theme name to see a demo.
| Theme Name | Description |
|---|---|
| ag-theme-quartz ag-theme-quartz-dark ag-theme-quartz-auto-dark * File name ag-theme-quartz[.min].css | Modern looking themes with high contrast and generous padding. This is the recommended grid theme and an excellent choice for most applications. |
| ag-theme-balham ag-theme-balham-dark ag-theme-balham-auto-dark * File name ag-theme-balham[.min].css | Balham has a more traditional look modelled after a spreadsheet application. It is appropriate for applications that need to fit more data onto each page. |
| ag-theme-material ag-theme-material-dark ag-theme-material-auto-dark * File name ag-theme-material[.min].css | A theme designed according to the Google Material Language Specs. This theme looks great for simple applications with lots of white space, and is the obvious choice if the rest of your application follows the Google Material Design spec. However, the Material spec doesn't cater for advanced grid features such as grouped columns and tool panels. If your application uses these features, consider using ag-theme-quartz instead. |
| ag-theme-alpine ag-theme-alpine-dark ag-theme-alpine-auto-dark * File name ag-theme-alpine[.min].css | Alpine was the default theme before Quartz was released. It is still supported, but we recommend Quartz for new applications. |
* The 'auto' versions of each theme use the prefers-color-scheme CSS media feature to switch between dark and light variants depending on whether the user has enabled dark mode on their operating system.
Applying a v32 Theme to an App
To use a theme, add the theme class name to the div element that contains your grid. The following is an example of using the Quartz theme:
<div id="myGrid" class="ag-theme-quartz"></div>
The grid must always have a theme class set on its container, whether this is a provided theme or your own.
Loading CSS files and fonts
In order for the above code to work, the correct stylesheets must be loaded in the correct order. There are two kinds of stylesheet that need to be loaded when using provided themes:
ag-grid.css- structural styles containing CSS rules that are essential to the functioning of the grid and must be loaded first.ag-theme-{theme-name}.css- theme styles that add design look and feel on top of the structural styles.
The correct files to load are located in ag-grid-community/styles or @ag-grid-community/styles if you're using modules.
This path has changed in v28, and the old files are still there as part of the Legacy Styles but will be removed in v29.
Double-check that you are importing files from the new paths. If you have /src/ or /dist/ in your path then you're using the old paths.
There are various ways to load these stylesheets, as described in the sections below:
Loading 3rd party fonts
Some themes have a recommended 3rd party font, which is not bundled with the theme CSS. If the font is not available at runtime, the OS default UI font will be used instead - Segoe UI on Windows and SF Pro on Mac.
Loading IBM Plex Sans for the Quartz theme
Plex Sans is a font that gives excellent readability on both regular and high DPI screens. It features a tall x-height to aid in readability of mixed-case and lower-case text.
You can download Plex Sans from Google Fonts (you need weights 400/Regular and 500/Medium)and use it in your application, or load it from the Google Fonts API:
<!-- in HTML -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
/* in css */
@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap";
Loading Roboto for the Material theme
Roboto is the font recommended by the Material Design specification.
You can download Roboto from Google Fonts and use it in your application, or load it from the Google Fonts API:
<!-- in HTML -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
/* is css */
@import "https://fonts.googleapis.com/css?family=Roboto";
JavaScript Bundlers
If you are using a JavaScript bundler like webpack or Rollup and it is configured to load styles, you can require() the correct CSS file from node_modules. This is the recommended approach as webpack will take care of minifying your CSS in production:
// CommonJS:
require("ag-grid-community/styles/ag-grid.css");
// ECMAScript Modules:
import "ag-grid-community/styles/ag-grid.css";
App Hosted
You can copy, either manually or as part of your app's build, the required CSS files (ag-grid.css and ag-theme-{theme-name}.css) from node_modules and serve it with your app.
Sass Styling API
If you're using the Sass Styling API then the right CSS files will be automatically included for your chosen theme. For projects that are already using Sass this is the recommended approach.
CDN
You can load the structural styles and theme from a free CDN by adding this code to your page.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.2.0/styles/ag-grid.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.2.0/styles/ag-theme-quartz.css" />
Change the theme name in the URL to the one that you're using, and ensure that the version number in the URL matches the JS version you're using. This is useful for testing and prototyping but not recommended for production as your app will be unavailable if the jsdelivr servers are down.
Creating your own theme
The majority of users select a provided theme and make customisations using CSS. If your chosen provided theme has elements that you don't want, you will need to add CSS rules to remove them. If your desired look and feel is very different from the provided theme, at some point it becomes easier to start from scratch. To do this, you can define your own theme.
A theme is simply a CSS class name matching the pattern ag-theme-*, along with CSS rules that target this class name.
If you create your own theme, its name must start with ag-theme-.
Ensure that ag-grid.css is loaded, choose a theme name and apply it to the grid:
<div id="myGrid" class="ag-theme-mycustomtheme"></div>
That's it! You've created a theme. You haven't added any styles to it so what you will see is a nearly blank slate - basic customisable borders and padding but no opinionated design elements. You can then add customisations using CSS:
.ag-theme-mycustomtheme {
/* customise with CSS variables */
--ag-grid-size: 8px;
--ag-border-color: red;
}
.ag-theme-mycustomtheme .ag-header {
/* or with CSS selectors targeting grid DOM elements */
font-style: italic;
}
Creating themes with the Theme Builder
As an alternative to creating themes with CSS you can use our Theme Builder to create themes with no code. Visit the Theme Builder page to get started. Then try some of our preset themes, configure your theme options, and download your AG Grid Theme CSS file.
Creating Themes with the AG Grid Design System
Figma users can now download the AG Grid design system and extend the Quartz, Alpine, and Material themes to create custom CSS themes. For more information on how to create themes with the AG Grid design system please see our AG Grid Design System page.