From d7634bd3313aa48235135219d5f50d02445c512f Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Tue, 10 Mar 2026 14:34:12 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(refactor)=20apply=20caption?=
 =?UTF-8?q?=20color=20customization=20to=20subtitles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use captionFontColor and captionBackgroundColor in Transcription component.
---
 .../src/features/subtitle/component/Subtitles.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/subtitle/component/Subtitles.tsx b/src/frontend/src/features/subtitle/component/Subtitles.tsx
index bbc76a60..f434d98d 100644
--- a/src/frontend/src/features/subtitle/component/Subtitles.tsx
+++ b/src/frontend/src/features/subtitle/component/Subtitles.tsx
@@ -12,6 +12,8 @@ import { useSnapshot } from 'valtio'
 import {
   accessibilityStore,
   CAPTION_TEXT_SIZE_OPTIONS,
+  CAPTION_FONT_COLOR_VALUES,
+  CAPTION_BACKGROUND_COLOR_VALUES,
   type CaptionTextSize,
 } from '@/stores/accessibility'
 
@@ -92,10 +94,14 @@ const useTranscriptionState = () => {
 }
 
 const Transcription = ({ row }: { row: TranscriptionRow }) => {
-  const { captionTextSize } = useSnapshot(accessibilityStore)
+  const { captionTextSize, captionFontColor, captionBackgroundColor } =
+    useSnapshot(accessibilityStore)
   const participantColor = getParticipantColor(row.participant)
   const participantName = getParticipantName(row.participant)
   const { fontSize, lineHeight } = CAPTION_FONT_SIZES[captionTextSize]
+  const fontColor = CAPTION_FONT_COLOR_VALUES[captionFontColor]
+  const backgroundColor =
+    CAPTION_BACKGROUND_COLOR_VALUES[captionBackgroundColor]
 
   const getDisplayText = (row: TranscriptionRow): string => {
     return row.segments
@@ -128,9 +134,9 @@ const Transcription = ({ row }: { row: TranscriptionRow }) => {
         />
         <div
           className={css({
-            color: 'white',
             width: '100%',
           })}
+          style={{ color: fontColor }}
         >
           <Text variant="h3" margin={false}>
             {participantName}
@@ -138,8 +144,10 @@ const Transcription = ({ row }: { row: TranscriptionRow }) => {
           <p
             className={css({
               fontWeight: '400',
+              borderRadius: '4px',
+              padding: '0.125rem 0.25rem',
             })}
-            style={{ fontSize, lineHeight }}
+            style={{ fontSize, lineHeight, backgroundColor }}
           >
             {displayText}
           </p>