keep tag/mark/service labels legible by using dark text color on low …

…contrast
spq · Nov 10, 2024 · ec923ce · ec923ce
1 parent 13aa80c
commit ec923ce
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 7 deletions.
diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue
@@ -58,6 +58,7 @@
               <v-list-item-title
                 class="text-truncate"
                 style="max-width: 110px"
+                :style = "{ color: isDarkColor(tag.Color) ? 'white' : 'black' }"
                 :title="tag.Name.substr(tagType.key.length + 1)"
                 >{{
                   tag.Name.substr(tagType.key.length + 1)
@@ -67,7 +68,7 @@
             <v-menu offset-y bottom open-on-hover right>
               <template #activator="{ on, attrs }">
                 <v-list-item-action v-bind="attrs" v-on="on">
-                  <v-btn v-if="hover" icon x-small>
+                  <v-btn v-if="hover" icon x-small :style = "{ color: isDarkColor(tag.Color) ? 'white' : 'black' }">
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
                   <v-chip v-else x-small
@@ -248,6 +249,7 @@ import { EventBus } from "./EventBus";
 import { useRootStore } from "@/stores";
 import { tagForURI } from "@/filters";
 import { computed, onMounted, ref, watch } from "vue";
+import { isDarkColor } from "@/lib/colors"
 
 type ColorSchemeButtonTriState = 0 | 1 | 2;
 

diff --git a/web/src/components/Results.vue b/web/src/components/Results.vue
@@ -234,7 +234,7 @@
                   v-for="tag in stream.Tags"
                   v-slot="{ hover }"
                   :key="tag"
-                  ><v-chip small :color="tagColors[tag]"
+                  ><v-chip small :color="tagColors[tag]" :text-color="isDarkColor(tagColors[tag]) ? 'white' : 'black'"
                     ><template v-if="hover"
                       >{{ capitalize(tagify(tag, "type")) }}
                       {{ tagify(tag, "name") }}</template
@@ -301,6 +301,7 @@ import { RouterLink } from "vue-router";
 import { useRoute, useRouter } from "vue-router/composables";
 import { Result } from "@/apiClient";
 import { capitalize, formatDate, formatDateLong, tagify } from "@/filters";
+import { isDarkColor } from "@/lib/colors"
 
 const store = useRootStore();
 const route = useRoute();

diff --git a/web/src/components/Stream.vue b/web/src/components/Stream.vue
@@ -264,6 +264,7 @@
               :key="`tag/${tag.name}`"
               small
               :color="tag.color"
+              :text-color="isDarkColor(tag.color) ? 'white' : 'black'"
               >{{ tag.name }}</v-chip
             ></v-col
           >
@@ -302,6 +303,7 @@
                 :key="`service/${service.name}`"
                 small
                 :color="service.color"
+                :text-color="isDarkColor(service.color) ? 'white' : 'black'"
                 >{{ service.name }}</v-chip
               >
               ({{ stream.stream.Stream.Protocol }})</span
@@ -314,6 +316,7 @@
               :key="`mark/${mark.name}`"
               small
               :color="mark.color"
+              :text-color="isDarkColor(mark.color) ? 'white' : 'black'"
               >{{ mark.name }}</v-chip
             ></v-col
           >
@@ -326,6 +329,7 @@
               :key="`generated/${generated.name}`"
               small
               :color="generated.color"
+              :text-color="isDarkColor(generated.color) ? 'white' : 'black'"
               >{{ generated.name }}</v-chip
             ></v-col
           >
@@ -361,6 +365,7 @@ import {
   destroySelectionListener,
 } from "./streamSelector";
 import { formatDate, formatDateLong, tagify } from "@/filters";
+import { isDarkColor } from "@/lib/colors"
 
 const CYBERCHEF_URL = "https://gchq.github.io/CyberChef/";
 

diff --git a/web/src/components/TagColorChangeDialog.vue b/web/src/components/TagColorChangeDialog.vue
@@ -5,7 +5,7 @@
         <v-card-title>
           <span class="text-h5"
             >Change Color of {{ capitalize(tagType) }}
-            <v-chip :color="tagColor">{{ tagName }}</v-chip></span
+            <v-chip :color="tagColor" :text-color="textColor">{{ tagName }}</v-chip></span
           >
         </v-card-title>
         <v-card-text>
@@ -61,6 +61,7 @@ import { EventBus } from "./EventBus";
 import { ref, computed, watch } from "vue";
 import { useRootStore } from "@/stores";
 import { capitalize } from "@/filters";
+import { isDarkColor } from "@/lib/colors"
 
 const store = useRootStore();
 const visible = ref(false);
@@ -121,4 +122,6 @@ function updateColor() {
       EventBus.emit("showError", err);
     });
 }
