Angular 15 (MDC) tooltip background color (via theme)

Question

With Angular14 I was able to define the mat-tooltips background color via

$theme: (
    color: (
        ...
        background: (
           ...,
            tooltip: red
        )
    )
)
@include mat.all-component-colors($theme);

Now a property named color.background.tooltip even gets generated by calling mat.define-light-theme but isn't applied. What has changed here?

Answer 1

You can override the css variables:

.cdk-overlay-container .mat-mdc-tooltip {
  --mdc-plain-tooltip-container-color: red;
  --mdc-plain-tooltip-supporting-text-color: white;
  --mdc-plain-tooltip-container-shape: 4px;
  --mdc-plain-tooltip-supporting-text-line-height: 16px;
  --mdc-plain-tooltip-supporting-text-size: 12px;
  --mdc-plain-tooltip-supporting-text-weight: 400;
  --mdc-tooltip-word-break: normal;
  ...
}

Answer 2

Yeah, I am struggling with the same problem. What you could apply as an easy fix is in your styles.scss is to add:

.mdc-tooltip__surface {
  background-color: red !important;
}

I really do not like using !important, but it gets the job done in this case.