Vue-material: Custom theme colors

[baggachipz]

First off, I want to say that this is an awesome package and is very well done. Thank you for creating this.

Now, the greedy part. It would be nice to be able to theme the colors in a more custom manner that deviates from the Material color guidelines; that is, what if I want my primary color to specifically be #3C73AA (for example)? I can't accomplish that with adjusting the hue on any of the supported colors. I know I could simply override everything in CSS, but that is brittle. I'd much rather use the excellent theme setup to do it properly. If you'd accept a PR I could certainly help out here. I also know that it violates the Material Design guidelines, so I understand if you choose not to support custom theme colors. Thanks!

[marcosmoura]

Hi @baggachipz
I would love to see a PR with this improvement. This is tracked in my backlog. I was planning to develop this to the 0.7.0 version. A new theme engine is working now on the develop branch and will be delivered on 0.5.0, but without this core change.

This do not hurt the Material Guidelines, if you follow the color contrasts and everything:

Your app's color palette may be defined by using a custom palette suited to your brand, such as monochromatic, black and white, full color, or neutral. Alternatively, you may use the material design color palette. All color palettes should include sufficient contrast between different UI elements.

Thanks.

[rhangai]

Well, since i really needed this feature, I forked this project and implemented a simple solution: renanhangai/vue-material@0e90cce that creates a new method called Vue.material.registerPalette.
I think it is a nice solution as you already support a palette variable.

Usage:

Vue.material.registerPalette( 'my-palette', {
  50: '#f3e0e0',
  100: '#e0b3b3',
  200: '#cc8080',
  300: '#b84d4d',
  400: '#a82626',
  500: '#990000',
  600: '#910000',
  700: '#860000',
  800: '#7c0000',
  900: '#6b0000',
  A100: '#ff9a9a',
  A200: '#ff6767',
  A400: '#ff3434',
  A700: '#ff1a1a',
  darkText: [ 50, 100, 'A100', 'A200' ]
});
Vue.material.registerTheme( 'default', { primary: 'my-palette' } );

But i would really like to see it on the main branch. I can make a PR if it would be of any help.

[abelovic]

@marcosmoura - Can you consider @renanhangai solution above? I need this as well and it seems simple enough to implement :)

[jqEmprendedorVE]

I'm really appreciate that what realized @renanhangai, please @marcosmoura can you incorporate this function?

[nothinggift]

I used this package for my one project, it's awesome, and recently i need to make a theme solution， so i write a loader for webpack, maybe it can help you.

[marcosmoura]

GREAT stuff @renanhangai. I will do the code review and if everything is alright I can merge for the 0.8.0. o/

[Zedenem]

Thank you very much @renanhangai! And thank you @marcosmoura for planning to integrate it! This is a lifesaver for me.

Is there a dev branch I could use to start using it right now? I don't need stability as I am just prototyping. I tried using the develop branch but the registerPalette function is unknown there. In the meantime, I'll use @renanhangai's fork (thanks again! ;-)).

Good job for all of this, I love vue-material!

[rhangai]

@Zedenem Well, the pull request was already accepted. I just couldn't find it by using the github search either so I checked the src code directly and it is there on the develop branch :)

https://github.com/marcosmoura/vue-material/blob/develop/src/core/components/mdTheme/index.js#L157-L159

[Zedenem]

I checked the src too @renanhangai but couldn't make it work anyway. I am using your fork for now but will get back to trying the develop branch and let this thread know. Again, thanks!

[waratah]

This feature is committed to the npm module version. It needs to be documented.

[Samuell1]

Closing this issue as our focus is on the new 1.0.0 version.

https://vuematerial.io/themes/configuration

[rodrigoAbril]

for those like me who have a hard time creating a nice palette like the one in @renanhangai response you can use this nice site i found http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 it even has a vue-material output format :D