From 1baa8621c4816573a28db3c71f725fc28f168ddf Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 10 Nov 2026 11:44:32 +0100
Subject: [PATCH] fix(cards): keep card color on clone and use contrasting text
 color

Pass the card color through when duplicating a card so the copy keeps it.

On cards with a custom background color, pick black or white text based
on the background's lightness, as is already done for tags, and apply it
to muted text and badges on the card as well.

Signed-off-by: Jonas <jonas@freesources.org>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 lib/Service/CardService.php            |  2 +-
 src/components/cards/CardItem.vue      | 15 ++++++++++++++-
 tests/unit/Service/CardServiceTest.php |  8 +++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/lib/Service/CardService.php b/lib/Service/CardService.php
index 695a249d68..95ae21e8ea 100644
--- a/lib/Service/CardService.php
+++ b/lib/Service/CardService.php
@@ -372,7 +372,7 @@ public function cloneCard(int $id, ?int $targetStackId = null):Card {
 			$targetStackId = $originCard->getStackId();
 		}
 		$this->permissionService->checkPermission($this->stackMapper, $targetStackId, Acl::PERMISSION_EDIT);
-		$newCard = $this->create($originCard->getTitle(), $targetStackId, $originCard->getType(), $originCard->getOrder(), $originCard->getOwner());
+		$newCard = $this->create($originCard->getTitle(), $targetStackId, $originCard->getType(), $originCard->getOrder(), $originCard->getOwner(), color: $originCard->getColor());
 		$boardId = $this->stackMapper->findBoardId($targetStackId);
 		foreach ($this->labelMapper->findAssignedLabelsForCard($id) as $label) {
 			if ($boardId !== $this->stackMapper->findBoardId($originCard->getStackId())) {
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index e23c5e9f9a..34925f7575 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -7,7 +7,7 @@
 	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
 		<div :ref="`card${card.id}`"
 			:class="{'compact': compactMode, 'current-card': isCurrentCard, 'no-labels': !hasLabels, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
-			:style="{backgroundColor: color}"
+			:style="cardStyle"
 			tag="div"
 			:tabindex="0"
 			class="card"
@@ -203,6 +203,19 @@ export default {
 		color() {
 			return this.card.color ? '#' + this.card.color : null
 		},
+
+		cardStyle() {
+			if (!this.card.color) {
+				return {}
+			}
+			const textColor = this.textColor(this.card.color)
+			return {
+				backgroundColor: this.color,
+				color: textColor,
+				'--color-main-text': textColor,
+				'--color-text-maxcontrast': textColor,
+			}
+		},
 	},
 	watch: {
 		'$route.params.cardId': {
diff --git a/tests/unit/Service/CardServiceTest.php b/tests/unit/Service/CardServiceTest.php
index 5666718bb0..c3fcbd12a9 100644
--- a/tests/unit/Service/CardServiceTest.php
+++ b/tests/unit/Service/CardServiceTest.php
@@ -326,14 +326,19 @@ public function testClone() {
 		$card->setOwner('admin');
 		$card->setStackId(12345);
 		$card->setDescription('A test description');
+		$card->setColor('FF0000');
 
 		$clonedCard = clone $card;
 		$clonedCard->setId(2);
 		$clonedCard->setStackId(1234);
 
+		$inserted = [];
 		$this->cardMapper->expects($this->exactly(2))
 			->method('insert')
-			->willReturn($card, $clonedCard);
+			->willReturnCallback(function (Card $entity) use (&$inserted, $card, $clonedCard) {
+				$inserted[] = $entity;
+				return count($inserted) === 1 ? $card : $clonedCard;
+			});
 
 		$this->cardMapper->expects($this->once())
 			->method('update')->willReturn($clonedCard);
@@ -403,6 +408,7 @@ public function testClone() {
 		$this->assertNotEquals($b->getStackId(), $c->getStackId());
 
 		$this->assertEquals('A test description', $c->getDescription());
+		$this->assertEquals('FF0000', $inserted[1]->getColor());
 
 		$this->assertCount(1, $c->getLabels());
 		$this->assertEquals($label->getId(), $c->getLabels()[0]->getId());