Vuetify: [Bug Report] Cannot customize stylus-variables anymore

[janein]

Versions and Environment

Vuetify: 1.0.0-alpha.1
Vue: 2.5.9
Browsers: Chrome 62.0.3202.94
OS: Linux x86_64

Steps to reproduce

// main.styl -> my custom stylus entry point
@import './theme.styl'
@import '../../node_modules/vuetify/src/stylus/main.styl'

#foo {
  color: $theme.primary;
}

// theme.styl
$theme.primary = #ff0000;
$material-light := {
  status-bar: {
    regular: $theme.primary,
    lights-out: rgba(#fff, .7)
  },
   /* ... */
}
/* ... */

Expected Behavior

Vuetify should use the variables I defined in my custom file. This worked on v0.16.1.

Actual Behavior

Vuetify completely ignores custom defined variables. Even though the correct $theme.primary gets used for my #foo-selector afterwards.

Reproduction Link

https://codepen.io/janein/pen/ooRNMp

Other comments

Any idea why this has been working on the older version and now broke?
Or is there any suggested way to customize those varibales?

(repodruction link is not working - I just couldn't find a sane way to rebuild this on codepen - sorry)

[KaelWD]

Vuetify no longer uses the $theme hash, it's all done in JS now.

https://github.com/vuetifyjs/vuetify/releases/tag/v0.17.0
https://vuetifyjs.com/style/theme

[janein]

ok, well this creates more maintenance time. but if there is no other possibility I'll have to stick with that.

Is there a reasonable reason for this change? ;)

[KaelWD]

Yes, people were complaining about having to compile all of vuetify's stylus just to change some colors. Also we wanted to be able to change colors on the fly, which wasn't possible with the old system. You can still use a theme hash in stylus if you want, you'll just have to copy those values into JS now as well.

[jbayona89]

Is there any way to get the primary, secondary colors inside stylus? for example:

.navigation-drawer .list__tile--active
background-color: secondary

I would love to access theme colors inside stylus

[KaelWD]

Define them yourself.

[jbayona89]

Yes but then I have to duplicate the colors in a variable.styl file and also in the main.js isn't it? and If i want to change the colors of the whole app on the fly I can't do it that way

[KaelWD]

You would have to duplicate the values, yes. Changing stylus variables on the fly is not possible, which is why we moved it to JS in the first place.

[jbayona89]

Would you know then how I can change in js inner elements that are changed automatically by some vuetify components like adding a class primary to a checkbox label?

[KaelWD]

Use the label slot: https://codepen.io/anon/pen/gopNbq?editors=1010

[jbayona89]

You are a superhero, thank you so much.

[cyberflohr]

Our application must use a very strict CSP which does not allow "embedded" styles at runtime. How can I customize the vuetify colors for version 1.x (at the moment I use version 0.16.x with stylus variables)?

[lastobelus]

@KaelWD I'm confused -- https://vuetifyjs.com/en/style/theme still describes overriding stylus variables (but I tried what it described and it didn't work for me -- using vue-cli3 project)

How would I go about overriding, for example, $material-dark.background?

[lastobelus]

I've only been able to override $body-font-family -- no other variables that I've tried work. It's mystifying.

My stylus file looks like this:

@import '~vuetify/src/stylus/settings/_variables'

// this works, so it seems stylus pre-processing is working in general,
// and I vuetify stylus being processed in the build
$body-font-family = 'HelveticaNeue-Light', "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif

// why don't these work?????????
$font-size-root = 20px
$button-large-font-size = 22px
// I tried making my own variable, and editing vuetify source to
// use it, also did not work.
// $button-large-font-size2 = 22px


//(have also tried changing where this is imported
// @import '~vuetify/src/stylus/settings/_variables' 

@import '~vuetify/src/stylus/main'
// @import '~vuetify/src/stylus/app' (have tried both)

[akinyele]

I've only been able to override $body-font-family -- no other variables that I've tried work. It's mystifying.

My stylus file looks like this:

@import '~vuetify/src/stylus/settings/_variables'

// this works, so it seems stylus pre-processing is working in general,
// and I vuetify stylus being processed in the build
$body-font-family = 'HelveticaNeue-Light', "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif

// why don't these work?????????
$font-size-root = 20px
$button-large-font-size = 22px
// I tried making my own variable, and editing vuetify source to
// use it, also did not work.
// $button-large-font-size2 = 22px


//(have also tried changing where this is imported
// @import '~vuetify/src/stylus/settings/_variables' 

@import '~vuetify/src/stylus/main'
// @import '~vuetify/src/stylus/app' (have tried both)

I'm having the same issue. I get $font-size-root and $body-font-family to override but whenever i override any property in $material-light or $material-dark those changes don't reflect. I'm guessing they are getting written to the components before we override them.

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.