feat(ui): extend ROYGBIV accent color to all button/chip focus states by EierKopZA · Pull Request #227 · ProdigyV21/ARVIO

EierKopZA · 2026-05-18T14:20:44Z

Title: Extend ROYGBIV Accent Color to Button Focus States & Rename Setting

Summary

Extends the user-configurable ROYGBIV accent colour (from Settings → Appearance → Accent Color) beyond focus border highlights to include full button/chip focus backgrounds and selected text/icon colours. Also renames the setting from "Focus Border Color" → "Accent Color" to reflect its expanded role.

Changes

ROYGBIV Accent Extension (6 Composables)

Composable	File	Behaviour
ActionButton (Details page)	`DetailsScreen.kt:3120`	Full accent background fill on D-pad focus; text/icon turns white
CatalogActionChip (Settings page)	`SettingsScreen.kt:6880`	Full accent background fill on focus; icon turns white; border → accent
GroupRailItem (TV page)	`TvScreen.kt:1500`	Full accent background fill on focus; border → accent
TopBarNavChip (Top app bar)	`AppTopBar.kt:196`	Selected item text/icon → accent colour; focused (hovering) stays white
TopBarSettingsGear (Top app bar)	`AppTopBar.kt:275`	Selected gear icon → accent colour
SidebarIcon (Sidebar)	`Sidebar.kt:215`	Selected sidebar icon → accent colour

Design decisions:

TopBar/Sidebar: Only isSelected text/icon gets the accent colour; isFocused remains white. Background chips/rings are unchanged (keeps the subtle transparent ring).
All other buttons: Full accent fill on focus with white text/icon for strong, clear D-pad visual feedback.
Backward compatible — defaults to white when no accent colour is configured.

Rename: "Focus Border Color" → "Accent Color"

Since the colour now affects borders, backgrounds, and text, the old name was misleading.

Old	New	Files Affected
`LocalFocusBorderColorOverride`	`LocalAccentColorOverride`	`ArvioSkin.kt`, `ArvioFocus.kt`, `PlayerScreen.kt`
`resolveFocusBorderColor()`	`resolveAccentColor()`	All 10 consumer files
`focusBorderColorFromName()`	`accentColorFromName()`	`ArvioSkin.kt`, `Theme.kt`
`FOCUS_BORDER_COLOR_KEY`	`ACCENT_COLOR_KEY`	`DeviceType.kt`, `MainActivity.kt`, `SettingsViewModel.kt`
`"focus_border_color"` (DataStore)	`"accent_color"`	`DeviceType.kt`
`R.string.focus_border_color`	`R.string.accent_color`	`strings.xml`, `SettingsScreen.kt`
`"Focus Border Color"` (label)	`"Accent Color"`	`strings.xml`
`"Choose the D-pad focus ring color"`	`"Choose the accent color for focus rings, buttons, and selected items"`	`strings.xml`
`SettingsUiState.focusBorderColor`	`SettingsUiState.accentColor`	`SettingsViewModel.kt`
`cycleFocusBorderColor()`	`cycleAccentColor()`	`SettingsViewModel.kt`, `SettingsScreen.kt`

Files Changed (15)

File	Status
`app/src/main/res/values/strings.xml`	Modified
`app/src/main/kotlin/com/arflix/tv/util/DeviceType.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/skin/ArvioSkin.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/skin/ArvioFocus.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/theme/Theme.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/MainActivity.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/screens/settings/SettingsViewModel.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/screens/settings/SettingsScreen.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/components/AppTopBar.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/components/Sidebar.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/screens/details/DetailsScreen.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/screens/tv/TvScreen.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/screens/search/SearchScreen.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/components/PersonModal.kt`	Modified
`app/src/main/kotlin/com/arflix/tv/ui/screens/player/PlayerScreen.kt`	Modified

Testing Notes

Verify D-pad focus navigation still flows correctly on all affected composables
Cycle through all 7 accent colours (White → Red → Orange → Yellow → Green → Blue → Indigo → Violet) and confirm each renders correctly on:
- Focus rings (existing behaviour — unchanged)
- ActionButton background fill (new)
- CatalogActionChip background fill (new)
- GroupRailItem background fill (new)
- TopBar selected text/icon (new)
- Sidebar selected icon (new)
Check that existing DataStore key "focus_border_color" migrates cleanly — users who previously set a colour will need to re-select it under the new "accent_color" key

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Renames the "Focus Border Color" setting to "Accent Color" and broadens its application from just D-pad focus rings to also include buttons and selected items (e.g., sidebar, top bar, action buttons, group rail items).

Changes:

Rename FOCUS_BORDER_COLOR_KEY/focusBorderColor* symbols, strings, and APIs to ACCENT_COLOR_KEY/accentColor*.
Apply the accent color to additional UI surfaces (sidebar selected icon, top bar nav/settings icons, premium action buttons, catalog action chips, group rail item background).
Update settings UI and view model to expose the renamed accent color setting.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 25 comments.

