Vue Material -

Themes - Configuration

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 have 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 do 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 without effort, by calling the components one by one. This will make your final build size smaller and more performatic:

@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!