[os-davidlourenco]

Issue number: resolves internal

---

What is the current behavior?

Content
On the Ionic theme, ion-content still uses the native defaults: the background is var(--ion-background-color, #fff) and the text color is var(--ion-text-color, #000). The background does not use the design token, and the text color resets the color already set on body, so everything inside the content gets #000 instead of the default text token.

Colors in dark mode
On the Ionic theme, every bold color's contrast uses $ion-text-inverse (or $ion-text-default for warning/light), which flip with the dark palette. But several bold backgrounds do not flip:

• primary, secondary, success and danger stay dark, so components using them (solid buttons, badges, bold chips, toasts, item-options) get near-black text on a dark background (e.g. ~2.5:1 on secondary).
• warning stays yellow and light stays white, so they get white text on a light background (white-on-yellow ~2.4:1, white-on-white for light).

What is the new behavior?

Content

• ion-content styles are split per theme (content.common.scss, content.native.scss, content.ios.scss, content.md.scss, content.ionic.scss), following the pattern used by other components.
• On the Ionic theme, the content background now falls back to the body background token: var(--ion-background-color, $ion-bg-body).
• On the Ionic theme, the content no longer resets the text color (--color: currentColor), so it inherits the default text token set on body.
• iOS and MD compile to the same CSS as before. The --background / --color custom properties keep working for consumers.

Colors in dark mode
In the $ionic-colors map (ionic.theme.default.scss), bold contrast values now match how each background behaves in the dark palette:

• Backgrounds that stay dark (primary, secondary, success, danger) use $ion-text-light, so text stays white in both modes.
• Backgrounds that stay light (warning, light) use $ion-text-dark, so text stays near-black in both modes.
• Backgrounds that are lightened in the dark palette (tertiary, extended colors, medium, dark) keep $ion-text-inverse, which flips with the theme to preserve contrast.

Light mode is visually unchanged for the text-light colors; warning/light text shifts slightly (#242528 to #131518). Reference screenshots were regenerated.

Does this introduce a breaking change?

• Yes
• No

Other information

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Nov 4, 2026 10:24am UTC

[Copilot]

🟡 Changes recommended

The new Ionic defaults lack regression tests covering light/dark themes, ancestor-inherited text color, background-token fallback, and explicit color/background overrides.

1 open issue

• Add Ionic theme regression tests for new defaults · New

What changed in this PR

This PR improves dark-theme compatibility by aligning Ionic color contrast tokens with their backgrounds and giving ion-content theme-specific defaults.

Changes:

• Updates bold contrast tokens for backgrounds that remain dark or light across palettes.
• Splits content styles by theme, adding Ionic background-token fallback and inherited text color while preserving native defaults.
• Updates the API inventory to record content CSS properties per theme.

File	Description
core/​src/​themes/​ionic/​ionic.theme.default.scss	Adjusts bold contrast tokens and documents their selection.
core/​src/​components/​content/​content.tsx	Registers separate Ionic, iOS, and MD stylesheets.
core/​src/​components/​content/​content.native.scss	Preserves shared native background and text defaults.
core/​src/​components/​content/​content.md.scss	Adds the MD stylesheet entry point.
core/​src/​components/​content/​content.ios.scss	Adds the iOS stylesheet entry point.
core/​src/​components/​content/​content.ionic.scss	Adds Ionic background fallback and text inheritance.
core/​src/​components/​content/​content.common.scss	Extracts shared styles from native theme dependencies.
core/​api.txt	Lists content CSS properties for each theme.

_{Review effort: Balanced}