Vuetify: [Enhancement] `darken-x` and `lighten-x` for theme colors

[asifm]

The classes darken-x and lighten-x for these colors are very helpful. I wish they also worked with primary, secondary, and such theme colors. Same with the text versions.

Since these are supposedly the two most important colors in the palette, it'd be great if we have finer control over their shades. Currently, it requires a lot of custom classes to achieve these, at least for people like me who aren't very comfortable with editing the default stylus variables/values.

[johnleider]

I absolutely agree.

[johnleider]

After looking into this, it may be slightly difficult since the theme is not restricted to colors available within the available colors.

The easiest way to do this would be to simply define those shades within the $theme hash when creating a custom theme. All colors in that array are made into helper classes.

[KaelWD]

I accidentally started this so I might as well actually do it. It's pretty simple to do now with the dynamic theme system.

[flawnn]

So whatsup, how to do that shit, it would be really nice if you could just write that so:

Vue.use(Vuetify, { theme:{ primary: 'tealdarken-4' } })

[KaelWD]

@flawnn That's a different thing entirely. Just import colors from 'vuetify/es5/util/colors' then use colors.teal.darken4

2567

https://vuetifyjs.com/style/colors

[JasonGrant]

I think it would be cool if it were similar to this Material Design Palette Generator where you add your primary color and the lighten/darken is automatically generated. http://mcg.mbitson.com/#!?mcgpalette0=%238acdb2

[johnleider]

@nekosaur is already ahead of you, he's been working on such a thing.

[KaelWD]

It doesn't have the lighten/darken though, but it can after this.

[joseboretto]

how I fix it

Vue.use(Vuetify, {
  theme: {
    primary: colors.green.darken1,
    secondary: colors.green.lighten1,
    accent: colors.green.accent1,
    error: '#b71c1c'
  }
})

[KaelWD]

Maths is hard

[JasonGrant]

We all appreciate the hard work! Looks like gray is working :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord