Using Vuetify Colors

I have lost many hours to this topic, in part because I am a color nerd, and in part because I think it's a bit difficult to figure out how to do this. There are numerous ways to invoke your chosen theme colors through code, which of course, is the ideal way. However there are limitations to be aware of.

The three general approaches:

1. Use a Vuetify theme object to map colors by definition name to hex color
2. Use a Vuetify mixin/directive to assign appropriate classes
3. Enable customProperties on the preset passed in the Vuetify instantiation and generate/access CSS variables

Use Vuetify's core colorable mixin

See source code for this mixin

🟢 Fairly minimal setup on part of developer

🟢 Invokes Vuetify's core color utility functions to generate class and style properties which map string color definitions (color="primary lighten-2") to built-in class equivalents — excellent choice for backgrounds and text colors

🟢 Used throughout Vuetify source and likely staying around

🟢 Can be applied to specific parts of a component

🟢 Can be used as many times as needed within a component

🟢 Makes tonal ranges available with no additional work (as CSS variables)

🟡 Must manually plug results into component elements, but not too bad — see mine here

🔴 Only supports background and text properties — will need to determine implementation for SVG

Use Vuetify's core v-color directive

See source code for this directive.

🟢 Minimal setup on part of developer

🟢 Invokes Vuetify's core color utility functions such as classToHex to assign color appropriately (given hex code or color definitions, you receive hex code if simple OR object if tonal ranges)

🟢 Does it update itself if the color changes? I think it may.

🔴 Future uncertain/likely deprecated — was removed from directives index in 2020, but still exists for now

🔴 A bit difficult to figure out how to use without an example — see mine here

🔴 No support for generated tonal ranges — relies on default colors (from core) and $vuetify.theme.currentTheme — a way around this may be to provide a robust theme definition by hand instead of letting Vuetify generate the ranges automagically — without this any attempt to invoke a variation such as "lighten-3" will fall back on the base color

🔴 Does not support SVG properties such as fill

🔴 Can only? apply to component root — cannot be used on inner pieces within unless it has been registered as a global directive?

Generate runtime theme variable as plugin

You can use the same code Vuetify uses (at build-time?) to do this. This will create a map that includes all tonal ranges.

🟢 Generates single global theme to be accessed throughout components

🟢 Most flexibility in terms of what can be done with it, but needs translation

🟡 Need to create a plugin, but the implementation is not too tricky

🔴 Creating at runtime feels unideal — would be nice to be able to generate tonal range as part of the build — am I doing something wrong?

🔴 Feels like we should have access to tonal ranges with Vuetify core $vuetify.theme.currentTheme, but we don't, so we need to create this second copy for a full dictionary

🔴 May be confusing to other developers — where this came from, that it is custom, and that it differs from the one provided by default in a small but important way

🔴 Having the dictionary is not enough — need to develop method to map properties such as color="primary lighten-1" to the dictionary values

import { Theme } from 'vuetify/lib/services/theme'
import { parse } from 'vuetify/lib/services/theme/utils'

const preset = { ... }

export default {
  install(Vue, options) {
    const theme = new Theme(preset)
    const o = theme.parsedTheme

    o.generate = generate

    Vue.prototype.$opVuetifyTheme = o
  }
}

function generate(theme) {
  return parse(theme)
}