How to change Angular Material v19 component colors based on routing, and manage all colors in...

I am using Angular Material v19 (MDC) along with custom Angular components (e.g., header.component.ts) in my project. Inside these components, I often use Material components like mat-button, but with custom classes (e.g., .manage-button).

I need to apply different styles (e.g., background color, text color) to my custom components and buttons depending on the current route. For example:

• On /dashboard, the background color of the header.component should be blue, and the .manage-button inside it should be light-blue.
• On /company, the same header.component should have a green background, and .manage-button should be white.

My Requirements:

• Styles should change based on routing.
• All route-specific colors should be defined in a single SCSS file for easy maintenance.
• Some styles affect custom components like header.component, and some styles apply to Material components like mat-button with custom classes (e.g., .manage-button).

My questions:

• What is the best practice to handle route-based styling for custom components + Material components?
• How should I combine Material theming APIs like mat.button-theme() with my own custom component styles in such a setup?

Continue reading...