Themes
AG Grid Themes
AG Grid has several provided themes:
- Balham - original and dense
- Alpine - modern and less dense
- Material - lease dense
Balham and Alpine include dark mode options.
Customizing Themes
- Theme parameters
- CSS variables
- CSS rules
- Scss mixins and functions
Theme Parameters
@import '~ag-grid-community/src/styles/ag-grid.scss';
@import '~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin';
.ag-theme-alpine {
@include ag-theme-alpine(
(
grid-size: 6px,
alpine-active-color: deeppink,
borders: false,
)
);
}
CSS Variables
.ag-theme-alpine {
--ag-background-color: blanchedalmond;
--ag-foreground-color: deeppink;
--ag-border-color: darkgray;
}
Scss Rules
.ag-theme-alpine {
.ag-header {
background-color: ag-param(background-color);
border-bottom-width: 2px;
border-bottom-style: solid;
@include ag-color-property(border-bottom-color, alpine-active-color);
}
.ag-row-even {
background-color: blanchedalmond;
}
}
Scss Mixins and Functions
.ag-theme-alpine {
.ag-header {
border-color: ag-param(border-color);
@include ag-color-property(border-bottom-color, alpine-active-color);
}
}