Angular Material's prebuilt themes, like indigo-pink.css, often override custom styles. These styles are encapsulated, meaning your styles don't always apply as expected.

To effectively style Angular Material components like the mat-slide-toggle, you need to use Angular’s theme system or deep CSS selectors. Start by defining a custom theme where you specify the colors for primary elements. This will ensure consistency and prevent other styles from overriding your custom colors. Additionally, using the ::ng-deep selector can help you apply styles within Angular Material’s encapsulated components, allowing your custom background colors to take effect directly on the toggle button’s thumb and bar.

If you'd prefer inline styles, another approach is to set CSS variables globally and then refer to these variables in your component styles.