Vuetify text color variants

Question

I want to use one of the color variants for text, how can I do this? I have tried:

<h2 class="red--text lighten-1--text">My Address</h2>

<h2 class="red--text lighten-1">My Address</h2>

<h2 class="red-lighten-1--text">My Address</h2>

and many other variations, but I can only seem to get the text to go the base red color, not the variants listed here. Can anyone help?

Answer 1

class="red--text text--lighten-5"

from the docs

Text colors also support darken and lighten variants using text--{lighten|darken}-{n}

or you can inspect elements and pick up classes from there

Answer 2

You must use it this way:

<h2 class="red--text text--lighten-1">My Address</h2>

For darken-{n} and lighten-{n}, pre-pend text instead of appending it.

Actually there is even an example almost as exactly as yours in the documentation:

<template>
  <div>
    Lorem ipsum dolor sit amet, <strong class="red--text text--lighten-1">inciderint</strong> definitionem est ea, explicari prodesset eam id. Mazim doctus vix an. <span class="indigo--text text--darken-2">Amet causae probatus nec ex</span>.
  </div>
</template>

Demo here:

<h2 class="red--text text--lighten-1">My Address</h2>.
<h2 class="red--text text--lighten-2"> My Address</h2>.

and result is this: