fix(theme): safari autofill styling for dark mode readability in Input component

[hasegawa-101]

Closes #4657

📝 Description

Fixes autofill text visibility issue in dark mode for Input and NumberInput components. When browser autofill was triggered in dark mode, the text became unreadable (black text on dark background) in Safari.

⛳️ Current behavior (updates)

Autofilled input text is unreadable in dark mode due to incorrect text color styling. The browser's default autofill styling overrides the theme's foreground color, making the text appear black on a dark background.

🚀 New behavior

Autofilled text now correctly inherits the theme's foreground color in dark mode using the text-fill-inherit utility class. The text remains visible and readable across all theme modes.

2025-11-19.15.46.28.mov

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Summary by CodeRabbit

Bug Fixes

• Fixed Safari autofill text styling in dark mode for Input and NumberInput components. Autofilled form fields now display with improved visibility and readability when using dark mode, ensuring better usability across all browsers.

[changeset-bot]

🦋 Changeset detected

Latest commit: a7933ec

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@heroui/theme	Patch
@heroui/autocomplete	Patch
@heroui/checkbox	Patch
@heroui/date-input	Patch
@heroui/date-picker	Patch
@heroui/form	Patch
@heroui/input-otp	Patch
@heroui/input	Patch
@heroui/number-input	Patch
@heroui/radio	Patch
@heroui/select	Patch
@heroui/table	Patch
@heroui/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@hasegawa-101 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

A changeset entry bumps @heroui/theme to patch version. Tailwind CSS classes are added to Input and NumberInput components' input slots to fix Safari autofill text color visibility in dark mode using -webkit-text-fill-color with the foreground color variable.

Changes

Cohort / File(s)	Change Summary
Changeset entry .changeset/eleven-taxis-camp.md	Patch version bump documenting the Safari autofill styling fix for Input and NumberInput components in dark mode.
Component styling fixes packages/core/theme/src/components/input.ts, packages/core/theme/src/components/number-input.ts	Added Tailwind class dark:autofill:[-webkit-text-fill-color:hsl(var(--heroui-foreground))] to input slots with explanatory comments for Safari autofill dark mode readability.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Changes are CSS-focused and highly repetitive (same fix applied to two files)
• No logic changes, public API modifications, or control flow alterations
• Minor browser vendor-specific styling tweak with straightforward implementation

Suggested reviewers

• jrgarciadev
• wingkwong

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly addresses the main change: fixing Safari autofill styling for dark mode in Input component(s), which aligns with the changeset and PR objectives.
Description check	✅ Passed	The PR description follows the template structure with all key sections filled: issue reference, description, current behavior, new behavior, breaking change status, and additional information.
Linked Issues check	✅ Passed	The PR successfully addresses the core requirement from #4657: fixing autofilled input styling in dark mode by applying webkit-text-fill-color styling to both Input and NumberInput components.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing Safari autofill styling in dark mode for Input and NumberInput components, directly addressing issue #4657 with no extraneous modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fd9dd2a and a7933ec.

📒 Files selected for processing (3)

• .changeset/eleven-taxis-camp.md (1 hunks)
• packages/core/theme/src/components/input.ts (1 hunks)
• packages/core/theme/src/components/number-input.ts (1 hunks)

🔇 Additional comments (3)

.changeset/eleven-taxis-camp.md (1)

1-5: LGTM! Changeset is properly formatted.

The changeset correctly documents a patch-level fix for the Safari autofill styling issue in dark mode, with an appropriate description and issue reference.

packages/core/theme/src/components/number-input.ts (1)

49-50: LGTM! Consistent implementation with Input component.

The fix is properly applied to the NumberInput component using the same approach as the Input component, ensuring consistent behavior across both components.

Same verification needed as for the Input component:

1. Test on mobile browsers (iOS Safari, Chrome mobile) where the issue was reported
2. Verify behavior with different color variants
3. Confirm the CSS variable format matches the expected HSL format

Since both components share the same fix, testing one thoroughly should validate both implementations.

packages/core/theme/src/components/input.ts (1)

51-52: CSS variable format verified; mobile and color variant testing require manual verification.

Item 1 (CSS variable format) is confirmed correct. The --heroui-foreground variable follows the established codebase pattern where variables contain space-separated HSL values (e.g., "240 10% 90%") and are wrapped with hsl() at usage time. This is consistent with the baseStyles utility in packages/core/theme/src/utils/classes.ts and how hexToHsl conversions are applied throughout the theme system.

Items 2 and 3 (mobile browser testing and color variant testing) require manual verification in live browser environments and cannot be automated in the sandbox. Please test these scenarios directly before merging.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5909

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5909

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5909

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5909

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5909

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5909

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5909

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5909

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5909

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5909

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5909

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5909

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5909

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5909

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5909

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5909

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5909

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5909

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5909

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5909

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5909

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5909

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5909

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5909

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5909

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5909

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5909

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5909

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5909

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5909

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5909

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5909

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5909

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5909

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5909

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5909

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5909

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5909

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5909

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5909

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5909

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5909

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5909

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5909

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5909

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5909

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5909

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5909

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5909

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5909

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5909

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5909

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5909

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5909

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5909

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5909

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5909

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5909

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5909

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5909

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5909

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5909

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5909

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5909

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5909

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5909

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5909

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5909

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5909

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5909

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5909

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5909

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5909

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5909

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5909

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5909

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5909

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5909

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5909

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5909

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5909

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5909

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5909

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5909

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5909

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5909

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5909

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5909

commit: a7933ec