Themes - Configuration - Vue Material

Creating themes

To use custom themes you'll need SCSS/SASS support in your project. Read more about Pre-Processors. In the near future you'll be able to use themes with Plain CSS and Stylus too.

The simplest markup to create a theme in Vue Material is:

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200), // The primary color of your application
  accent: md-get-palette-color(red, A200) // The accent or secondary color
));

@import "~vue-material/dist/theme/all"; // Apply the theme Code copied!

Available colors

Vue Material comes with the nice Material Design color palette. You can fully use it to build your themes, using the available colors along with the color shade.

The shades are based on color weight, that can be, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 or A700.

All of those colors can be passed as an argument of md-get-palette-color:

red
pink
purple
deeppurple
indigo
blue
lightblue
cyan
teal
green
lightgreen
lime
yellow
amber
orange
deeporange
brown
grey
bluegrey
white
black

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color(green, A200), // The primary color of your application
  accent: md-get-palette-color(pink, 500) // The accent or secondary color
));

@import "~vue-material/dist/theme/all"; // Apply the theme Code copied!

Default colors

Vue Material has default theme colors:

Primary: #448aff => Blue A200
Accent: #ff5252 => Red A200

This means that if you do not pass all arguments of md-register-theme, the default ones will be applied:

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200) // The primary color of your application
));

@import "~vue-material/dist/theme/all"; // Apply the theme Code copied!

Using your own colors

Sometimes the colors of your brand might not match with the material ones. It is possible to pass your own colors, without using the Material Design Palette:

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: #3fffbe, // The primary color of your brand
  accent: #1a11e8 // The secondary color of your brand
));

@import "~vue-material/dist/theme/all"; // Apply the theme Code copied!

Dark Themes

By default light colors will be used on backgrounds, but you can easily change this, by passing a theme attribute:

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200), // The primary color of your application
  accent: md-get-palette-color(red, A200), // The accent or secondary color
  theme: dark // This can be dark or light
));

@import "~vue-material/dist/theme/all"; // Apply the theme Code copied!

Theming individual components

You can theme individual components effortlessly, by calling the components one by one. This will make your final build smaller in size and higher in performance:

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200), // The primary color of your application
  accent: md-get-palette-color(red, A200), // The accent or secondary color
  theme: dark // This can be dark or light
));

@import "~vue-material/dist/components/MdButton/theme"; // Apply the Button theme
@import "~vue-material/dist/components/MdContent/theme"; // Apply the Content theme
@import "~vue-material/dist/components/MdToolbar/theme"; // Apply the Toolbar theme Code copied!