Change material angular tab text color

2
votes

I cant figure out how the tabs text color is set for the material design extension of angular. There is codepen examples. I can therefore inspect the element and see it is set by some custom style that some how gets injected into the page. How that is configured though escapes me.

My tabs are currently the default color. I have tried modifying $mdThemingProvider but that does not change the text color.

enter image description here

See: https://material.angularjs.org/latest/demo/tabs

enter image description here

They do exactly what I want in the first example where the tab text changes on selection.

EDIT: Obviously I can set the CSS however I want to use the templated colors already configured.

1
javascriptcssangularjsangular-material

1 Answers

6
votes

It is preferable to configure the default theme via $mdThemingProvider. But, you can override Angular Material's default CSS classes to achieve your desired result.

Tab's background color

md-tabs > md-tabs-wrapper {
  background-color: #f00 !important;
}

Tab's text color

md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {
  color: #fff !important;
}

Active tab's text color

md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {
  color: #222 !important;
}

Disabled tab's text color

md-tabs .md-tab[disabled], md-tabs .md-tab[disabled] md-icon {
  color: #000 !important;
}

To configure via $mdThemingProvider, please refer Angular Material/$mdThemingProvider.

Hope it helps!