From 4ad7a8581842f7c8160a88d56b6ce3989901024c Mon Sep 17 00:00:00 2001
From: psmelero <psmelero@hiberus.com>
Date: Mon, 27 Nov 2017 09:47:51 +0100
Subject: [PATCH] update palette definition to work with vuetify +0.17

---
 examples/with-vuetify/assets/app.styl    | 29 +++++++++++++++++-------
 examples/with-vuetify/plugins/vuetify.js | 17 +++++++++++++-
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/examples/with-vuetify/assets/app.styl b/examples/with-vuetify/assets/app.styl
index 66d746eb17..082a3772be 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 colors if you want to 
+
+@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
+  }
+})