Vue-material: Custom theme colors?

[neeilya]

Hi, could you please describe how can I modify theme colors?
E.g. in material they have blue-grey theme.

What if I want to use 800 instead of default 500?
Thanks!

[marcosmoura]

Yeah. Of course. Sorry about that. I'm developing some pages to describe the API better, but it's not finished yet. Meanwhile I will try to answer this:
When you register a theme, with Vue.material.theme.register, for example, you can't pass custom hex colors (for now), but you can pass all the colors and hues from Google Material spec. Like this:

Vue.material.theme.register('default', { 
  primary: { 
    color: 'blue-grey', 
    hue: 800 
  }
}) 

You can do this with primary, accent, warn and background colors. The color property is the name on the documentation and the hue is the variant, on that table. You can see that I didn't pass the accent, the warn and the background colors. For those who are missing Vue Material applies the default color.

Default Colors:
Primary = Indigo
Accent = Pink
Warn = Deep Orange
Background = Grey (50)

And yes. This also works for the registerAll method.

I hope that you can use this without having problems.
Thank you for reporting this! :D

[neeilya]

Thanks for quick response and explanation.
Great job btw :)

[rwatts3]

Hi thank you for providing details on this.

I have a similar / slightly separate question. How so I use colors or what are the classes to use ?
So if I have a button and I want to change the color.

[marcosmoura]

@rwatts3 Well. Right now you can only use colors from the Material Design Specs. I will develop a better way to change the colors for your own. :)