From 0bb0d5eb384fa09f3710568431f2d02f93575976 Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Wed, 7 Oct 2026 22:02:49 +0200
Subject: [PATCH] change font color based on tag contrast

---
 app/components/Utils/Label/TagLabel.vue |  5 +++-
 app/utils/color.ts                      | 31 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/app/components/Utils/Label/TagLabel.vue b/app/components/Utils/Label/TagLabel.vue
index 55d07b2..38402e9 100644
--- a/app/components/Utils/Label/TagLabel.vue
+++ b/app/components/Utils/Label/TagLabel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+	import { getContrastColor } from "~/utils/color";
 	import type { Label } from "~/utils/types";
 
 	const props = defineProps<{
@@ -14,7 +15,9 @@
 	});
 
 	const fontColor = computed(() => {
-		return props.isSelected ? "white" : props.label.color;
+		return props.isSelected
+			? getContrastColor(props.label.color)
+			: props.label.color;
 	});
 </script>
 <template>
diff --git a/app/utils/color.ts b/app/utils/color.ts
index ce0cc01..5ebd34d 100644
--- a/app/utils/color.ts
+++ b/app/utils/color.ts
@@ -24,3 +24,34 @@ export function randomPleasantHex(): string {
 
 	return `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
 }
+
+function hexToRgb(color: string): [number, number, number] | null {
+	if (!color) return null;
+
+	const hexMatch = color.match(/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i);
+	if (hexMatch?.[1]) {
+		let hex = hexMatch[1];
+		if (hex.length === 3) {
+			hex = hex
+				.split("")
+				.map((c) => c + c)
+				.join("");
+		}
+		const num = Number.parseInt(hex, 16);
+		return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
+	}
+
+	return null;
+}
+
+function isLightColor(color: string): boolean {
+	const rgb = hexToRgb(color);
+	if (!rgb) return false;
+
+	const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+	return brightness >= 175;
+}
+
+export function getContrastColor(color: string): "#222" | "#eee" {
+	return isLightColor(color) ? "#222" : "#eee";
+}
-- 
2.51.2