Text Input shows un-expected background color on autocomplete

[SheriffSoco]

Prerequisites

• [x] I have searched for duplicate or closed issues
• [x] I have read the contributing guidelines

Describe the issue

On Google Chrome, utilizing autocomplete to fill in a text input sets the background color to a light blue. After doing some research, this looks to be caused by Chrome's internal styling sheet.

Our team would like to be able to set this autocomplete background color to black or white, depending on the browser/webpage theme.

Reduced test cases

No response

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What is the issue regarding ?

@trimble-oss/modus-web-components

What version of npm package are you using ?

v10.2.3

Priority

Low

What product/project are you using Modus Components for ?

Trimble Service Hub

What is your team/division name ?

Trimble Viewpoint

Are you willing to contribute ?

Yes

Are you using Modus Web Components in production ?

No response

[github-actions[bot]]

Hello @SheriffSoco! Thanks for opening an issue. The Modus core team will get back to you soon (usually within 24-hours) and provide guidance on how to proceed. Contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to.

Please wait until the issue is ready to be worked on before submitting a PR, or you can reach out to the core team if it is time bound. For trivial things, or bugs that don't change the expected behaviors and UI, you can go ahead and make a PR.

[coliff]

Hi @SheriffSoco - yep, I've ran into that issue before on other projects. There is one thing you can do to help the issue. If your theme is set as dark mode then ensure you use color-scheme: dark in your CSS. You can test/see how this works in Modus Bootstrap CSS on this test page: https://trimble-oss.github.io/modus-layout/forms/

Screenshot showing my email address autocompleted in light and dark mode - this was on Edge but it works the same in Chrome.

[coliff]

Update: I reproduced the issue on here actually https://modus-web-components.trimble.com/?path=/docs/user-inputs-text-input--docs

unfortunately there isn't an easy fix for this and development effort is mostly on Modus Web Components v2 now. Happily though, I believe the issue is resolved there.