Fix browser autofill overriding input background in dark theme

[YasiruDEX]

Purpose

Autofilled inputs render with the browser's blue background and dark text instead of the theme surface.

Resolves #1616

Goals

Autofilled fields match the surrounding input styling in both dark and light themes.

Approach

Browsers force their own default background color on autofilled fields and ignore standard styling rules. Fixed this in index.css by covering the input with a matching shadow layer so it seamlessly keeps the dark theme's background and text colors.

Screen.Recording.2026-08-19.at.15.23.19.mov

Screen.Recording.2026-08-19.at.15.28.48.mov

User stories

As a user filling the Agent Creation form, I want autofilled fields to look like the rest of the form.

Release note

Fixed browser autofill applying a light background to input fields in dark theme.

Documentation

N/A

Training

N/A

Certification

N/A

Marketing

N/A

Automation tests

• Unit tests

  None.

• Integration tests

  None

Security checks

• Followed secure coding standards? yes
• Ran FindSecurityBugs plugin and verified report? N/A
• Confirmed no keys/passwords/tokens/secrets committed? yes

Samples

N/A

Related PRs

None

Migrations (if applicable)

N/A

Test environment

dev build

Learning

N/A

Summary by CodeRabbit

• Style
  • Improved autofill appearance to match light and dark themes.
  • Preserved themed text, caret colors, and typography in autofilled fields.
  • Reduced unwanted browser autofill background animations.
  • Reformatted CSS reset selectors for improved readability.

[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: d1929130-3adc-4e85-bf31-7af3350f2541

📥 Commits

Reviewing files that changed from the base of the PR and between d405033 and 8735aa3.

📒 Files selected for processing (1)

• console/apps/web-ui/src/index.css

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The web UI stylesheet reformats reset selectors and adds theme-aware browser autofill styling. Autofilled inputs, textareas, and selects now use themed surfaces, text, caret colors, delayed background transitions, and inherited typography.

Changes

Browser autofill styling

Layer / File(s)	Summary
Global reset and autofill rules console/apps/web-ui/src/index.css	Reformats the html, body, and universal box-sizing selectors. Adds light and dark autofill colors, shared autofill transitions, and inherited typography for form controls.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 8735a

The change is localized to autofill styling, and no actionable merge-blocking risk remains at the current head; it is merge-ready after normal review.

Possibly related PRs

• wso2/agent-manager#1623: Both changes update index.css with theme-aware browser autofill styling.

Suggested reviewers: rasika2012

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes unrelated CSS reset selector reformatting in addition to the autofill styling fix.	Remove or separate the unrelated CSS reset formatting changes so the PR contains only autofill styling updates.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the primary change: fixing browser autofill background behavior in the dark theme.
Description check	✅ Passed	The description covers the purpose, goals, approach, issue link, testing, security, and release impact; some template details are brief but non-critical.
Linked Issues check	✅ Passed	The CSS changes address issue #1616 by preventing browser autofill colors from disrupting themed input fields.
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.}

[YasiruDEX]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.