bug: item borders effectively invisible in md dark mode about ionic-framework HOT 4 CLOSED

We likely need to adjust the --ion-border-color value (or similar) for items in lists. I can reproduce the same behavior in Ionic 7: https://stackblitz.com/edit/motuzy-kmn4fz?file=package.json,src%2Fmain.ts,src%2Ftheme%2Fvariables.css,src%2Fenv.d.ts

The accordion has this problem because it has color="light" and we use the shade variant for the border.

from ionic-framework.

Thanks for taking a look.

from ionic-framework.

Here's a dev build that should fix the contrast issue for Items without the color property: 8.0.1-dev.11713911458.1ad5f4cf

I'll need to take a closer look at how best to handle the case where color is set. For most colors in the palette, using the shade for the border is fine since we lighten the base color in dark mode. This is not the case for the light color in dark mode (and similarly, the dark color in light mode) since the base color actually gets darker.

from ionic-framework.

Thanks for the issue. This has been resolved via #29398, and a fix will be available in an upcoming release of Ionic Framework. This PR fixes the issue where the wrong border color was used on an item without the color prop in dark mode.

The other issue is a bit tricky to automatically solve for every use case. In some cases we need to use the tint for the border color, and in others we need to use the shade. This decision needs to be based on color contrast which we don't have a great way of automatically determining at runtime. Ideally we'd be able to use color-contrast which would choose the value that yields the higher contrast. However, the browser support for this is limited to Safari 15+ as of writing.

As browser support improves for color-contrast we'll be happy to consider adding support for this automatically. Here is a workaround you can implement in your application to resolve the issue for now:

@media (prefers-color-scheme: dark) {
  ion-item.ion-color-light::part(native) {
    border-color: var(--ion-color-tint);
  }
}

from ionic-framework.