LiveLoveApp logo

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);
  }
}