Theme Example

index.html

<div id="app">
  <md-toolbar>
    <h1 class="md-title" style="flex: 1">My Title</h1>
    <md-button class="md-icon-button">
      <md-icon>more_vert</md-icon>
    </md-button>
  </md-toolbar>
  
  <md-theme md-name="teal">
    <md-button class="md-primary">Primary Button</md-button>
    <md-button class="md-accent">Accent Button</md-button>
    <md-button class="md-raised md-primary">Raised Primary Button</md-button>
  </md-theme>
  
  <md-theme md-name="purple">
    <md-button class="md-primary">Primary Button</md-button>
    <md-button class="md-accent">Accent Button</md-button>
    <md-button class="md-raised md-primary">Raised Primary Button</md-button>
  </md-theme>
</div>

script.js

Vue.use(VueMaterial)

Vue.material.registerTheme({
  default: {
    primary: {
      color: 'light-green',
      hue: 700
    },
    accent: 'red'
  },
  teal: {
    primary: 'blue',
    accent: 'pink'
  },
  purple: {
    primary: 'purple',
    accent: 'orange'
  }
})

var App = new Vue({
  el: '#app'
})

scripts

<script src="https://unpkg.com/vue-material@latest"></script>
<script src="https://unpkg.com/vue@latest"></script>

styles

<link href="https://unpkg.com/vue-material@latest/dist/vue-material.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

theme-example.markdown

Theme Example

A Pen by Vue Material on CodePen.

License.