Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a92718b
feat(modal): ensure header and content background color is inherit fr…
joselrio Jun 17, 2025
221a4dd
feat(content): update api.txt with lts changes
joselrio Jun 17, 2025
6c55a41
Merge branch 'next' into ROU-11977-v2
joselrio Jun 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 27 additions & 9 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -667,15 +667,33 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
ion-content,event,ionScroll,ScrollDetail,true
ion-content,event,ionScrollEnd,ScrollBaseDetail,true
ion-content,event,ionScrollStart,ScrollBaseDetail,true
ion-content,css-prop,--background
ion-content,css-prop,--color
ion-content,css-prop,--keyboard-offset
ion-content,css-prop,--offset-bottom
ion-content,css-prop,--offset-top
ion-content,css-prop,--padding-bottom
ion-content,css-prop,--padding-end
ion-content,css-prop,--padding-start
ion-content,css-prop,--padding-top
ion-content,css-prop,--background,ionic
ion-content,css-prop,--background,ios
ion-content,css-prop,--background,md
ion-content,css-prop,--color,ionic
ion-content,css-prop,--color,ios
ion-content,css-prop,--color,md
ion-content,css-prop,--keyboard-offset,ionic
ion-content,css-prop,--keyboard-offset,ios
ion-content,css-prop,--keyboard-offset,md
ion-content,css-prop,--offset-bottom,ionic
ion-content,css-prop,--offset-bottom,ios
ion-content,css-prop,--offset-bottom,md
ion-content,css-prop,--offset-top,ionic
ion-content,css-prop,--offset-top,ios
ion-content,css-prop,--offset-top,md
ion-content,css-prop,--padding-bottom,ionic
ion-content,css-prop,--padding-bottom,ios
ion-content,css-prop,--padding-bottom,md
ion-content,css-prop,--padding-end,ionic
ion-content,css-prop,--padding-end,ios
ion-content,css-prop,--padding-end,md
ion-content,css-prop,--padding-start,ionic
ion-content,css-prop,--padding-start,ios
ion-content,css-prop,--padding-start,md
ion-content,css-prop,--padding-top,ionic
ion-content,css-prop,--padding-top,ios
ion-content,css-prop,--padding-top,md
ion-content,part,background
ion-content,part,scroll

Expand Down
8 changes: 8 additions & 0 deletions core/src/components/content/content.ionic.scss
View file
Open in desktop
Copy link
Contributor

@thetaPC thetaPC Jun 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Screenshot 2025-06-18 at 8 33 31 AM

Screenshot 2025-06-18 at 8 33 40 AM

The background is updating as expected when I change it locally:
Screenshot 2025-06-18 at 8 36 17 AM

Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import "./content.scss";

// Ionic Content
// --------------------------------------------------

:host(.in-modal) {
--background: var(--ion-bg-surface-default, var(--ion-primitives-base-white));
}
7 changes: 6 additions & 1 deletion core/src/components/content/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,12 @@ import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
*/
@Component({
tag: 'ion-content',
styleUrl: 'content.scss',
shadow: true,
styleUrls: {
ios: 'content.scss',
md: 'content.scss',
ionic: 'content.ionic.scss',
},
})
export class Content implements ComponentInterface {
private watchDog: ReturnType<typeof setInterval> | null = null;
Expand Down Expand Up @@ -458,6 +462,7 @@ export class Content implements ComponentInterface {
'content-sizing': hostContext('ion-popover', this.el),
overscroll: forceOverscroll,
[`content-${rtl}`]: true,
'in-modal': hostContext('ion-modal', this.el),
})}
style={{
'--offset-top': `${this.cTop}px`,
Expand Down
4 changes: 4 additions & 0 deletions core/src/components/header/header.ionic.scss
View file
Open in desktop
Copy link
Contributor

@thetaPC thetaPC Jun 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ ion-header {
&.header-divider {
border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-primitives-neutral-300;
}

&.in-modal {
--background: var(--ion-bg-surface-default, var(--ion-primitives-base-white));
}
}

ion-toolbar + ion-toolbar {
Expand Down
1 change: 1 addition & 0 deletions core/src/components/header/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ export class Header implements ComponentInterface {
[`header-collapse-${collapse}`]: true,
[`header-translucent-${theme}`]: this.translucent,
['header-divider']: divider,
'in-modal': hostContext('ion-modal', this.el),
}}
{...inheritedAttributes}
>
Expand Down
Loading