How to change text color in ons-tab

[chuchude]

Hello everyone,

Is there a way to change the text color in ons-tab? I use the ONSEN UI javascript core for my project.

Thanks in advance.

<ons-tab style=“color:#70AD47;” ></ons-tab>

[emccorson]

Yes, you can create a custom theme for Onsen UI here:
https://onsen.io/theme-roller/?customize

Scroll to the Tabbar section and change the colour as needed, then download and add to your project.

[chuchude]

Thanks for your reply. Is that possible only to change one tab bar?

[emccorson]

In that case you need to set a CSS color rule on the tab’s button (it has the class tabbar__button).

For example, you could create a class custom-color for the ons-tab and a CSS rule like:

<ons-tab class="custom-color"></ons-tab>

.custom-color .tabbar__button {
  color: green;
}

[tabithaemann]

@emccorson said in How to change text color in ons-tab:

Yes, you can create a custom theme for Onsen UI here:
https://onsen.io/theme-roller/?customize

Scroll to the Tabbar section and change the colour as needed, then download and add to your project.

this answer is really useful, thank you.