CODEWITHSUNDEEP
stylusvuetify.js
stormynpip
stormynpip

Reputation: 472

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:

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?

Upvotes: 10

Views: 23738

Answers (2)

Toodoo
Toodoo

Reputation: 8750

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

Upvotes: 13

FINDarkside
FINDarkside

Reputation: 2435

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.

Upvotes: 2

Related Questions