diff --git a/examples/with-vuetify/assets/app.styl b/examples/with-vuetify/assets/app.styl index 66d746eb17..784fd9c898 100644 --- a/examples/with-vuetify/assets/app.styl +++ b/examples/with-vuetify/assets/app.styl @@ -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' \ No newline at end of file +@require '~vuetify/src/stylus/main' diff --git a/examples/with-vuetify/plugins/vuetify.js b/examples/with-vuetify/plugins/vuetify.js index a91ae689bb..0a5a2acc45 100644 --- a/examples/with-vuetify/plugins/vuetify.js +++ b/examples/with-vuetify/plugins/vuetify.js @@ -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 + } +})