Fix autofilled inputs rendering white in dark mode

[Dhvanit41]

Related issue: Resolves #51050

Autofilled inputs render with a white background regardless of theme, so in dark mode they appear as bright white boxes. The text in those fields is already themed to a light color, which leaves it close to unreadable.

Root cause

The autofill rule in frontend/styles/global/_global.scss covered the browser's own background with an inset shadow hardcoded to #fff:

&:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: $core-fleet-black !important;
}

Two separate problems:

1. The background was the only hardcoded part. -webkit-text-fill-color already used $core-fleet-black, a theme token that flips to a light color in dark mode. So the text was correct all along and only the background was pinned to white — which is why the field reads as a white box with barely-visible text rather than simply being the wrong color.
2. Firefox was never covered. Only the -webkit- prefixed selector was present, so Firefox never matched this rule and applied its own white fill.

Changes

• #fff → $core-fleet-white, the token that already pairs with $core-fleet-black here.
• Added the standard :autofill selector alongside :-webkit-autofill.
• Added caret-color so the text cursor stays visible against the themed background.
• Dropped the redundant -webkit-box-shadow — autoprefixer emits prefixes from the project's browserslist, and I confirmed the compiled output is identical with and without it.

No new variables. Both colors are existing tokens that already flip:

	--core-fleet-white	--core-fleet-black
:root (light)	#ffffff	#192147
body.dark-mode	#1a1c21	#e2e4ea

Testing

Verified manually in Firefox against a local dev server, which is the browser and scenario the issue reports:

1. Signed in and saved the credentials in Firefox's password manager.
2. Switched Fleet to dark mode and signed out, landing back on /login in dark mode.
3. Let Firefox autofill the Email and Password fields.

Before this change the autofilled fields render as white rectangles. With the change they take the dark surface color and sit flush with the login card, with the light text legible.

I also checked the compiled stylesheet rather than relying on the source alone. The rule builds to:

input:-webkit-autofill, input:autofill,
textarea:-webkit-autofill, textarea:autofill,
button:-webkit-autofill, button:autofill {
  box-shadow: 0 0 0 1000px var(--core-fleet-white) inset;
  -webkit-text-fill-color: var(--core-fleet-black) !important;
  caret-color: var(--core-fleet-black);
}

with a -webkit--only fallback rule emitted alongside it, so browsers that don't understand :autofill don't discard the whole selector list. body.dark-mode redefines both custom properties in the same output, so under dark mode the rule resolves to a #1a1c21 surface with #e2e4ea text.

How to verify

1. Open Fleet in Firefox with a saved login for the instance.
2. Switch to dark mode (avatar menu → My account → theme, or Ctrl+K → "dark").
3. Sign out to land on /login. The theme is stored in localStorage, so it persists while signed out.
4. Click into the Email field to trigger the autofill. Both fields should sit on the dark card with light text instead of appearing as white rectangles.
5. Worth a pass in Chrome in light mode to confirm no regression there, since the :-webkit-autofill path changed from a literal #fff to a token that resolves to #ffffff.

Checklist for submitter

• Changes file added for user-visible changes in changes/, orbit/changes/ or ee/fleetd-chrome/changes.
  See Changes files for more information.

Testing

• Added/updated automated tests

Not added — this is a stylesheet change and the frontend test suite doesn't assert on compiled CSS. Covered by the manual check and the build-output inspection above.

• QA'd all new/changed functionality manually

Summary by CodeRabbit

• Style
  • Improved autofilled input and textarea styling with theme-aware inset shadows.
  • Added support for standard and WebKit autofill behavior.
  • Removed the hardcoded white autofill background for more consistent appearance across themes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 4cc2e518-24de-4562-b8ef-305837bbf465

📥 Commits

Reviewing files that changed from the base of the PR and between 0057309 and 467f468.

⛔ Files ignored due to path filters (1)

• changes/51050-autofill-dark-mode.md is excluded by !**/*.md

📒 Files selected for processing (1)

• frontend/styles/global/_global.scss

---

Walkthrough

Autofilled input and textarea fields now support both :-webkit-autofill and :autofill. The styles replace the hardcoded white inset background with the theme white token. The styles also add theme-aware caret coloring while retaining dark text coloring.

Merge Risk: ⚪ Minimal · up to 467f4

The change makes autofilled controls use theme-aware background, text, and caret colors while covering Firefox. No actionable merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main fix: preventing white autofilled inputs in dark mode.
Description check	✅ Passed	The description identifies the issue, explains the root cause, documents the changes, and records manual QA results.
Linked Issues check	✅ Passed	The changes address issue #51050 by applying theme-aware autofill styling to Firefox and WebKit selectors.
Out of Scope Changes check	✅ Passed	The reviewed stylesheet changes are limited to the autofill dark-mode fix described in issue #51050.
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

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.67%. Comparing base (0e5c80c) to head (467f468).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #51221   +/-   ##
=======================================
  Coverage   68.66%   68.67%           
=======================================
  Files        4000     4000           
  Lines      258167   258171    +4     
  Branches    13686    13687    +1     
=======================================
+ Hits       177282   177291    +9     
+ Misses      65137    65132    -5     
  Partials    15748    15748           

Flag	Coverage Δ
frontend	62.87% <ø> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[RachelElysia]

Awesome, thank you!