Repeater custom light header colors force white text and controls

[matjazpotocnik]

When a Repeater item label specifies a custom light background color, InputfieldRepeater always forces the item header foreground color to white.

For example, this Repeater item label format:

{title} #f5f5f5

produces a light gray header with white label text, drag icon, toggle, trash icon, and other controls. The content is nearly invisible in both light and dark admin modes. This affects any sufficiently light custom Repeater header color, not only #f5f5f5.

Actual behavior
The background is correctly rendered as #f5f5f5, but the generated style in wire/modules/Fieldtype/FieldtypeRepeater/InputfieldRepeater.module forces the foreground to white:

color: #fff;
--pw-text-color: #fff;

The same hardcoded foreground is also applied to .ui-priority-secondary.

Expected behavior
The generated foreground color should contrast with the custom background in light and dark mode.

Suggested fix
Calculate a foreground color from the parsed custom background before generating the CSS. For example:

$backgroundColor = $matches[1];

if(strlen($backgroundColor) === 3) {
    $backgroundColor =
        $backgroundColor[0] . $backgroundColor[0] .
        $backgroundColor[1] . $backgroundColor[1] .
        $backgroundColor[2] . $backgroundColor[2];
}

$brightness = (
    hexdec(substr($backgroundColor, 0, 2)) * 299 +
    hexdec(substr($backgroundColor, 2, 2)) * 587 +
    hexdec(substr($backgroundColor, 4, 2)) * 114
) / 1000;

$textColor = $brightness > 186 ? '#111' : '#fff';

Then use $textColor instead of the hardcoded #fff in both generated selectors.

As of August 2026, contrast-color() is supported by current Chrome 147+, Edge 147+, Firefox 146+, and Safari 26+.

$customColor = "#$matches[1]";
$textColor = $brightness > 186 ? '#111' : '#fff';
$contrastColor = "contrast-color($customColor)";

...

"color: $textColor; " .
"color: $contrastColor; " .
"--pw-text-color: $textColor; " .
"--pw-text-color: $contrastColor; " .

GPT 5.6 Sol