fix(theme): safari autofill styling for dark mode readability in Input component by hasegawa-101 · Pull Request #5909 · heroui-inc/heroui

hasegawa-101 · 2025-11-18T18:55:23Z

📝 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.

…nput & Input components

… & Input components

changeset-bot · 2025-11-18T18:55:30Z

🦋 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 · 2025-11-18T18:55:32Z

@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 · 2025-11-18T19:01:54Z

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:

Test on mobile browsers (iOS Safari, Chrome mobile) where the issue was reported

Verify behavior with different color variants

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

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

pkg-pr-new · 2025-11-18T19:02:25Z

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

vercel · 2025-11-19T13:40:29Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Nov 19, 2025 1:42pm
heroui-sb	Ready	Preview	Comment	Nov 19, 2025 1:42pm

heroui-inc/heroui#5799 heroui-inc/heroui#5893 heroui-inc/heroui#5909 heroui-inc/heroui#5916

hasegawa-101 added 2 commits November 19, 2025 03:41

fix: add Safari autofill styling for dark mode readability in NumberI…

9f3bd6a

…nput & Input components

chore: add changeset for Safari autofill dark mode fix in NumberInput…

a7933ec

… & Input components

hasegawa-101 changed the title ~~fix(theme): safari autofill styling for dark mode readability in NumberInput & Input components~~ fix(theme): safari autofill styling for dark mode readability in Input component Nov 18, 2025

hasegawa-101 marked this pull request as ready for review November 19, 2025 06:48

hasegawa-101 requested a review from jrgarciadev as a code owner November 19, 2025 06:48

wingkwong self-assigned this Nov 19, 2025

wingkwong added this to the v2.8.6 milestone Nov 19, 2025

vercel Bot deployed to Preview – heroui-sb November 19, 2025 13:42 View deployment

vercel Bot deployed to Preview – heroui November 19, 2025 13:42 View deployment

wingkwong approved these changes Nov 19, 2025

View reviewed changes

wingkwong merged commit 8921dc4 into heroui-inc:canary Nov 19, 2025
10 checks passed

github-actions Bot mentioned this pull request Nov 16, 2025

ci(changesets): 📦 version packages #5820

Merged

AnYiEE added a commit to AnYiEE/touhou-mystia-izakaya-assistant that referenced this pull request Nov 20, 2025

fix(components): apply HeroUI patches

2cf4065

heroui-inc/heroui#5799 heroui-inc/heroui#5893 heroui-inc/heroui#5909 heroui-inc/heroui#5916

github-actions Bot mentioned this pull request Nov 29, 2025

ci(changesets): 📦 release packages (alpha) vezham/heroui-v2--old#4

Merged

coderabbitai Bot mentioned this pull request Dec 16, 2025

fix(theme): hide password reveal button #5990

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

fix(theme): safari autofill styling for dark mode readability in Input component#5909
wingkwong merged 2 commits into
heroui-inc:canaryfrom
hasegawa-101:issue-4657

hasegawa-101 commented Nov 18, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Nov 18, 2025

Uh oh!

vercel Bot commented Nov 18, 2025

Uh oh!

coderabbitai Bot commented Nov 18, 2025 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Nov 18, 2025

Uh oh!

vercel Bot commented Nov 19, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

hasegawa-101 commented Nov 18, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

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

📝 Additional Information

Summary by CodeRabbit

Bug Fixes

Uh oh!

changeset-bot Bot commented Nov 18, 2025

🦋 Changeset detected

Uh oh!

vercel Bot commented Nov 18, 2025

Uh oh!

coderabbitai Bot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new Bot commented Nov 18, 2025

Uh oh!

vercel Bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

hasegawa-101 commented Nov 18, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Nov 18, 2025 •

edited

Loading

vercel Bot commented Nov 19, 2025 •

edited

Loading