diff --git a/app/imports/ui/components/ColorPicker.vue b/app/imports/ui/components/ColorPicker.vue
index aa0c3697..01fa0fbe 100644
--- a/app/imports/ui/components/ColorPicker.vue
+++ b/app/imports/ui/components/ColorPicker.vue
@@ -56,7 +56,7 @@
               <v-scroll-y-transition>
                 <v-icon
                   v-if="kebabShade === shadeOption"
-                  :class="{dark: isDark(color, shade)}"
+                  :class="isDark(color, shade) ? 'dark' : 'light'"
                 >
                   check
                 </v-icon>
diff --git a/app/imports/ui/components/ToolbarCard.vue b/app/imports/ui/components/ToolbarCard.vue
index 2fe102d7..8b5caef4 100644
--- a/app/imports/ui/components/ToolbarCard.vue
+++ b/app/imports/ui/components/ToolbarCard.vue
@@ -9,6 +9,7 @@
       :style="`transform: none; ${hasToolbarClickListener ? 'cursor: pointer;' : ''}`"
       :color="color"
       :dark="isDark"
+      :light="!isDark"
       @click="$emit('toolbarclick')"
     >
       <slot name="toolbar" />
diff --git a/app/imports/ui/components/propertyToolbar.vue b/app/imports/ui/components/propertyToolbar.vue
index c46a895a..e2ed67e8 100644
--- a/app/imports/ui/components/propertyToolbar.vue
+++ b/app/imports/ui/components/propertyToolbar.vue
@@ -2,6 +2,7 @@
   <v-toolbar
     :color="color || 'secondary'"
     :dark="isDark"
+    :light="!isDark"
     :flat="flat"
   >
     <property-icon
diff --git a/app/imports/ui/creature/character/CharacterSheetToolbarItems.vue b/app/imports/ui/creature/character/CharacterSheetToolbarItems.vue
index 99e7357f..95e3ffc0 100644
--- a/app/imports/ui/creature/character/CharacterSheetToolbarItems.vue
+++ b/app/imports/ui/creature/character/CharacterSheetToolbarItems.vue
@@ -53,7 +53,6 @@
 <script>
 import Creatures from '/imports/api/creature/Creatures.js';
 import removeCreature from '/imports/api/creature/removeCreature.js';
-import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import { mapMutations } from 'vuex';
 import { theme } from '/imports/ui/theme.js';
 import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
@@ -134,7 +133,6 @@ export default {
         }
       });
     },
-		isDarkColor,
   },
   meteor: {
     $subscribe: {
diff --git a/app/imports/ui/dialogStack/DialogBase.vue b/app/imports/ui/dialogStack/DialogBase.vue
index bdec7d41..212ac053 100644
--- a/app/imports/ui/dialogStack/DialogBase.vue
+++ b/app/imports/ui/dialogStack/DialogBase.vue
@@ -10,6 +10,7 @@
       <v-toolbar
         :color="computedColor"
         :dark="isDark"
+        :light="!isDark"
         class="base-dialog-toolbar"
         :flat="!offsetTop"
       >
diff --git a/app/imports/ui/library/LibraryAndNode.vue b/app/imports/ui/library/LibraryAndNode.vue
index 5d1ef23d..5de449b1 100644
--- a/app/imports/ui/library/LibraryAndNode.vue
+++ b/app/imports/ui/library/LibraryAndNode.vue
@@ -14,7 +14,8 @@
       <v-toolbar
         flat
         :color="selectedNode && selectedNode.color || 'secondary'"
-        :dark="isDarkColor(selectedNode && selectedNode.color || $vuetify.theme.secondary)"
+        :dark="isToolbarDark"
+        :light="!isToolbarDark"
       >
         <v-spacer />
         <v-switch
@@ -67,6 +68,14 @@ export default {
     organize: false,
     selected: undefined,
   };},
+  computed: {
+    isToolbarDark(){
+      return isDarkColor(
+        this.selectedNode && this.selectedNode.color ||
+        this.$vuetify.theme.secondary
+      );
+    }
+  },
   watch:{
     selectedNode(val){
       this.$emit('selected', val)
@@ -101,7 +110,6 @@ export default {
       }
     },
     getPropertyName,
-    isDarkColor,
   },
   meteor: {
     $subscribe: {
diff --git a/app/imports/ui/properties/components/persona/NoteCard.vue b/app/imports/ui/properties/components/persona/NoteCard.vue
index 46ea35fb..b80dd03f 100644
--- a/app/imports/ui/properties/components/persona/NoteCard.vue
+++ b/app/imports/ui/properties/components/persona/NoteCard.vue
@@ -1,16 +1,25 @@
 <template lang="html">
-	<v-card :color="model.color" :data-id="model._id" hover @click="clickProperty(model._id)">
-		<v-card-title class="title">
-			{{model.name}}
-		</v-card-title>
-		<v-card-text>
-			<property-description :value="model.description"/>
-		</v-card-text>
-	</v-card>
+  <v-card
+    :color="model.color"
+    :data-id="model._id"
+    hover
+    :dark="model.color && isDark"
+    :light="model.color && !isDark"
+    @click="clickProperty(model._id)"
+  >
+    <v-card-title class="title">
+      {{ model.name }}
+    </v-card-title>
+    <v-card-text>
+      <property-description :value="model.description" />
+    </v-card-text>
+  </v-card>
 </template>
 
 <script>
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+
 export default {
 	components: {
 		PropertyDescription,
@@ -18,6 +27,11 @@ export default {
 	props: {
 		model: Object,
 	},
+  computed: {
+    isDark(){
+      return isDarkColor(this.model.color);
+    },
+  },
 	methods: {
 		clickProperty(_id){
 			this.$store.commit('pushDialogStack', {
diff --git a/app/imports/ui/utility/isDarkColor.js b/app/imports/ui/utility/isDarkColor.js
index 6827e3a9..75bcce93 100644
--- a/app/imports/ui/utility/isDarkColor.js
+++ b/app/imports/ui/utility/isDarkColor.js
@@ -12,7 +12,7 @@ function hexToRgb(hex) {
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16)
     } : null;
-};
+}
 
 export default function isDarkColor(hexColor){
   let rgb = hexToRgb(hexColor);
@@ -22,4 +22,4 @@ export default function isDarkColor(hexColor){
     / 1000
   );
   return brightness <= 125;
-};
+}