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?

fila90 · Accepted Answer · 2019-02-12T08:24:32.430

51

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

edited Feb 12 '19 at 08:24

answered Feb 12 '19 at 08:18

fila90

1,439
11
11

Damn, I see it now, not sure why I didnt read that line. Thanks mate. – Brad Feb 12 '19 at 09:15
and where do you set the default text color of the whole app? cant seem to find a variable for that! Vuetify adds 0.87 opacity, but I'm not sure where this happens – trainoasis Jan 28 '21 at 10:52
https://vuetifyjs.com/en/features/theme/#customizing – fila90 Jan 28 '21 at 10:58

Begueradj · Answer 2 · 2019-02-12T08:45:12.117

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:

Vuetify text color variants

2 Answers2