change the color of tab text and the underline in materialize framework

Question

The default color of materialize tabs are pinkish. Also the underline for the active tab. I want to customize that and add some styles. How do I do that?

Answer 1

Images: Active tab and Tab2 on hover

Code changes in CSS for the effects in above 2 images :

        .tabs .tab a{
            color:#000;
        } /*Black color to the text*/

        .tabs .tab a:hover {
            background-color:#eee;
            color:#000;
        } /*Text color on hover*/

        .tabs .tab a.active {
            background-color:#888;
            color:#000;
        } /*Background and text color when a tab is active*/

        .tabs .indicator {
            background-color:#000;
        } /*Color of underline*/

Answer 2

The best way to add custom CSS to Materialize 1.0.0 default tabs is the following:

.tabs .tab a {
  color: rgba(38, 166, 154, 0.7);
  /*Custom Text Color*/
}

.tabs .tab a:hover {
  color:#26a69a;
  /*Custom Color On Hover*/
}

.tabs .tab a:focus.active {
  color:#26a69a;
  /*Custom Text Color While Active*/
  background-color: rgba(38, 166, 154, 0.2);
  /*Custom Background Color While Active*/
}

.tabs .indicator {
  background-color:#26a69a;
  /*Custom Color Of Indicator*/
}

*If you want to keep the default styling of the framework, use the RGBA values as they are in the example.