Vue-material: Configure more colors in themes

[askdesigners]

It would be great to be able to configure more of the theme's colors. For instance adding a warning and error color for configuration would be awesome.

[zapping]

You can have your own colors by defining custom themes. Try this doc https://vuematerial.io/themes/configuration

[b4dnewz]

@zapping is this the right way to define custom classes?

@import "~vue-material/dist/theme/engine";
@include md-register-theme("default", (
  primary: #77c0c0,
  accent: #add372,
  whiteText: #fff,
  theme: light
));
@import "~vue-material/dist/theme/all";

once compile I tried: md-white-text md-whiteText white-text whiteText but are undefined instead the primary and accent are updated, am I doing something wrong?

[zapping]

@b4dnewz, It seems like you are trying to change the text color. Well the theme engine automatically applies a contrast color for your background and foreground. If you want to change that then it needs to be done in your style like this.

https://codesandbox.io/s/m707zx5xr9

This can be done directly in your component style like in the codesandbox above or you can set it in a css file and include the file.

[b4dnewz]

@zapping thanks for the explanation. besides overriding the style at component level is not possible to generate custom classes with md-register-theme ?

for example creating a md-secondary class in this format and accessing like: class="md-secondary"

@include md-register-theme("default", (
  secondary: #add372
));

or the mixin is just for overriding the predefined variables/classes?

[Samuell1]

@b4dnewz yes thats not yet possible