Character sheet toolbars now take on their character's color

app/imports/ui/character/CharacterSheet.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-    <v-toolbar app color="primary" dark>
+    <v-toolbar app :color="character.color || 'primary'" :dark="isDarkColor(character.color || theme.primary)">
       <v-btn v-if="showMenuButton" flat icon @click="toggleDrawer">
         <v-icon>menu</v-icon>
       </v-btn>
@@ -17,24 +17,30 @@
 
 <script>
 	import Creatures from '/imports/api/creature/Creatures.js';
+	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 	import { mapMutations } from "vuex";
+	import theme from '/imports/ui/theme.js';
 
 	export default {
 		props: {
 			showMenuButton: Boolean,
 			charId: String,
 		},
+		data(){return {
+			theme,
+		}},
 		methods: {
       ...mapMutations([
         "toggleDrawer",
       ]),
+			isDarkColor,
     },
 		meteor: {
 			$subscribe: {
 	      'singleCharacter': [this.charId],
 			},
 			character(){
-				return Creatures.findOne(this.charId);
+				return Creatures.findOne(this.charId) || {};
 			},
 		},
 	}

app/imports/ui/theme.js

@@ -0,0 +1,9 @@
+const theme = {
+  primary: "#424242",
+  secondary: "#E53935",
+  accent: "#B71C1C",
+  error: "#f44336",
+  warning: "#FFB300",
+  info: "#5C6BC0",
+  success: "#43A047",
+};

app/imports/ui/utility/isDarkColor.js

@@ -0,0 +1,25 @@
+function hexToRgb(hex) {
+    if (!hex) return null;
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+};
+
+export default function isDarkColor(hexColor){
+  let rgb = hexToRgb(hexColor);
+  if (!rgb) return null;
+  let brightness = Math.round(
+    ((rgb.r* 299) + (rgb.g * 587) + (rgb.b * 114))
+    / 1000
+  );
+  return brightness <= 125;
+};

app/imports/ui/vueSetup.js

@@ -6,18 +6,11 @@ import VueMeteorTracker from 'vue-meteor-tracker';
 import AppLayout from '/imports/ui/layouts/AppLayout.vue';
 import router from "/imports/ui/router.js";
 import "vuetify/dist/vuetify.min.css";
+import theme from '/imports/ui/theme.js';
 
 Vue.use(VueMeteorTracker);
 Vue.use(Vuetify, {
-  theme: {
+  theme,
-    primary: "#424242",
-    secondary: "#E53935",
-    accent: "#B71C1C",
-    error: "#f44336",
-    warning: "#FFB300",
-    info: "#5C6BC0",
-    success: "#43A047",
-  },
   iconfont: "mdi",
 });