How to override Vuetify variables with custom colors?

Question

I want to override vuetify variables with custom colors by following this

I've created a stylus folder which contains base folder (_colors, _typography) and main.styl file. The _color file is imported into main.styl file, which the latter is imported into main.js

Here is my file structure:

And the imports are included in main.js:

 import '../node_modules/vuetify/dist/vuetify.min.css'
 import './assets/stylus/main.styl'

Inside the _color.styl, I have this test code:

$red = {
  "base":       #FF0000,
  "darken-1":   #e50000,
  "darken-2":   #990000,
  "darken-3":   #7f0000,
  "darken-4":   #000000,
}

The custom colors aren't showing...am I missing something here?

Answer 1

As @webdevdani mentionned it, I don't think overriding vuetify style is possible.

I propose you a workaround : use a theme.

In your main.js you can set colors, like this :

Vue.use(Vuetify, {
  theme: {
    primary: '#FFA726',
    secondary: '#29B6F6',
    anyColor: '#0000'
})

And you'll be able to call it like this in any of your app's component :

color="primary"

or

color="anyColor"

Source and more info about Vuetify theme