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?

Michaels

Since you're importing the vuetify.min.css, it's already CSS. The variables its using have already been replaced and transformed into browser-legible CSS. To change the colors of Vuetify, you should use a theme: vuetifyjs.com/style/theme – Melancholic

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

Dogie

Answer 2

You need to declare the variables before importing Vuetify. Switching the order of imports should work, assuming that main.styl imports your modified _color.styl.

Quote from the documentation:

Now that stylus is configured, you can set default values for the stylus variables that you wish to change. These must be declared before the import and will automatically override the Vuetify defaults.

You can see all the variables you can change in here.

Roquelaure