bug: Black text color on dark theme

[aeharding]

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

v8.x (Beta)

Current Behavior

I noticed that buttons and badges have black text in dark mode of Ionic v8 beta.

This is contrary to native iOS apps in dark mode (buttons and badges) which have white text (see below).

Additionally, the colors seem a bit washed out compared to native iOS badge/buttons.

Expected Behavior

White text in dark mode for buttons and badges (primary/danger colors). More vibrant (iOS-like) primary/danger colors.

Steps to Reproduce

Here is black text in dark mode:

Here is black text in danger badge:

Here is what I expect (iOS native app examples ignore red rectangle in first img):

Code Reproduction URL

https://stackblitz.com/edit/j1affd-djjrzh?file=src%2FApp.tsx

Ionic Info

N/A

Additional Information

Tangential: I think dark mode is broken in the ionic docs for v8. It only shows light mode.

[brandyscarney]

Thanks for the issue! We have updated our default colors in v8 to meet the Web Content Accessibility Guidelines AA criteria for contrast ratio. You can read more about this in our blog post here: https://ionic.io/blog/announcing-the-ionic-8-beta

You can generate different colors by using our Color Generator in combination with a Dark Mode selector if desired.

[aeharding]

@brandyscarney I made this issue at request from Discord, having black text in buttons and badges doesn't seem quite right to me, especially because I haven't seen any other app do that.

[brandyscarney]

Thanks for letting me know! I discussed this with the team and we will look into updating the dark palette colors while still passing WCAG AA compliance. I've marked this as a feature request as it is an enhancement.

[liamdebeasi]

Thanks for the issue. This has been resolved via #29239, and a fix will be available in an upcoming release of Ionic Framework.

I wasn't able to make every requested change, but some of the colors are a bit more vibrant now. I posted a detailed explanation of some of our constraints as well as differences between iOS and web on the PR if you are interested in learning more: #29239

As for changing the contrast, the PR goes into more detail as to why we aren't changing that. However, you can definitely still use our base dark theme and then layer on your customizations on top of it if you'd like to keep the white contrast color for some of the buttons. Here's an example:

import '@ionic/react/css/palettes/dark.system.css';

@media (prefers-color-scheme: dark) {
  :root {
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
  }
}