4

Trying to change the checkbox color (due to changing the accent-color) results in a black checkbox.

So I've installed node-sass and was successfully able to change various other stylings, for example, the hover color of a row with $hover-color: cornsilk;

But somehow using: $accent-color: #fffff1; or $ag-mat-accent: #fffff1; does only change it from the default of pink to black. 

$ag-icons-path: "~ag-grid-community/src/styles/ag-theme-material/icons/";

$accent-color: #fffff1;
$icon-color: #03a9f4;
$hover-color: cornsilk;

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material.scss";

My expected result would be a whitish checkbox when selected. Instead, I'm getting a black one no matter what color I choose.

lewislbr
  • 1,012
  • 14
  • 23
TheWeeezel
  • 331
  • 1
  • 4
  • 16

3 Answers3

8

Add the following CSS to your style.scss file:

.ag-theme-material .ag-checkbox-input-wrapper.ag-checked::after {
  color: #fffff1 !important;
}
Marco Nascimento
  • 832
  • 8
  • 15
0

You could try set the following variables in scss. I hope this will help you!

@import '~ag-grid-community/src/styles/ag-grid';

// set the colors to the ones from the material theme
$ag-mat-accent: #fffff1;

// Import the ag-Grid material-next theme
@import '~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material';

source of my example can be found here: https://github.com/ag-grid/ag-grid-material/blob/master/angular-material/src/styles.scss#L22-L23

LittleGnome
  • 96
  • 7
-5

It's very simple, just go to the node_module --->ag-grid-community --->dist --->styles ---> ag-theme-material.css ---> find the style which is like below and change the color whatever you want.

.ag-theme-material .ag-icon-checkbox-checked {
color: #0076c6; }
Gary Glitter Charles
  • 7
  • 1
  • 3
    This will work but only as long as there is no version update or the packages are not reinstalled. I think its bad practice changing the node_modules of a project with a lot of contributors. But I would love to hear somebody's opinion on that. – TheWeeezel Jun 25 '19 at 13:55
  • Absolutely right @TheWeeezel - never ever ever touch node_modules manually. – mopo922 Jun 30 '20 at 19:15