From 508984ecfa736ae78b8e1c78f10513a102af91c3 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Tue, 10 Mar 2026 14:21:48 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20add=20caption=20?=
 =?UTF-8?q?font=20color=20and=20background=20to=20access=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Persist captionFontColor and captionBackgroundColor in user preferences.
---
 src/frontend/src/stores/accessibility.ts | 92 +++++++++++++++++++++++-
 1 file changed, 90 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/stores/accessibility.ts b/src/frontend/src/stores/accessibility.ts
index 52db263e..d2f4640a 100644
--- a/src/frontend/src/stores/accessibility.ts
+++ b/src/frontend/src/stores/accessibility.ts
@@ -10,14 +10,88 @@ export const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [
   'large',
 ]
 
+export type CaptionFontColor =
+  | 'white'
+  | 'yellow'
+  | 'green'
+  | 'cyan'
+  | 'blue'
+  | 'magenta'
+  | 'red'
+  | 'black'
+
+export const CAPTION_FONT_COLOR_OPTIONS: CaptionFontColor[] = [
+  'white',
+  'yellow',
+  'green',
+  'cyan',
+  'blue',
+  'magenta',
+  'red',
+  'black',
+]
+
+export const CAPTION_FONT_COLOR_VALUES: Record<CaptionFontColor, string> = {
+  white: '#FFFFFF',
+  yellow: '#FFFF00',
+  green: '#00FF00',
+  cyan: '#00FFFF',
+  blue: '#0000FF',
+  magenta: '#FF00FF',
+  red: '#FF0000',
+  black: '#000000',
+}
+
+export type CaptionBackgroundColor =
+  | 'black'
+  | 'white'
+  | 'red'
+  | 'green'
+  | 'blue'
+  | 'yellow'
+  | 'cyan'
+  | 'magenta'
+  | 'transparent'
+
+export const CAPTION_BACKGROUND_COLOR_OPTIONS: CaptionBackgroundColor[] = [
+  'black',
+  'white',
+  'red',
+  'green',
+  'blue',
+  'yellow',
+  'cyan',
+  'magenta',
+  'transparent',
+]
+
+export const CAPTION_BACKGROUND_COLOR_VALUES: Record<
+  CaptionBackgroundColor,
+  string
+> = {
+  black: 'rgba(0, 0, 0, 0.75)',
+  white: 'rgba(255, 255, 255, 0.75)',
+  red: 'rgba(255, 0, 0, 0.75)',
+  green: 'rgba(0, 255, 0, 0.75)',
+  blue: 'rgba(0, 0, 255, 0.75)',
+  yellow: 'rgba(255, 255, 0, 0.75)',
+  cyan: 'rgba(0, 255, 255, 0.75)',
+  magenta: 'rgba(255, 0, 255, 0.75)',
+  transparent: 'transparent',
+}
+
 type AccessibilityState = {
   announceReactions: boolean
   captionTextSize: CaptionTextSize
+  captionFontColor: CaptionFontColor
+  captionBackgroundColor: CaptionBackgroundColor
 }
 
 const DEFAULT_STATE: AccessibilityState = {
   announceReactions: false,
   captionTextSize: 'medium',
+  captionFontColor: 'white',
+  captionBackgroundColor: 'black',
 }
 
 function getAccessibilityState(): AccessibilityState {
@@ -25,10 +99,22 @@ function getAccessibilityState(): AccessibilityState {
     const stored = localStorage.getItem(STORAGE_KEYS.ACCESSIBILITY)
     if (stored) {
       const parsed = JSON.parse(stored)
-      const validCaptionSizes = CAPTION_TEXT_SIZE_OPTIONS
-      const captionTextSize = validCaptionSizes.includes(parsed.captionTextSize)
+      const captionTextSize = CAPTION_TEXT_SIZE_OPTIONS.includes(
+        parsed.captionTextSize
+      )
         ? parsed.captionTextSize
         : DEFAULT_STATE.captionTextSize
+      const captionFontColor = CAPTION_FONT_COLOR_OPTIONS.includes(
+        parsed.captionFontColor
+      )
+        ? parsed.captionFontColor
+        : DEFAULT_STATE.captionFontColor
+      const captionBackgroundColor =
+        CAPTION_BACKGROUND_COLOR_OPTIONS.includes(
+          parsed.captionBackgroundColor
+        )
+          ? parsed.captionBackgroundColor
+          : DEFAULT_STATE.captionBackgroundColor
       return {
         ...DEFAULT_STATE,
         ...parsed,
@@ -37,6 +123,8 @@ function getAccessibilityState(): AccessibilityState {
             ? parsed.announceReactions
             : DEFAULT_STATE.announceReactions,
         captionTextSize,
+        captionFontColor,
+        captionBackgroundColor,
       }
     }