Getting started with 1Password for your growing team, or refining your setup? Our Secured Success quickstart guide is for you.
Forum Discussion
1PW extension bug: autofill theme detection fails when using oklch color scheme
Hey,
I am trying to fix the autofill background on a web app that has dark mode. Right now the 1Password extension applies light autofill background which creates unreadable contrast (1st screenshot). It's because input gets `data-com-onepassword-filled="light"` attribute with light variant. Is it possible to tell the 1PW that the page is using dark mode or what's the solution to let the 1PW set `data-com-onepassword-filled` to `'dark'`? I have set the color-scheme CSS property to `dark`.
How it currently looks likeHow it should look like
Edit:
I managed to debug this issue and found out there's a bug in the theme detection by 1PW extension itself that's done via `data-com-onepassword-filled="light|dark"`.
The reproduction is simple:
When using `oklch` color on input text, the autofill detection breaks and resolves the theme always as light.
<!DOCTYPE html>
<html lang="en" style="color-scheme: dark">
<body>
<h1>Working - uses hex</h1>
<div style="color: #edeef0">
<input type="email" autocomplete="email" />
</div>
<h1>Not working - uses oklch</h1>
<div style="color: oklch(94.9% 0.003 264.5)">
<input type="email" autocomplete="email" />
</div>
</body>
</html>Which will result in
