Vue Material -

Themes - Concepts

Theme Engine

The concept of themes on Vue Material have four pillars: Dynamic, Multiple, Flexible and Friendly.

  • Dynamic: You can apply dynamic themes an change them anytime you want, through an declarative API. Once you set a theme to a specify component, all of it's children will get the same color scheme.
  • Multiple: Each component of your page can have a different theme if you want.
  • Flexible: You can create light or dark themes. You can also theme only the themes that you're really using, on demand and on build time.
  • Friendly: The theme engine will automatically calculate the contrast between the background and the text for you. This means that no color on Vue Material will be hard to read. Score!

As Vue Material can have dark themes too, the background color of most elements is applied automatically.

Every component can also work with two color intentions, that will change the background and foreground colors: Primary and Accent. Some components also have a Transparent variant to make your layouts cleaner and easy to place on top of another element. E.g. Tabs inside toolbars.

Color Intentions

Color in Material Design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. The Material Design palette can be fully applied here, and you should use the name and the hue number to create themes.

Vue Material use classes to apply those color intentions: md-primary, md-accent, and md-transparent. The background color is applied automatically by the theme engine.

Although is possible, is not recommended to use in primary and accent the same color.