Fixed toolbar colors for vuetify 2

app/imports/ui/components/ToolbarCard.vue

@@ -25,12 +25,14 @@
 
 <script lang="js">
 	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+  import getThemeColor from '/imports/ui/utility/getThemeColor.js';
+
 	export default {
 		props: {
 			color: {
 				type: String,
 				default(){
-					return this.$vuetify.theme.themes.light.secondary;
+          return getThemeColor('secondary');
 				},
 			},
 		},

app/imports/ui/components/propertyToolbar.vue

@@ -123,6 +123,7 @@ import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import ColorPicker from '/imports/ui/components/ColorPicker.vue';
+import getThemeColor from '/imports/ui/utility/getThemeColor.js';
 
 export default {
   components: {
@@ -142,7 +143,7 @@ export default {
       return isDarkColor(this.color);
     },
     color(){
-      return this.model && this.model.color || this.$vuetify.theme.themes.light.secondary;
+      return this.model && this.model.color || getThemeColor('secondary');
     },
     title(){
       let model = this.model;

app/imports/ui/creature/character/CharacterSheetToolbar.vue

@@ -129,6 +129,7 @@ import { assertEditPermission } from '/imports/api/creature/creaturePermissions.
 import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import CharacterSheetFab from '/imports/ui/creature/character/CharacterSheetFab.vue';
+import getThemeColor from '/imports/ui/utility/getThemeColor.js';
 
 export default {
   inject: {
@@ -145,7 +146,7 @@ export default {
       if (this.creature && this.creature.color){
         return this.creature.color;
       } else {
-        return this.$vuetify.theme.themes.light.secondary;
+        return getThemeColor('secondary');
       }
     },
     isDark(){

app/imports/ui/dialogStack/DialogBase.vue

@@ -44,6 +44,7 @@
 </template>
 
 <script lang="js">
+  import getThemeColor from '/imports/ui/utility/getThemeColor.js';
   import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
 	export default {
@@ -66,7 +67,7 @@
         return isDarkColor(this.computedColor);
       },
       computedColor(){
-        return this.color || this.$vuetify.theme.themes.light.secondary;
+        return this.color || getThemeColor('secondary');
       }
     },
 		methods: {

app/imports/ui/library/LibraryAndNode.vue

@@ -77,6 +77,7 @@ import InsertLibraryNodeButton from '/imports/ui/library/InsertLibraryNodeButton
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
+import getThemeColor from '/imports/ui/utility/getThemeColor.js';
 
 export default {
   components: {
@@ -101,7 +102,7 @@ export default {
     isToolbarDark(){
       return isDarkColor(
         this.selectedNode && this.selectedNode.color ||
-        this.$vuetify.theme.themes.light.secondary
+        getThemeColor('secondary')
       );
     }
   },

app/imports/ui/styles/cardColors.css

@@ -4,7 +4,7 @@
 }
 
 .theme--dark .card-background {
-  background: #000;
+  background: #151515;
 }
 
 .theme--light .card-background {

app/imports/ui/utility/getThemeColor.js

@@ -0,0 +1,7 @@
+import vuetify from '/imports/ui/vuetify.js';
+
+export default function(color){
+  return vuetify.framework.theme.dark ?
+    vuetify.framework.theme.themes.dark[color] :
+    vuetify.framework.theme.themes.light[color];
+}

app/imports/ui/vueSetup.js

@@ -5,27 +5,12 @@ import AppLayout from '/imports/ui/layouts/AppLayout.vue';
 import ReactiveProvide from 'vue-reactive-provide';
 import VueObserverUtils from '@tozd/vue-observer-utils';
 import router from '/imports/ui/router.js';
-import themes from '/imports/ui/themes.js';
 import '/imports/ui/components/global/globalIndex.js';
-import SvgIconByName from '/imports/ui/icons/SvgIconByName.vue';
-import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
 import '/imports/ui/markdownCofig.js';
-
+import vuetify from '/imports/ui/vuetify.js';
 import Vuetify from 'vuetify/lib';
 import { Scroll } from 'vuetify/lib/directives'
 
-let icons = {};
-
-for (const name in SVG_ICONS) {
-  let icon = SVG_ICONS[name];
-  icons[icon.name] = {
-    component: SvgIconByName,
-    props: {
-      name: name,
-    }
-  }
-}
-
 Vue.use(VueMeteorTracker);
 Vue.config.meteor.freeze = true;
 Vue.config.devtools = true;
@@ -45,17 +30,7 @@ Meteor.startup(() => {
   new Vue({
     router,
     store,
-    vuetify: new Vuetify({
+    vuetify,
-      theme: {
-        themes,
-        options: { variations: false },
-        //options: { customProperties: true },
-      },
-      icons: {
-        iconfont: 'md',
-        values: icons,
-      }
-    }),
     ...AppLayout,
   }).$mount('#app');
 });

app/imports/ui/vuetify.js

@@ -0,0 +1,30 @@
+import Vuetify from 'vuetify/lib';
+import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
+import SvgIconByName from '/imports/ui/icons/SvgIconByName.vue';
+import themes from '/imports/ui/themes.js';
+
+let icons = {};
+
+for (const name in SVG_ICONS) {
+  let icon = SVG_ICONS[name];
+  icons[icon.name] = {
+    component: SvgIconByName,
+    props: {
+      name: name,
+    }
+  }
+}
+
+let vuetify = new Vuetify({
+  theme: {
+    themes,
+    options: { variations: false },
+    //options: { customProperties: true },
+  },
+  icons: {
+    iconfont: 'md',
+    values: icons,
+  }
+});
+
+export default vuetify;