Change material angular tab text color

Question

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.

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

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.

krishnaxv · Accepted Answer · 2015-11-20 22:35:49Z

6

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!

answered Nov 20, 2015 at 22:35

krishnaxv

9562 gold badges6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Murdock Over a year ago

Thanx. I have tried using the mdThemingProvider however I could not change those specific colors

krishnaxv Over a year ago

@Murdock Have you tried above CSS? Is it working in your case?

Murdock Over a year ago

Yes it works, but would really like to hook into the templates defined in the material templates.

Collectives™ on Stack Overflow

Change material angular tab text color

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related