Show a summary per file

File	Description
app/src/main/res/values/strings.xml	Rename strings to accent color.
app/src/main/kotlin/com/arflix/tv/util/DeviceType.kt	Rename preferences key.
app/src/main/kotlin/com/arflix/tv/ui/theme/Theme.kt	Rename theme parameter and composition local.
app/src/main/kotlin/com/arflix/tv/ui/skin/ArvioSkin.kt	Rename override local, resolver, and color name mapper.
app/src/main/kotlin/com/arflix/tv/ui/skin/ArvioFocus.kt	Use renamed accent override.
app/src/main/kotlin/com/arflix/tv/ui/screens/tv/TvScreen.kt	Apply accent to focused group rail item background.
app/src/main/kotlin/com/arflix/tv/ui/screens/settings/SettingsViewModel.kt	Rename state and persistence; non-ASCII content corrupted.
app/src/main/kotlin/com/arflix/tv/ui/screens/settings/SettingsScreen.kt	Wire UI to renamed APIs; non-ASCII content corrupted.
app/src/main/kotlin/com/arflix/tv/ui/screens/search/SearchScreen.kt	Use renamed accent resolver; non-ASCII corrupted.
app/src/main/kotlin/com/arflix/tv/ui/screens/player/PlayerScreen.kt	Use renamed override local; non-ASCII corrupted.
app/src/main/kotlin/com/arflix/tv/ui/screens/details/DetailsScreen.kt	Apply accent to PremiumActionButton; non-ASCII corrupted.
app/src/main/kotlin/com/arflix/tv/ui/components/Sidebar.kt	Apply accent to selected sidebar icon.
app/src/main/kotlin/com/arflix/tv/ui/components/PersonModal.kt	Use renamed accent resolver.
app/src/main/kotlin/com/arflix/tv/ui/components/AppTopBar.kt	Apply accent to selected top bar items; non-ASCII corrupted.
app/src/main/kotlin/com/arflix/tv/MainActivity.kt	Read renamed pref and pass to theme.

Comments suppressed due to low confidence (1)

app/src/main/kotlin/com/arflix/tv/ui/screens/details/DetailsScreen.kt:1

Mojibake in episodeCode (and MobileMetadataSeparator looks intact in the diff but the file has BOM/other corruptions). The episode code rendered to the user will read S1 â€¢ E01. Restore the bullet character.

package com.arflix.tv.ui.screens.details

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

                _uiState.value = _uiState.value.copy(
                    isForceCloudSyncing = false,
-                    toastMessage = "Cloud sync upload timed out — try again",
+                    toastMessage = "Cloud sync upload timed out â€” try again",


+                com.arflix.tv.ui.screens.player.SubtitleAiModel.GROQ_LLAMA_70B -> "Groq â€“ Llama 3.3 70B"
+                com.arflix.tv.ui.screens.player.SubtitleAiModel.GEMINI_FLASH_25 -> "Google â€“ Gemini 2.5 Flash"


+        trimmed.startsWith("gsk_") -> "Groq Â· "
+        trimmed.startsWith("AIzaSy") -> "Gemini Â· "
        else -> ""
    }
-    val masked = if (trimmed.length <= 4) "••••" else "••••${trimmed.takeLast(4)}"
+    val masked = if (trimmed.length <= 4) "â€¢â€¢â€¢â€¢" else "â€¢â€¢â€¢â€¢${trimmed.takeLast(4)}"


            Spacer(modifier = Modifier.height(16.dp))
            Text(
-                text = "Press Enter to select • Navigate with D-pad",
+                text = "Press Enter to select â€¢ Navigate with D-pad",


+    <string name="accent_color">Accent Color</string>
+    <string name="accent_color_desc">Choose the accent color for focus rings, buttons, and selected items</string>


+/** Key for the user-selected accent colour (e.g. "White", "Red", "Blue") */
+val ACCENT_COLOR_KEY = stringPreferencesKey("accent_color")


@@ -1056,16 +1056,16 @@ class SettingsViewModel @Inject constructor(

    /**
     * Cycle the focus border color through the rainbow palette.


        else -> TextSecondary
    }
-    val accentColor = resolveFocusBorderColor(fallback = Pink)
+    val accentColor = resolveAccentColor(fallback = Pink)


    }

-    // ── AI Subtitles ──────────────────────────────────────────────────────────
+    // â”€â”€ AI Subtitles â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…import, add DataStore key migration

ProdigyV21 · 2026-05-19T08:46:01Z

Good feature direction, but I would not merge this yet.

It merges cleanly and compile passes, but there are a few UI issues to fix first:

Some changed files now have broken ??? text in user-visible places. For example episode labels / subtitle separators / AI model names can show as S1 ??? E01 or Groq ??? Llama. Please restore the original characters and make sure the files are saved as proper UTF-8.
The default accent color is White, but some focused buttons/chips now use accent as the background and white as the text/icon color. That makes white-on-white UI in places like Details action buttons and Settings catalog action chips. Please make the content color contrast-aware, e.g. dark text/icons for light accent colors.
TV group rows now get a full solid accent background on focus. This can be too strong with the white/default accent. A translucent accent fill would be safer.

After those are fixed, I think this can be a nice polish feature.

…ntrast, TV group rows

…ActionChip

EierKopZA · 2026-05-19T10:17:57Z

@ProdigyV21 do you mind checking this now?

ProdigyV21 · 2026-05-20T09:02:58Z

I verified against latest main:

:app:compilePlayDebugKotlin passes
:app:compileSideloadDebugKotlin passes
git diff --check passes

A few things still need cleanup before merge:

Please remove mr_payload_roygbiv_accent_colors.md from the repo root. That looks like PR metadata/description text, not project source.
There is still encoding/mojibake in the changed files/comments, for example â†’, â€“, and a BOM at the start of SettingsScreen.kt. Please resave the touched files as proper UTF-8 and clean those.
Top bar/sidebar focus precedence still looks wrong. isSelected is checked before isFocused, so a selected item that also has D-pad focus may not get the strong focused state. Please make focus win, e.g. focused = white, selected-only = accent.
Small naming cleanup: onaccentColorClick should be onAccentColorClick, and the settings fact label should say Accent color instead of Focus border.

EierKopZA · 2026-05-20T09:16:50Z

Done @ProdigyV21

EierKopZA · 2026-05-20T14:52:03Z

…rrent-main

feat(ui): extend ROYGBIV accent color to all button/chip focus states

188b099

Copilot AI review requested due to automatic review settings May 18, 2026 14:20

Copilot AI reviewed May 18, 2026

View reviewed changes

EierKopZA and others added 2 commits May 18, 2026 16:34

Potential fix for pull request finding

760a032

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix: resolve PR review comments - fix mojibake encoding, add missing …

4c62723

…import, add DataStore key migration

eierkop80-stack added 2 commits May 19, 2026 12:06

fix: resolve PR review comments - fix BOM/mojibake, white-on-white co…

7c0737c

…ntrast, TV group rows

fix: apply accent-background + luminance-contrast to Settings Catalog…

879db2f

…ActionChip

fix: address PR review feedback

95060ee

Arvin added 2 commits May 27, 2026 11:08

Merge remote-tracking branch 'origin/main' into codex/pr227-accent-cu…

f016146

…rrent-main

Fix accent color merge with current main

9edfcd7

ProdigyV21 merged commit 1db4690 into ProdigyV21:main May 27, 2026
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): extend ROYGBIV accent color to all button/chip focus states#227

feat(ui): extend ROYGBIV accent color to all button/chip focus states#227
ProdigyV21 merged 8 commits into
ProdigyV21:mainfrom
EierKopZA:feature/roygbiv-accent-colors

EierKopZA commented May 18, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

ProdigyV21 commented May 19, 2026

Uh oh!

EierKopZA commented May 19, 2026

Uh oh!

ProdigyV21 commented May 20, 2026

Uh oh!

EierKopZA commented May 20, 2026

Uh oh!

EierKopZA commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		com.arflix.tv.ui.screens.player.SubtitleAiModel.GROQ_LLAMA_70B -> "Groq â€“ Llama 3.3 70B"
		com.arflix.tv.ui.screens.player.SubtitleAiModel.GEMINI_FLASH_25 -> "Google â€“ Gemini 2.5 Flash"

		<string name="accent_color">Accent Color</string>
		<string name="accent_color_desc">Choose the accent color for focus rings, buttons, and selected items</string>

		/** Key for the user-selected accent colour (e.g. "White", "Red", "Blue") */
		val ACCENT_COLOR_KEY = stringPreferencesKey("accent_color")

		@@ -1056,16 +1056,16 @@ class SettingsViewModel @Inject constructor(

		/**
		* Cycle the focus border color through the rainbow palette.

Conversation

EierKopZA commented May 18, 2026

Title: Extend ROYGBIV Accent Color to Button Focus States & Rename Setting

Summary

Changes

ROYGBIV Accent Extension (6 Composables)

Rename: "Focus Border Color" → "Accent Color"

Files Changed (15)

Testing Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

ProdigyV21 commented May 19, 2026

Uh oh!

EierKopZA commented May 19, 2026

Uh oh!

ProdigyV21 commented May 20, 2026

Uh oh!

EierKopZA commented May 20, 2026

Uh oh!

EierKopZA commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants