How to give an angular material checkbox a custom color

I'm in a situation where I want to give a checkbox a different color, maybe just th background color, but if possible the border and/or text color as well

<mat-checkbox [color]="color()"></mat-checkbox>

With the color attribute I'm only able set 'primary', 'accent' and 'warn'.

Right now I've only changed the border as follows

::ng-deep .mat-mdc-checkbox-checked .mdc-checkbox__background {
    border-color: #fff!important;
}

But this is not an ideal solution and feels a bit hacky, so I was wondering if Angular Material has a built-in way of doing this, perhaps through a CSS variable?

Check the docs, they have an example for a very similar case:

.some-container {
  --mdc-checkbox-unselected-hover-state-layer-color: #fff;
  --mdc-checkbox-unselected-hover-icon-color: #fff;
}

Providing new values for their CSS variables is the preferred solution, because the internally used DOM elements and classes may change at any time.

v19 update

With Angular Material v19 or later, the new recommendation is to use the new overrides SCSS mixins. Also starting from v19, the docs contain a new "Styling" tab where you can see which tokens you can override. For example, for the checkbox, you can now override the styles like the following:

@use '@angular/material' as mat;

.some-container {
  @include mat.checkbox-overrides((
    unselected-hover-state-layer-color: #fff,
    unselected-hover-icon-color: #fff,
  ));
}