Merge pull request #2252 from gangsthub/dev

Update vuetify.js example for correct colors palette definition
This commit is contained in:
Sébastien Chopin 2017-11-27 11:14:58 +01:00 committed by GitHub
commit 947f2844bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 9 deletions

View File

@ -1,14 +1,27 @@
// Specify overrides (theme and/or base variables etc.)
// See https://vuetifyjs.com/quick-start
// And for themes customizing: https://vuetifyjs.com/style/theme
// Color Palette: https://vuetifyjs.com/style/colors
// Although, since version https://github.com/vuetifyjs/vuetify/releases/tag/v0.17.0, colors are no
// longer defined **explicitly** in the stylus files.
// you can use `import colors from 'vuetify/es5/util/colors'` in the vuetify instance, under `plugins`
// if you only want to define your color palette.
// you have to define the same palette colors just if you want to use them inside your own stylus files.
@require '~vuetify/src/stylus/settings/_colors'
$theme := {
primary: #9c27b0
accent: #ce93d8
secondary: #424242
info: #0D47A1
warning: #ffb300
error: #B71C1C
success: #2E7D32
primary: $red.darken-2
accent: $red.accent-2
secondary: $grey.lighten-1
info: $blue.lighten-1
warning: $amber.darken-2
error: $red.accent-4
success: $green.lighten-2
}
// Import Vuetify styling
@require '~vuetify/src/stylus/main.styl'
@require '~vuetify/src/stylus/main'

View File

@ -1,4 +1,19 @@
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)
// You can also specify those components you are going to use for "a la carte" build:
// https://github.com/vuetifyjs/nuxt/blob/master/template/plugins/vuetify.js
// https://github.com/vuetifyjs/a-la-carte/blob/master/template/src/main.js
Vue.use(Vuetify, {
theme: {
primary: '#121212', // a color that is not in the material colors palette
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
})