Skip to content

fix(ui): override browser autofill text color in dark mode#29807

Open
okxint wants to merge 1 commit into
calcom:mainfrom
okxint:fix/autofill-dark-mode-text-color
Open

fix(ui): override browser autofill text color in dark mode#29807
okxint wants to merge 1 commit into
calcom:mainfrom
okxint:fix/autofill-dark-mode-text-color

Conversation

@okxint

@okxint okxint commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Fixes #29803

Browser autofill injects -webkit-text-fill-color and a solid background color that completely bypass CSS custom properties. In dark mode this renders autofilled inputs with black text on a dark background — unreadable.

Fix: add autofill overrides in @layer base in apps/web/styles/globals.css:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--cal-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--cal-bg) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

The --cal-text and --cal-bg tokens are already defined in packages/config/theme/tokens.css with correct light/dark values. The box-shadow inset trick overrides the browser's autofill background without using background-color, which is ignored by autofill UA styles.

@okxint
fix(ui): override browser autofill text color in dark mode
c70a531 
Browser autofill injects -webkit-text-fill-color and a tinted background
that bypasses CSS custom properties, causing black text on dark backgrounds.
Add autofill overrides in @layer base using --cal-text and --cal-bg tokens
so both light and dark themes render autofilled fields correctly.
@github-actions github-actions Bot added the 🐛 bug Something isn't working label Jul 20, 2026
@github-actions

github-actions Bot commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Welcome to Cal.diy, @okxint! Thanks for opening this pull request.

A few things to keep in mind:

  • This is Cal.diy, not Cal.com. Cal.diy is a community-driven, fully open-source fork of Cal.com licensed under MIT. Your changes here will be part of Cal.diy — they will not be deployed to the Cal.com production app.
  • Please review our Contributing Guidelines if you haven't already.
  • Make sure your PR title follows the Conventional Commits format.

A maintainer will review your PR soon. Thanks for contributing!

@coderabbitai

coderabbitai Bot commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4e5c04db-d690-420a-b99f-7d286bea82ff

📥 Commits

Reviewing files that changed from the base of the PR and between f004349 and c70a531.

📒 Files selected for processing (1)
  • apps/web/styles/globals.css
📝 Walkthrough

Walkthrough

Added global base CSS rules for WebKit autofilled inputs. The rules apply themed text and background colors across autofill interaction states and add a background-color transition.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly matches the main change: overriding browser autofill text color for dark mode.
Description check ✅ Passed The description accurately explains the autofill CSS override and its purpose.
Linked Issues check ✅ Passed The change addresses issue #29803 by overriding autofill text styling to use theme colors in light and dark modes.
Out of Scope Changes check ✅ Passed The PR only adds autofill styling rules in globals.css and stays within the linked issue scope.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

@CLAassistant

CLAassistant commented Jul 23, 2026

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

🐛 bug Something isn't working size/S

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug] Custom routing form text color is not applied to autofilled text

2 participants

@okxint @CLAassistant