Angular: Change colors of Angular components

Question

I use ready-made Angular components in my project. Some of the components use colors (see picture) that don't fit my project.

Instead of the purple, I want to use another color. I couldn't find anything in the Angular documentation to change the color. https://material.angular.io/components/input/overview I also didn't see a property in Chrome's Inspecter Tool to change the color.

How can I use a different color instead of the purple? It would be best if you only have to change it in one place, as I use many other Angular components.

Answer 1

If you check the CSS for the placeholder text in the browser inspector, you should see the associated CSS that you should be able to copy to your code and change. Below is what I copied when I went to https://material.angular.io/components/input/overview and inspected (and even changed). If you decided to add this CSS as is to your Angular app, be sure to change the encapsulation option to ViewEncapsulation.None to see the effect. This is if you're using Angular Material v15; otherwise, inspect and see the associated CSS.

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: orange;
}