Skip to content

fix: Android list separators use the theme's outline-variant colour - #122

Open
SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/android-outline-variant
Open

SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/android-outline-variant

Conversation

@SRWieZ

@SRWieZ SRWieZ commented Oct 3, 2026

Copy link
Copy Markdown
Member

On Android, list separators ignore the theme's outline-variant colour.

#15 added outline-variant as "the softer neutral for hairline dividers and card seams". The Android theme store reads it from the config, but toMaterialColorScheme() never copies it into the Material colour scheme, unlike its neighbours (outline, surfaceVariant, …). Everything that draws with MaterialTheme.colorScheme.outlineVariant therefore keeps Material's baseline colour, whatever the app sets:

  • the separators of native:list separator, plain and grouped;
  • the dividers in a button's attached menu;
  • Material's own defaults that read it (a HorizontalDivider with no colour, outlined cards, the tab row's bottom line).

That baseline is a lilac grey (#CAC4D0) in light mode and a dark purple-grey (#49454F) in dark mode. The dark one looks heavy on light cards, and neither matches the app's palette. iOS isn't affected: its lists use the system separator.

This PR adds the missing line:

outline          = outline,
outlineVariant   = outlineVariant,

Separators now use the configured colour in both modes. An app that never set outline-variant gets the package default (#E2E8F0 light, #334155 dark), which is the same default iOS already uses. Nothing else changes.

This complements #94, which fixes the standalone native:divider element (it reads the theme store directly, not the Material scheme).

To reproduce, set an obvious colour in config/native-ui.php:

'outline-variant' => '#E53935',
<native:list class="w-full flex-1" separator>
    <native:list-section header="Grouped list">
        <native:list-item headline="First row" supporting="Some detail" />
        <native:list-item headline="Second row" supporting="Some detail" />
        <native:list-item headline="Third row" supporting="Some detail" />
    </native:list-section>
</native:list>

<native:list class="w-full flex-1" plain transparent separator>
    <native:list-section header="Plain list">
        <native:list-item headline="First row" supporting="Some detail" />
        <native:list-item headline="Second row" supporting="Some detail" />
        <native:list-item headline="Third row" supporting="Some detail" />
    </native:list-section>
</native:list>

Before / after on a Xiaomi phone (Android 16), light and dark mode. Measured separator pixels: before #CAC4D0 / #49454F, after #E53935 in both modes:

separators before and after

…scheme

Lists, dividers and outlined controls draw with MaterialTheme's
outlineVariant, which kept Material's baseline lilac grey whatever the
app configured.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant