Materialize: How can i change the text color of the Tabs?

[hamdigdoura]

How can i change the text color of the Tabs?
I've tried with teal-text but it does'nt work.

[designviacode]

Hey @hamdigdoura you can do this by setting your desired text class on the anchor element under the tab headers.
for the sliding-indicator you'll have to use css .. because it is created by a script.
for.eg: you'll have to set teal-text on the anchor tag below ul.tabs > li.tab > a.active *here*.

Hope this helps.

[hamdigdoura]

@designviacode thanks

[curliq]

@designviacode that aproach disables the hover effect on the text tho.

[drricksanchez321]

Tabs are colored based on the Sass section:

// 17. Tabs
// ==============
$tabs-underline-color: $primary-color-light !default;
$tabs-text-color: $primary-color !default;
$tabs-bg-color: #fff !default;

Tabs are baked to the primary color, which in the non-Sass compiled version is 'red lighten-2', which is #ee6e73. You can either choose to alter the Sass to generate and support a secondary tab theme based on the secondary color (which makes sense to me but may go against Material Design specs), or apply overrides to the following, using variants of the desired color:

.tabs .tab a{
    color:#00ACC1;
}
.tabs .tab a:hover,.tabs .tab a.active {
    background-color:transparent;
    color:#008B9B;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
    color:rgba(102,147,153,0.7);    
}
.tabs .indicator {
    background-color:#009BAD;
}

[ghost]

not work i have the same pink underline , What i can do

[ncovercash]

The above worked for me

[ncovercash]

@atlabiz can you post a pen?

[tomscholz]

You can customize all colors with the provide sass version

[hiteshsahu]

WIth JQuery

```
// TAB Color
$(".tabs" ).css("background-color", themeColor);

// TAB Indicator/Underline Color
$(".tabs>.indicator").css("background-color", '#FFF');

// TAB Text Color
$(".tabs>li>a").css("color", '#FFF');

```

[pvictorf]

.tabs .tab a{
color:orange;
}
.tabs .tab a:focus, .tabs .tab a:focus.active {
background-color: #fff3e0;
outline: none;
}
.tabs .tab a:hover,tabs .tab a:active,.tabs .tab a.active {
background-color:transparent;
color:orange;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
color:rgba(102,147,153,0.7);
}
.tabs .indicator {
background-color:#F27620;
}