The text component is a simple component that can be used to style the text color of any element. The ion-text element should wrap the element in order to change the text color of that element.
<ion-textcolor="secondary"> <h1>H1: The quick brown fox jumps over the lazy dog</h1> </ion-text> <ion-textcolor="primary"> <h2>H2: The quick brown fox jumps over the lazy dog</h2> </ion-text> <ion-textcolor="light"> <h3>H3: The quick brown fox jumps over the lazy dog</h3> </ion-text> <ion-textcolor="danger"> <h4>H4: The quick brown fox jumps over the lazy dog</h4> </ion-text> <ion-textcolor="dark"> <h5>H5: The quick brown fox jumps over the lazy dog</h5> </ion-text> <p> I saw a werewolf with a Chinese menu in his hand. Walking through the <ion-textcolor="danger"><sub>streets</sub></ion-text> of Soho in the rain. He <ion-textcolor="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's. Gonna get a <ion-textcolor="secondary"><a>big dish of beef chow mein.</a></ion-text> <ion-textcolor="danger"><ion-iconname="cut"></ion-icon></ion-text> </p>
The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.