Pro

Text color

Change the text color on interaction

Overview

It is possible to change the text color without writing any CSS code by using data-fx="{action}:text-{color}".

Color change

Change the text color on {action} by adding data-fx="{action}:text-{color}" where {color} is one of the theme colors.

On hover

To change the text color of element on its hover, add data-fx="h:text-{color}" data attribute.

h:text-primary
text-danger to h:text-success
text-success to h:text[blue]
<div data-fx="h:text-primary">h:text-primary</div>
<div class="text-danger" data-fx="h:text-success">text-danger to h:text-success</div>
<div class="text-success" data-fx="h:text[blue]">text-success to h:text[blue]</div>

On active

Change the text color when the element gets .active class using data-fx="a:text-{color}"

Click the element to toggle its .active class
a:text-primary
text-danger to a:text-success
<div data-fx="a:text-primary">a:text-primary</div>
<div class="text-danger" data-fx="a:text-success">text-danger to a:text-success</div>

On trigger hover

Change a text color of single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:text-{color}" data attribute to the elements you want to change the text color when trigger is hovered.

Hover this trigger
th:text-primary
text-danger to th:text-success
<div data-trigger="hover">
  <div data-fx="th:text-primary">th:text-primary</div>
  <div class="text-danger" data-fx="th:text-success">text-danger to th:text-success</div>
</div>

On trigger active

Change a text color of single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="active" attribute to it, then add data-fx="ta:text-{color}" data attribute to the elements you want to change the text color when trigger is activated.

Click this trigger to toggle its .active class
ta:text-primary
text-danger to ta:text-success
<div data-trigger="active">
  <div data-fx="ta:text-primary">ta:text-primary</div>
  <div class="text-danger" data-fx="ta:text-success">text-danger to ta:text-success</div>
</div>