Make text color decidable according to background color

frontend/components/organisms/LabelList.vue

@@ -49,7 +49,11 @@
     </template>
     <template v-slot:item.background_color="{ item }">
       <v-edit-dialog>
-        <v-chip :color="item.background_color" dark>
+        <v-chip
+          :color="item.background_color"
+          :text-color="textColor(item.background_color)"
+          dark
+        >
           {{ item.background_color }}
         </v-chip>
         <template v-slot:input>
@@ -71,6 +75,7 @@
 
 <script>
 import { colorRules, labelNameRules } from '@/rules/index'
+import { idealColor } from '~/plugins/utils'
 
 export default {
   props: {
@@ -107,6 +112,9 @@ export default {
     }
   },
   methods: {
+    textColor(backgroundColor) {
+      return idealColor(backgroundColor)
+    },
     update(selected) {
       this.$emit('update-selected', selected)
     },

frontend/components/organisms/MultiClassClassification.vue

@@ -14,7 +14,7 @@
         v-bind="attrs"
         :input-value="selected"
         :color="item.background_color"
-        text-color="white"
+        :text-color="textColor(item.background_color)"
         close
         @click="select"
         @click:close="remove(item.id)"
@@ -26,6 +26,8 @@
 </template>
 
 <script>
+import { idealColor } from '~/plugins/utils'
+
 export default {
   props: {
     labels: {
@@ -65,6 +67,9 @@ export default {
   },
 
   methods: {
+    textColor(backgroundColor) {
+      return idealColor(backgroundColor)
+    },
     add(labels) {
       const label = labels[labels.length - 1]
       this.addLabel(label.id)