From 838e2ed35ffd2f083986d3d479fe53cacff34868 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sun, 28 Mar 2021 14:29:56 +0200
Subject: [PATCH] Fixed toolbar colors for vuetify 2

---
 app/imports/ui/components/ToolbarCard.vue     |  4 ++-
 app/imports/ui/components/propertyToolbar.vue |  3 +-
 .../character/CharacterSheetToolbar.vue       |  3 +-
 app/imports/ui/dialogStack/DialogBase.vue     |  3 +-
 app/imports/ui/library/LibraryAndNode.vue     |  3 +-
 app/imports/ui/styles/cardColors.css          |  2 +-
 app/imports/ui/utility/getThemeColor.js       |  7 +++++
 app/imports/ui/vueSetup.js                    | 29 ++----------------
 app/imports/ui/vuetify.js                     | 30 +++++++++++++++++++
 9 files changed, 51 insertions(+), 33 deletions(-)
 create mode 100644 app/imports/ui/utility/getThemeColor.js
 create mode 100644 app/imports/ui/vuetify.js

diff --git a/app/imports/ui/components/ToolbarCard.vue b/app/imports/ui/components/ToolbarCard.vue
index 55f19bb7..aa92e2c0 100644
--- a/app/imports/ui/components/ToolbarCard.vue
+++ b/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');
 				},
 			},
 		},
diff --git a/app/imports/ui/components/propertyToolbar.vue b/app/imports/ui/components/propertyToolbar.vue
index 9b9c8497..ed25bcbb 100644
--- a/app/imports/ui/components/propertyToolbar.vue
+++ b/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;
diff --git a/app/imports/ui/creature/character/CharacterSheetToolbar.vue b/app/imports/ui/creature/character/CharacterSheetToolbar.vue
index f439d8af..81c00c47 100644
--- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue
+++ b/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(){
diff --git a/app/imports/ui/dialogStack/DialogBase.vue b/app/imports/ui/dialogStack/DialogBase.vue
index 051f338d..fda72bdd 100644
--- a/app/imports/ui/dialogStack/DialogBase.vue
+++ b/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: {
diff --git a/app/imports/ui/library/LibraryAndNode.vue b/app/imports/ui/library/LibraryAndNode.vue
index a972c102..559a6e72 100644
--- a/app/imports/ui/library/LibraryAndNode.vue
+++ b/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')
       );
     }
   },
diff --git a/app/imports/ui/styles/cardColors.css b/app/imports/ui/styles/cardColors.css
index a7450a8a..04f0f52e 100644
--- a/app/imports/ui/styles/cardColors.css
+++ b/app/imports/ui/styles/cardColors.css
@@ -4,7 +4,7 @@
 }
 
 .theme--dark .card-background {
-  background: #000;
+  background: #151515;
 }
 
 .theme--light .card-background {
diff --git a/app/imports/ui/utility/getThemeColor.js b/app/imports/ui/utility/getThemeColor.js
new file mode 100644
index 00000000..f53596f9
--- /dev/null
+++ b/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];
+}
diff --git a/app/imports/ui/vueSetup.js b/app/imports/ui/vueSetup.js
index 7d620e1c..1444f69a 100644
--- a/app/imports/ui/vueSetup.js
+++ b/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({
-      theme: {
-        themes,
-        options: { variations: false },
-        //options: { customProperties: true },
-      },
-      icons: {
-        iconfont: 'md',
-        values: icons,
-      }
-    }),
+    vuetify,
     ...AppLayout,
   }).$mount('#app');
 });
diff --git a/app/imports/ui/vuetify.js b/app/imports/ui/vuetify.js
new file mode 100644
index 00000000..8a27dd60
--- /dev/null
+++ b/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;