How to change the inkbar color of the active tab?

Question

Is it possible to change the inkbar color of the active tab?

By default the ink bar is blue. See here for an example.

I tried this in SCSS, but it doesn't work.

.mat-tab-label-container{
  .mat-tab-list{
    .mat-ink-bar {
      background-color: green
    }
  }
}

.mat-tab-label-active{
 color: green 
}

Anyone can please help,

@LucaDeNardi If you've checked the revision history of this question, you would see that the OP originally stated that the code was CSS. I was the one who modified it to be "SCSS". — Edric, May 15 '19 at 15:56

davecar21 · Answer 1 · 2018-02-13T09:43:33.770

29

This could be similar to what you want to achieve

Please see this link ( Cannot style mat-tab without ::ng-deep and !important ) and upvote if it helps you, I think this is similar to what you want to achieve.

To answer your question

You need to use Selector specificity and then put your style in the root style /src/styles.css (NOTE: that don't put it in the components styleUrls your style will not work)

to style the ink bar

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: yellow;
  height: 10px;
}

Change ink-bar from underline to elliptical covering the item

You can try this code to make it elliptical to cover the item.

/* label style */
.mat-tab-label{
  background: #e7e7e7;
  color:  black;
  min-width: 60px!important;
}
/* focus style */
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{
  background: #e7e7e7;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
   background: rgba(149, 165, 166,0.3);
    height: 35px;
    border-radius: 100px;
    margin-bottom: 5px;
}

Please see the live sample here.

https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css

Hope this helps.

edited Feb 13 '18 at 09:43

answered Feb 12 '18 at 12:41

davecar21

2,606
21
33

Can I change ink-bar from underline to elliptical covering the item? – Mark Feb 13 '18 at 05:00
@Aditya I have editted my answer, please see the sample code above and live sample if that is what you want to achieve. Hope it helps. – davecar21 Feb 13 '18 at 06:22
look at image attached.,I need the same. – Mark Feb 13 '18 at 09:00
@Aditya I have seen the image, please see my updated live code and answer. Hope it helps. – davecar21 Feb 13 '18 at 09:45
2

this should be marked as the correct answer, works for me! – ForrestLyman Jan 13 '19 at 17:15
@Mark Glad it worked. Please mark my answer as the solution if it works on your end.. thanks – davecar21 Jul 23 '19 at 22:09

score 3 · Answer 2 · edited Dec 10 '20 at 14:55

3

Below Lines worked for me. It is recommended to use ::ng-deep. It will be applied to child components:

::ng-deep .mat-tab-group.mat-primary .mat-ink-bar {
    background-color: rgb(39, 184, 176) !important;
}

edited Dec 10 '20 at 14:55

Akif

7,098
7
27
53

answered Dec 10 '20 at 13:24

Pratiksha Kayastha

31
1

This technique is now deprecated: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep – Hadrien TOMA Dec 27 '20 at 22:08

score 0 · Answer 3 · answered Oct 15 '20 at 03:43

0

use ::ng-deep

::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #00d440;
}

answered Oct 15 '20 at 03:43

Leander Leo Lagardo

81
3
8

score 0 · Answer 4 · answered Apr 26 '23 at 11:44

0

In Material >= 15 use this:

.mat-mdc-tab:not(.mat-mdc-tab-disabled) .mdc-tab-indicator__content--underline, .mat-mdc-tab-link:not(.mat-mdc-tab-disabled) .mdc-tab-indicator__content--underline {
  border-color: #0A94D0;
}

answered Apr 26 '23 at 11:44

Zoidy

362
4
21

score 0 · Answer 5 · answered Jul 07 '23 at 10:56

0

If you want to do it without SCSS, you can add color to the mat-tab-group and it will change the color of the .mat-ink-bar:

<mat-tab-group mat-align-tabs="start" color="accent">

It will take the corresponding color of your theme then.

answered Jul 07 '23 at 10:56

Bullsized

362
4
7

How to change the inkbar color of the active tab?

5 Answers5

This could be similar to what you want to achieve

To answer your question

Change ink-bar from underline to elliptical covering the item

Linked