From 82769128a103bcda979d8b693fd38bed73e093f8 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Tue, 10 Mar 2026 14:33:13 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(feat)=20add=20caption=20font=20color?=
 =?UTF-8?q?=20and=20background=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Select font color and background color in Accessibility > Captions.
---
 .../subtitle/component/CaptionsSettings.tsx   | 71 ++++++++++++++++---
 1 file changed, 61 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx b/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx
index 9f7ddefa..d0573dbe 100644
--- a/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx
+++ b/src/frontend/src/features/subtitle/component/CaptionsSettings.tsx
@@ -6,7 +6,11 @@ import { useSnapshot } from 'valtio'
 import {
   accessibilityStore,
   type CaptionTextSize,
+  type CaptionFontColor,
+  type CaptionBackgroundColor,
   CAPTION_TEXT_SIZE_OPTIONS,
+  CAPTION_FONT_COLOR_OPTIONS,
+  CAPTION_BACKGROUND_COLOR_OPTIONS,
 } from '@/stores/accessibility'
 
 export const CaptionsSettings = () => {
@@ -24,6 +28,24 @@ export const CaptionsSettings = () => {
     [t]
   )
 
+  const captionFontColorItems = useMemo(
+    () =>
+      CAPTION_FONT_COLOR_OPTIONS.map((color) => ({
+        value: color,
+        label: t(`fontColor.options.${color}`),
+      })),
+    [t]
+  )
+
+  const captionBackgroundColorItems = useMemo(
+    () =>
+      CAPTION_BACKGROUND_COLOR_OPTIONS.map((color) => ({
+        value: color,
+        label: t(`backgroundColor.options.${color}`),
+      })),
+    [t]
+  )
+
   return (
     <li>
       <H
@@ -34,16 +56,45 @@ export const CaptionsSettings = () => {
       >
         {t('heading')}
       </H>
-      <Field
-        type="select"
-        label={t('textSize.label')}
-        items={captionTextSizeItems}
-        selectedKey={snap.captionTextSize}
-        onSelectionChange={(key) => {
-          accessibilityStore.captionTextSize = key as CaptionTextSize
-        }}
-        wrapperProps={{ noMargin: true, fullWidth: true }}
-      />
+      <div
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.75rem',
+        })}
+      >
+        <Field
+          type="select"
+          label={t('textSize.label')}
+          items={captionTextSizeItems}
+          selectedKey={snap.captionTextSize}
+          onSelectionChange={(key) => {
+            accessibilityStore.captionTextSize = key as CaptionTextSize
+          }}
+          wrapperProps={{ noMargin: true, fullWidth: true }}
+        />
+        <Field
+          type="select"
+          label={t('fontColor.label')}
+          items={captionFontColorItems}
+          selectedKey={snap.captionFontColor}
+          onSelectionChange={(key) => {
+            accessibilityStore.captionFontColor = key as CaptionFontColor
+          }}
+          wrapperProps={{ noMargin: true, fullWidth: true }}
+        />
+        <Field
+          type="select"
+          label={t('backgroundColor.label')}
+          items={captionBackgroundColorItems}
+          selectedKey={snap.captionBackgroundColor}
+          onSelectionChange={(key) => {
+            accessibilityStore.captionBackgroundColor =
+              key as CaptionBackgroundColor
+          }}
+          wrapperProps={{ noMargin: true, fullWidth: true }}
+        />
+      </div>
     </li>
   )
 }