How to add colors in theme in vue3 and vuetify3

Question

I am updating an old vue2 app to vue3, I would like to make 3 global colors, red, green and gray. I am currently doing the following in vuetify.js

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
// Vuetify
import { createVuetify, ThemeDefinition } from 'vuetify'

export default createVuetify(
  {
    theme: {
      dark: false, // or true if you want a dark theme
      themes: {
        light: {
          primary: '#3f51b5', // your primary color
          secondary: '#b0bec5', // your secondary color
          accent: '#8c9eff', // your accent color
        },
      }
    }
}
)

However I would actually like to make global env variables so I can easily do it like

<v-toolbar primary>

Answer 1

It's very simple:

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify, ThemeDefinition } from 'vuetify'

export default createVuetify({
  theme: {
    dark: false,
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        'red': '#FF0000',
        'green': '#00FF00',
        'gray': '#333333'
      },
    }
  }
})

And in your VToolbar:

<v-toolbar color="green" />

---

Btw: If you want to use green and red for validation you can use (and edit) the Vuetify default colors success and error.