Vuetify text color variants
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
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: