fix(header, content): update colors for ionic theme

[joselrio]

Issue number: resolves #

---

What is the current behavior?

• The colors were not working on Header and Content when used inside a modal;

What is the new behavior?

• Added the class selector in-modal to header and content when used inside the modal.
• Through the added selector, just set the same variable value used under the modal context.

Does this introduce a breaking change?

• Yes
• No

Other information

https://ionic-framework-git-rou-11977-v2-ionic1.vercel.app/src/components/modal/test/basic?ionic:theme=ionic

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 18, 2025 9:49am

[ShaneK]

Looks good to me!

[thetaPC]

These changes don't seem to be necessary as it's working as expected. I would recommend providing a minimal JS environment that shows what the issue is so we can provide a different solution.

[thetaPC]

Why are these changes needed? This is already being set through the modal ionic theme file.

The background is updating as expected when I change it locally:

[thetaPC]

Why are these changes needed? This can already be done through styling:

ion-modal ion-header ion-toolbar {
  --background: pink;
}

We have documentation on best practices for style customization when it comes to modals. I would recommend reviewing that.