How to change the underline color of selected tab in angular-material?
You need to define a custome theme and set the accent-color to the one that you want your md-ink-bar to have. In this example it's white:
var customAccent = {
'50': '#b3b3b3',
'100': '#bfbfbf',
'200': '#cccccc',
'300': '#d9d9d9',
'400': '#e6e6e6',
'500': '#f2f2f2',
'600': '#ffffff',
'700': '#ffffff',
'800': '#ffffff',
'900': '#ffffff',
'A100': '#ffffff',
'A200': '#fff',
'A400': '#f2f2f2',
'A700': '#ffffff'
};
$mdThemingProvider
.definePalette('whiteAccent', customAccent);
$mdThemingProvider.theme('whiteAccentTheme')
.primaryPalette('deep-purple')
.accentPalette('whiteAccent');
You can generate an accent-palette on this site: https://angular-md-color.com/#/
In your view, use the new custom theme for your md-tabs:
<div md-theme="whiteAccentTheme">
<md-tabs class="md-primary">...</md-tabs>
</div>
The simplest way is to change via CSS :
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
color: red !important;
background-color:red !important;
}
But you can also check the § about theming in the documentation : https://material.angularjs.org/latest/Theming/01_introduction
Sometime the CSS is embedded and generated on the fly in style-tags, if this code doesn't work, try to force the color with !important
.
md-tabs md-ink-bar {
color: green;
background-color: green;
}