Angular Material - checkbox-selected-checkmark-color | Angular Community | Page 1

indigo owl Dec 23, 2022, 10:27 AM

#

Hi,

I am working on a simple custom-theme, nothing extraordinary. When applying the theme it works and colors get used, but the 'checkbox-selected-checkmark-color' switches from white to black. For better contrast, I need a way to define the color. However, I can’t figure out how or what I may configured wrong. In addition, I don’t want to just overwrite the css-classes to achieve a more robust implementation

https://stackblitz.com/edit/angular-ivy-mwe8hi

My material.scss looks like this:

@include material.core();

$primary-colors: material.define-palette(palette.$primary-palette);
$accent-colors: material.define-palette(palette.$accent-palette);
$warn-colors: material.define-palette(material.$red-palette);

$theme-config: (
  color: (
    primary: $primary-colors,
    accent: $accent-colors,
    warn: $warn-colors,
  ),
  typography: $typography-config,
  density: -2
);

$theme: material.define-light-theme($theme-config);

@include material.core-theme($theme);
@include material.radio-theme($theme);
@include material.checkbox-theme($theme);

#

And my palettes are looking like this:

$primary-palette: (
  50: var(--primary-color-40, #e4e4e4),
  100: var(--primary-color-30, #bdbdbd),
  200: var(--primary-color-20, #919191),
  300: var(--primary-color-10, #646464),
  400: var(--primary-color-5, #434343),
  500: var(--primary-color, #222222),
  600: var(--primary-color--5, #1e1e1e),
  700: var(--primary-color--10, #191919),
  800: var(--primary-color--15, #141414),
  900: var(--primary-color--25, #0c0c0c),
  A100: var(--primary-color-30, #ffffff),
  A200: var(--primary-color-15, #eeeeee),
  A400: var(--primary-color, #bdbdbd),
  A700: var(--primary-color--15, #616161),
  contrast: (
    50: var(--primary-font-color-40, #e4e4e4),
    100: var(--primary-font-color-30, #e4e4e4),
    200: var(--primary-font-color-20, #e4e4e4),
    300: var(--primary-font-color-10, #e4e4e4),
    400: var(--primary-font-color-5, #e4e4e4),
    500: var(--primary-font-color, #e4e4e4),
    600: var(--primary-font-color--5, #e4e4e4),
    700: var(--primary-font-color--10, #e4e4e4),
    800: var(--primary-font-color--15, #e4e4e4),
    900: var(--primary-font-color--25, #e4e4e4),
    A100: var(--primary-font-color-30, #e4e4e4),
    A200: var(--primary-font-color-15, #e4e4e4),
    A400: var(--primary-font-color, #e4e4e4),
    A700: var(--primary-font-color--15, #e4e4e4),
  ),
);

$accent-palette: (
 [...]
);

#

In Browser-Inspector i can see

color: var(--mdc-checkbox-selected-checkmark-color, #fff);

but --mdc-checkbox-selected-checkmark-color is defined with #000

oak stone Dec 23, 2022, 10:57 AM

#

To change the color of the checkmark of a selected checkbox in Angular Material, you can use the color attribute of the mat-checkbox component to set the color of the checkmark.

Here's an example of how you can do this:

This will set the color of the checkmark to the primary color of your Material theme. You can also use the accent or warn colors, or any other custom color that you define in your theme.

Alternatively, you can use the --mdc-checkbox-selected-checkmark-color CSS variable to set the color of the checkmark. You can define this variable in your global styles or in a separate CSS file, and then apply it to the mat-checkbox component using the style attribute:

<mat-checkbox style="--mdc-checkbox-selected-checkmark-color: #ff0000">Checkbox</mat-checkbox>

But this one is dirty 🙂

indigo owl Dec 23, 2022, 11:29 AM

#

Thank you for your answer! I really want to get around the dirty solution.... My previous implementation was dirty and with every major update of the material packages, it break the app style...

i created a stackblitz, maybe it helps:
https://stackblitz.com/edit/angular-ivy-mwe8hi

oak stone Dec 23, 2022, 11:32 AM

#

indigo owl Thank you for your answer! I really want to get around the dirty solution.... My...

but what about using the color attribute of the mat-checkbox? this is is not dirty in my opionion

indigo owl Dec 23, 2022, 11:53 AM

#

Yes thats right, but it doesn't solves my Problem as you can see in the Stackblitz. I only want to change the color of the check mark to white

oak stone Dec 23, 2022, 12:01 PM

#

It looks like the issue is that you are using the material.checkbox-theme mixin which is overwriting the --mdc-checkbox-selected-checkmark-color variable. To fix this, you can try defining your own mixin that includes the material.checkbox-theme mixin and then customize the --mdc-checkbox-selected-checkmark-color variable before including it. Here's an example of how you can do that:

First, create a new mixin called my-checkbox-theme:

@mixin my-checkbox-theme($theme) {
  $mdc-checkbox-selected-checkmark-color: red; // customize the checkmark color here
  @include material.checkbox-theme($theme);
}

Then, include the my-checkbox-theme mixin in your material.scss file instead of the material.checkbox-theme mixin:

@include material.core-theme($theme);
@include material.radio-theme($theme);
@include my-checkbox-theme($theme); // include the custom mixin here

This should allow you to customize the --mdc-checkbox-selected-checkmark-color variable without overwriting any other variables set by the material.checkbox-theme mixin.

indigo owl Dec 23, 2022, 1:44 PM

#

Your suggest to create a new mixin with a $mdc-checkbox-selected-checkmark-color variable didn't work. I think because there is no such variable, or am i missing something? Do you maybe have a working example?

As far as I could test and understand it, the variable --mdc-checkbox-selected-checkmark-color is a calculated color based on the $accent-palette 500 color. When compiling from sass to css there has to be a real color, not a variable, that the appropriate color can be calculated and set to --mdc-checkbox-selected-checkmark-color. You can see this when switching the color in the palette to red or yellow. Then the checkmark gets white or black, depending on best contrast i guess...

I followed your Idea and have a working solution, but coded it with overrides again. The following code i add after @include

.mat-mdc-checkbox {
  &.mat-accent {
    --mdc-checkbox-selected-checkmark-color: var(--secondary-font-color, #e4e4e4);
  }
  &.mat-primary {
    --mdc-checkbox-selected-checkmark-color:  var(--primary-font-color, #e4e4e4);
  }
}

#

maybe you have something more elegant. but for now the override is small enough to keep it maintainable

#Angular Material - checkbox-selected-checkmark-color