How do I load both ag-grid themes using SCSS and toggle between them?

Question

I've tried using in my main.scss

@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham';
@import '~ag-grid-community/src/styles/ag-theme-balham-dark/sass/ag-theme-balham-dark';

and then conditionally, I want to apply ag-theme-balham or ag-theme-balham-dark to the div containing ag-grid.

However, if both themes are loaded via scss, since they both build on some common theme files with variables it seems that one overrides the other?? My grid is ending up light even when I can verify through chrome inspector that the surrounding div has class="ag-theme-balham-dark" (even though dark is imported last).

Removing the import of the light theme first succesfully makes for a dark grid.

If I switch to use ag-grid's CSS instead of SCSS that does work, but the whole point of SCSS is so that I could override some theme variables?

Answer 1

To solve this, I ended up not importing their pre-built themes, and created custom themes. Creating the custom themes is still simple to do, since you can use the default variables as a base.

@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-balham/vars/ag-theme-balham-vars';
@import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-common';

.ag-theme-balham {
  // $ag-params contains all values for the light theme
  @include ag-theme-balham($ag-params);
}

.ag-theme-balham-dark {
  $background: #2d3436;
  $foreground: #F5F5F5;

  // override the default params with the dark values
  $dark-params: map-merge($ag-params, (
      background-color: $background,
      foreground-color: $foreground,
      secondary-foreground-color: $foreground,
      odd-row-background-color: darken($background, 3),
      header-background-color: darken(#636e72, 30),
      header-foreground-color: $foreground,
      header-cell-hover-background-color: lighten($background, 5),
      header-cell-moving-background-color: lighten($background, 5),
      border-color: #424242,
      hover-color: lighten($background, 7)
    ));

    @include ag-theme-balham($dark-params);
}

https://stackblitz.com/edit/ag-grid-scss-themes?embed=1&file=src/styles.scss

Depending on what features you use in ag-grid, you may have to override more of the $ag-params values. I only overrode the ones that were needed for the example.