Skip to content

Instantly share code, notes, and snippets.

@willmitchell
Created July 8, 2017 18:14
Show Gist options
  • Save willmitchell/6c15bf39b51bf6af892473a3930fde0e to your computer and use it in GitHub Desktop.
Save willmitchell/6c15bf39b51bf6af892473a3930fde0e to your computer and use it in GitHub Desktop.
Theme Example
<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>
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'
})
<script src="https://unpkg.com/vue-material@latest"></script>
<script src="https://unpkg.com/vue@latest"></script>
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment