Vuetify: Can't edit theme

[LeaklessGfy]

Steps to reproduce

Init a vue project with vue-cli. Add vuetify (following doc')

Add following code to App.vue:

<style lang="styl">
@require '~vuetify/src/stylus/main.styl'

$theme := {
  primary:"#fff"
  accent: "#fff"
  secondary: "#fff"
  info: "#fff"
  warning: "#fff"
  error: $red.base
  success: $green.base
}
</style>

Versions

vuetify = ^0.9.4,
vue = 2

What is expected ?

I would like to change theme variable for my app

What is actually happening ?

Nothing. No error but the theme doesn't change

[johnleider]

You have to move the variable declaration before the import of the style sheet.

[camhart]

I finally got it to work by doing this in App.vue

<style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
  $theme := {
    primary: #009688
    accent: #FFC107
    secondary: #00796B
    info: #B2DFDB
    warning: $red.base
    error: $red.base
    success: $green.base
  }
  @require '../node_modules/vuetify/src/stylus/main.styl'
</style>

[luisfrocha]

@camhart 's solution worked for me. Using vuetify/nuxt template and followed his advice in assets/style/app.styl and it worked like a charm.

[100khz]

i am sorry, how would we use this in nuxt please? Trying to change text field component for font-size.

[ngustavo]

This is happening to me as well with Nuxt.js and @camhart's solution doesn't seem to work