Themes - Concepts

Theme Engine

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

• Dynamic: You can apply dynamic themes and change them anytime you want, through a declarative API. Once you set a theme to a specific 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 are 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 easier to place on top of other elements. 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.