From 10fdaf7d005dd7e1cd69c36f88129d563292b9e8 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 7 Apr 2026 11:58:04 +0200
Subject: [PATCH] refactor(ui): use CSS variable for turquoise in flash
 animations

Replaces hardcoded rgba(0,199,177,...) with color-mix using
var(--color-turquoise) for dark mode compatibility.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/AnnotationLayer.svelte       | 6 +++---
 frontend/src/lib/components/TranscriptionReadView.svelte | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/AnnotationLayer.svelte b/frontend/src/lib/components/AnnotationLayer.svelte
index dcaddf15..ec1c29c0 100644
--- a/frontend/src/lib/components/AnnotationLayer.svelte
+++ b/frontend/src/lib/components/AnnotationLayer.svelte
@@ -182,11 +182,11 @@ const containerStyle = $derived(
 <style>
 @keyframes annotation-flash-anim {
 	0% {
-		outline: 3px solid rgba(0, 199, 177, 0.8);
+		outline: 3px solid color-mix(in srgb, var(--color-turquoise) 80%, transparent);
 		outline-offset: 0px;
 	}
 	100% {
-		outline: 3px solid rgba(0, 199, 177, 0);
+		outline: 3px solid color-mix(in srgb, var(--color-turquoise) 0%, transparent);
 		outline-offset: 2px;
 	}
 }
@@ -198,7 +198,7 @@ const containerStyle = $derived(
 @media (prefers-reduced-motion: reduce) {
 	.annotation-flash {
 		animation: none;
-		outline: 3px solid rgba(0, 199, 177, 0.8);
+		outline: 3px solid color-mix(in srgb, var(--color-turquoise) 80%, transparent);
 	}
 }
 </style>
diff --git a/frontend/src/lib/components/TranscriptionReadView.svelte b/frontend/src/lib/components/TranscriptionReadView.svelte
index 65929a24..f1586e6c 100644
--- a/frontend/src/lib/components/TranscriptionReadView.svelte
+++ b/frontend/src/lib/components/TranscriptionReadView.svelte
@@ -38,7 +38,7 @@ let sorted = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
 <style>
 @keyframes flash {
 	0% {
-		background-color: rgba(0, 199, 177, 0.18);
+		background-color: color-mix(in srgb, var(--color-turquoise) 18%, transparent);
 	}
 	100% {
 		background-color: transparent;
@@ -52,7 +52,7 @@ let sorted = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
 @media (prefers-reduced-motion: reduce) {
 	.flash-highlight {
 		animation: none;
-		background-color: rgba(0, 199, 177, 0.18);
+		background-color: color-mix(in srgb, var(--color-turquoise) 18%, transparent);
 	}
 }
 </style>