+
+const textColor = computed(() => { return isDarkColor(tagColor.value) ? 'white' : 'black'; });
 </script>
diff --git a/web/src/components/TagDefinitionChangeDialog.vue b/web/src/components/TagDefinitionChangeDialog.vue
@@ -5,7 +5,7 @@
         <v-card-title>
           <span class="text-h5"
             >Change Definition of {{ capitalize(tagType) }}
-            <v-chip :color="tagColor">{{ tagName }}</v-chip></span
+            <v-chip :color="tagColor" :text-color="isDarkColor(tagColor) ? 'white' : 'black'">{{ tagName }}</v-chip></span
           >
         </v-card-title>
         <v-card-text>
@@ -35,6 +35,7 @@ import { EventBus } from "./EventBus";
 import { ref } from "vue";
 import { useRootStore } from "@/stores";
 import { capitalize } from "@/filters";
+import { isDarkColor } from "@/lib/colors"
 
 const store = useRootStore();
 const visible = ref(false);

diff --git a/web/src/components/TagDetailsDialog.vue b/web/src/components/TagDetailsDialog.vue
@@ -22,7 +22,7 @@
           <v-row no-gutters>
             <v-col cols="4" class="text-caption">Color:</v-col>
             <v-col cols="8"
-              ><v-chip small :color="tag.Color">{{ tag.Color }}</v-chip></v-col
+              ><v-chip small :color="tag.Color" :text-color="isDarkColor(tag.Color) ? 'white' : 'black'">{{ tag.Color }}</v-chip></v-col
             >
           </v-row>
           <v-row><v-col></v-col></v-row>
@@ -49,6 +49,7 @@ import { computed, ref } from "vue";
 import { useRootStore } from "@/stores";
 import { EventBus } from "./EventBus";
 import { capitalize } from "@/filters";
+import { isDarkColor } from "@/lib/colors"
 
 const store = useRootStore();
 const visible = ref(false);

diff --git a/web/src/components/TagNameChangeDialog.vue b/web/src/components/TagNameChangeDialog.vue
@@ -5,7 +5,7 @@
         <v-card-title>
           <span class="text-h5"
             >Change Name of {{ capitalize(tagType) }}
-            <v-chip :color="tagColor">{{ tagName }}</v-chip></span
+            <v-chip :color="tagColor" :text-color="isDarkColor(tagColor) ? 'white' : 'black'">{{ tagName }}</v-chip></span
           >
         </v-card-title>
         <v-card-text>
@@ -35,6 +35,7 @@ import { EventBus } from "./EventBus";
 import { ref } from "vue";
 import { useRootStore } from "@/stores";
 import { capitalize } from "@/filters";
+import { isDarkColor } from "@/lib/colors"
 
 const store = useRootStore();
 const visible = ref(false);

diff --git a/web/src/components/Tags.vue b/web/src/components/Tags.vue
@@ -38,7 +38,7 @@
           <tr v-for="tag in groupedTags[tagType.key]" :key="tag.Name">
             <td>
               <v-icon>mdi-circle-small</v-icon
-              ><v-chip :color="tag.Color" small>{{
+              ><v-chip :color="tag.Color" small :text-color="isDarkColor(tag.Color) ? 'white' : 'black'">{{
                 tag.Name.substring(1 + tagType.key.length)
               }}</v-chip>
             </td>
@@ -163,6 +163,7 @@ import { EventBus } from "./EventBus";
 import { useRootStore } from "@/stores";
 import { tagForURI } from "@/filters";
 import ToolBar from "./ToolBar.vue";
+import { isDarkColor } from "@/lib/colors"
 
 const tagTypes = [
   {

diff --git a/web/src/lib/colors.ts b/web/src/lib/colors.ts
@@ -35,3 +35,19 @@ export function randomColor(): string {
       .padStart(2, "0");
   return "#" + toHex(r) + toHex(g) + toHex(b);
 }
+// https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
+export function isDarkColor(bgColor : string) : boolean {
+  const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
+  const r = parseInt(color.substring(0, 2), 16); // hexToR
+  const g = parseInt(color.substring(2, 4), 16); // hexToG
+  const b = parseInt(color.substring(4, 6), 16); // hexToB
+  const uicolors = [r / 255, g / 255, b / 255];
+  const c = uicolors.map((col) => {
+    if (col <= 0.03928) {
+      return col / 12.92;
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4);
+  });
+  const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
+  return L <= 0.179;
+}