How to override Vuetify variables with custom colors?

问题

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: enter image description here

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?

回答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"

color="anyColor"

Source and more info about Vuetify theme

回答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.

来源：https://stackoverflow.com/questions/48570878/how-to-override-vuetify-variables-with-custom-colors

标签

stylus

vuetify.js