Add color plugin

frontend/components/label/LabelList.vue

@@ -64,7 +64,7 @@
     <template v-slot:[`item.background_color`]="props">
       <v-chip
         :color="props.item.background_color"
-        :text-color="textColor(props.item.background_color)"
+        :text-color="$contrastColor(props.item.background_color)"
       >
         {{ props.item.background_color }}
       </v-chip>
@@ -87,7 +87,6 @@ import ActionMenu from './ActionMenu.vue'
 import FormCreate from './FormCreate.vue'
 import FormDelete from './FormDelete.vue'
 import FormUpload from './FormUpload.vue'
-import { idealColor } from '~/plugins/utils'
 
 export default Vue.extend({
   components: {
@@ -200,10 +199,6 @@ export default Vue.extend({
         this.create(this.editedItem)
       }
       this.close()
-    },
-
-    textColor(backgroundColor: string) {
-      return idealColor(backgroundColor)
     }
   }  
 })

frontend/nuxt.config.js

@@ -51,7 +51,8 @@ export default {
     '~/plugins/filters.js',
     '~/plugins/vue-youtube.js',
     '~/plugins/vue-shortkey.js',
-    '~/plugins/services.ts'
+    '~/plugins/services.ts',
+    '~/plugins/color.ts'
   ],
   /*
   ** Nuxt.js modules

frontend/plugins/color.ts

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $contrastColor(hexString: string): string
+  }
+}
+
+Vue.prototype.$contrastColor = (hexString: string) => {
+    // W3c offers a formula for calculating ideal color:
+  // https://www.w3.org/TR/AERT/#color-contrast
+  const r = parseInt(hexString.substr(1, 2), 16)
+  const g = parseInt(hexString.substr(3, 2), 16)
+  const b = parseInt(hexString.substr(5, 2), 16)
+  return ((((r * 299) + (g * 587) + (b * 114)) / 1000) < 128) ? '#ffffff' : '#000000'
+}