feat(datetime, datetime-button, picker-column, picker-column-option): improve styling flexibility by removing default color prop

[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

ion-datetime and related components (ion-datetime-button, ion-picker-column, ion-picker-column-option) have a default color="primary" property. This forces users who want to customize datetime styling to override the entire primary color system or set explicit colors on every instance, rather than being able to style the component normally.

What is the new behavior?

• Removed default color="primary" property assignments from all four components
• Components now apply primary color styling via SCSS defaults (ion-color(primary, base)) instead of relying on a property default
• Added :host(.ion-color) overrides in SCSS to apply explicit colors via current-color() when a color prop is set
• Action buttons (cancel, done, clear) have explicit primary text color styling to ensure consistent appearance
• Color now cascades from datetime → picker-column → picker-column-option when explicitly set. Previously the selected wheel option (active time picker text) stayed primary regardless of color; it now inherits the value passed to datetime.

main	FW-6996

Does this introduce a breaking change?

• Yes
• No

Backwards compatible: Visual appearance is unchanged. Components still appear with primary color by default. Existing code that explicitly sets color props continues to work identically.

Other information

Dev build: 8.8.14-dev.11783706459.1d5a7aae

Previews:

• Datetime: basic
• Datetime: color
• Datetime: display
• Datetime: presentation
• Picker: basic

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jul 13, 2026 9:57pm

[thetaPC]

The month/year picker was displaying selected values in the datetime's color (for example, red for color="danger"), but the time picker was ignoring this and showing selected values in primary color instead, creating an inconsistent experience on md. This was wrong because the datetime's color prop should control all picker text colors uniformly.

[thetaPC]

Tests were added based on my findings.

[brandyscarney]

Looks great! Left some minor feedback.

[brandyscarney]

Are there any breaking changes associated with this, like CSS that may start overriding where it previously wasn't?

[thetaPC]

I can't think of any. Devs shouldn't be able to tell the difference with these changes even if they are customizing the primary variables themselves.

[brandyscarney]

Suggested change

	background: ion-color(primary, base, 0.2);
	box-shadow: 0px 0px 0px 4px ion-color(primary, base, 0.2);
	}
	:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
	background: #{current-color(base, 0.2)};
	box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
	box-shadow: 0px 0px 0px 4px #{current-color(base, 0.2)};
	background: ion-color(primary, base, 0.2);
	box-shadow: 0px 0px 0px 4px ion-color(primary, base, 0.2);
	}
	:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
	background: current-color(base, 0.2);
	box-shadow: 0px 0px 0px 4px current-color(base, 0.2);

Nit: you don't need to escape unless it's in a CSS variable

[thetaPC]

9eaee49

[brandyscarney]

While this is actually probably a bug fix, should we document this text color change somewhere in case it's unexpected?

main	FW-6996

[thetaPC]

I updated the PR description to reflect it better. Let me know what you think. I can also fix it another PR if you prefer.

[ShaneK]

Looks good to me, awesome work! Had a nit that's just a follow up on Brandy's earlier comment, but just a nit

[ShaneK]

Suggested change

	background: #{current-color(base, 0.2)};
	background: current-color(base, 0.2);

Nit: looks like this one got missed when you removed the escapes. The box-shadow right below it and the default rule above both drop the #{}, so this can too. Up to you!