bug: Focus highlight on light items in iOS dark mode is not visible enough

[fschuetz04]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

A focusable item (for example with a button or a checkbox inside) is generally highlighted when focused via keyboard. However, this highlight is barely visible for light items (color="light") in iOS dark mode. This happens because the background color of the highlight is set to #000 in this case.

The first three screenshots are from focusing the default, light, and medium item in iOS dark mode. The remaining screenshots are from focusing the same items in Material Design dark mode. The issue does not occur in light mode.

Another note: In iOS dark mode, the lines of light items are not really visible. In Material Design dark mode, the lines of default and light items are not really visible.

Expected Behavior

The light item in iOS dark mode should use the same focus highlight style as the other items, or at least one with better visibility.

Steps to Reproduce

• Start a project with ionic start
• Set the mode to ios
• Add the following elements to the app

<ion-list>
  <ion-item color="light">
    <ion-button>Test button</ion-button>
  </ion-item>
</ion-list>

• View the app with prefers-color-scheme: dark

Code Reproduction URL

https://github.com/fschuetz04/ionic-ios-dark-focus

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

       Require stack:
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

       Require stack:
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI                     : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.7.0
   @angular-devkit/build-angular : 17.1.2
   @angular-devkit/schematics    : 17.1.2
   @angular/cli                  : 17.1.2
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : not installed
   @capacitor/core    : 5.6.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v20.11.0 (/opt/homebrew/Cellar/node@20/20.11.0/bin/node)
   npm    : 10.2.4
   OS     : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #21149.

The linked issue mentions the color="dark", but that issue is testing in light mode. The hex color for color="dark" in light mode is the same as the hex color for color="light" in dark mode.

[fschuetz04]

@liamdebeasi I found the other issue, but thought I would report a new one, as this one is for the highlight on the item, not the button. Anyway, thanks for your work!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.