Change Tab Link Color.

[GL513]

Hello. I've become quite comfortable with Material for MkDocs over time.
I know how a lot of the colors work, and how certain things fit together, but I have a bit of an issue finding how I can change the tab links' colors.
I wanted to make them white, which is not what the rest of my custom theme is, and have the active tab and hover colors be separate colors as well.
How would I go about changing this?
Thanks :)

[squidfunk]

Most of the colors are deduced from CSS variables. If you want to break out, you can always target specific colors via selectors. For example, the text color of the navigation tabs can be changed with:

.md-tabs__link {
  color: red;
}

.md-tabs__link:hover {
  color: green;
}

.md-tabs__link:focus {
  color: blue;
}

This can be similarily applied for :hover and :focus styles. Feel free to share your final adjustments with other users here!

[GL513]

Huh, it seems to work at least partially. When hovering, all of the tabs change to the set color, in the :hover style, while the :focus style seems to do nothing.

.md-tabs {
  color: #fff;
}
.md-tabs:hover {
  color: #ff6400;
}
.md-tabs:focus  {
  color: #ff9600;
}

[squidfunk]

I see. In general, It's always a good idea to inspect Material for MkDocs CSS to learn how rules need to be applied. Try this:

.md-tabs__link {
  color: #fff;
}

.md-tabs__link:hover {
  color: #ff6400;
}

.md-tabs__link:focus {
  color: #ff9600;
}

[squidfunk]

I also edited my original response.

[GL513]

Alright! It works, thank you!
I ended up swapping the :focus style and swapping it for --active. Using :focus only made it flash briefly on click, while --active keeps it highlighted the whole time after being clicked. Here it is...

.md-tabs__link {
  color: #fff;
}

.md-tabs__link:hover {
  color: #ff6400;
}

.md-tabs__link--active {
  color: #ff9600;
}

Thanks again!