From a26fb787f9e9285ea95d66daada995967747d767 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 15 Jul 2025 23:15:09 +0200
Subject: [PATCH] fix(labels): correctly fall back to variable colors when no
 label color is set (#1124)

---
 .../src/components/tasks/partials/EditLabels.vue   |  6 ++++--
 frontend/src/components/tasks/partials/Label.vue   |  5 ++++-
 frontend/src/composables/useLabelStyles.ts         | 14 ++++++++++++++
 frontend/src/models/label.ts                       |  5 +----
 frontend/src/views/labels/ListLabels.vue           |  4 +++-
 5 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/composables/useLabelStyles.ts

diff --git a/frontend/src/components/tasks/partials/EditLabels.vue b/frontend/src/components/tasks/partials/EditLabels.vue
index d4b180286..29a0d5452 100644
--- a/frontend/src/components/tasks/partials/EditLabels.vue
+++ b/frontend/src/components/tasks/partials/EditLabels.vue
@@ -17,7 +17,7 @@
 	>
 		<template #tag="{item: label}">
 			<span
-				:style="{'background': label.hexColor, 'color': label.textColor}"
+				:style="getLabelStyles(label)"
 				class="tag"
 			>
 				<span>{{ label.title }}</span>
@@ -38,7 +38,7 @@
 			</span>
 			<span
 				v-else
-				:style="{'background': option.hexColor, 'color': option.textColor}"
+				:style="getLabelStyles(option)"
 				class="tag search-result"
 			>
 				<span>{{ option.title }}</span>
@@ -61,6 +61,7 @@ import type {ILabel} from '@/modelTypes/ILabel'
 import {useLabelStore} from '@/stores/labels'
 import {useTaskStore} from '@/stores/tasks'
 import {getRandomColorHex} from '@/helpers/color/randomColor'
+import {useLabelStyles} from '@/composables/useLabelStyles'
 
 const props = withDefaults(defineProps<{
 	modelValue: ILabel[] | undefined
@@ -96,6 +97,7 @@ watch(
 
 const taskStore = useTaskStore()
 const labelStore = useLabelStore()
+const {getLabelStyles} = useLabelStyles()
 
 const foundLabels = computed(() => labelStore.filterLabelsByQuery(labels.value, query.value))
 const loading = computed(() => labelTaskService.loading || labelStore.isLoading)
diff --git a/frontend/src/components/tasks/partials/Label.vue b/frontend/src/components/tasks/partials/Label.vue
index ae4ea5e5c..8bfb03720 100644
--- a/frontend/src/components/tasks/partials/Label.vue
+++ b/frontend/src/components/tasks/partials/Label.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import type {ILabel} from '@/modelTypes/ILabel'
+import {useLabelStyles} from '@/composables/useLabelStyles'
 
 defineProps<{
 	label: ILabel
 }>()
+
+const {getLabelStyles} = useLabelStyles()
 </script>
 
 <template>
 	<span
 		:key="label.id"
-		:style="{'background': label.hexColor, 'color': label.textColor}"
+		:style="getLabelStyles(label)"
 		class="tag"
 	>
 		<span>{{ label.title }}</span>
diff --git a/frontend/src/composables/useLabelStyles.ts b/frontend/src/composables/useLabelStyles.ts
new file mode 100644
index 000000000..d312f0ef9
--- /dev/null
+++ b/frontend/src/composables/useLabelStyles.ts
@@ -0,0 +1,14 @@
+import type {ILabel} from '@/modelTypes/ILabel'
+
+export function useLabelStyles() {
+	function getLabelStyles(label: ILabel) {
+		return {
+			'background': label.hexColor || 'var(--grey-200)',
+			'color': label.textColor || 'var(--grey-800)',
+		}
+	}
+
+	return {
+		getLabelStyles,
+	}
+}
\ No newline at end of file
diff --git a/frontend/src/models/label.ts b/frontend/src/models/label.ts
index d57750398..116b2f989 100644
--- a/frontend/src/models/label.ts
+++ b/frontend/src/models/label.ts
@@ -28,10 +28,7 @@ export default class LabelModel extends AbstractModel<ILabel> implements ILabel
 			this.hexColor = '#' + this.hexColor
 		}
 
-		if (this.hexColor === '') {
-			this.hexColor = 'var(--grey-200)'
-			this.textColor = 'var(--grey-800)'
-		} else {
+		if (this.hexColor !== '') {
 			this.textColor = colorIsDark(this.hexColor)
 				// Fixed colors to avoid flipping in dark mode
 				? 'hsl(215, 27.9%, 16.9%)' // grey-800
diff --git a/frontend/src/views/labels/ListLabels.vue b/frontend/src/views/labels/ListLabels.vue
index 3952ab0ee..9a5cdbb63 100644
--- a/frontend/src/views/labels/ListLabels.vue
+++ b/frontend/src/views/labels/ListLabels.vue
@@ -33,7 +33,7 @@
 					v-for="label in labelStore.labelsArray"
 					:key="label.id"
 					:class="{'disabled': userInfo.id !== label.createdBy.id}"
-					:style="{'background': label.hexColor, 'color': label.textColor}"
+					:style="getLabelStyles(label)"
 					class="tag"
 				>
 					<span
@@ -149,6 +149,7 @@ import {useAuthStore} from '@/stores/auth'
 import {useLabelStore} from '@/stores/labels'
 
 import { useTitle } from '@/composables/useTitle'
+import {useLabelStyles} from '@/composables/useLabelStyles'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -167,6 +168,7 @@ const labelStore = useLabelStore()
 labelStore.loadAllLabels()
 
 const loading = computed(() => labelStore.isLoading)
+const {getLabelStyles} = useLabelStyles()
 
 function deleteLabel(label?: ILabel) {
 	if (!label) {