Question

1PW extension bug: autofill theme detection fails when using oklch color scheme

10 replies
634 views

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 like

How 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

Browser Extension

A

Anonymous

Hi @ivenus ,

Thanks for the heads up, I'll pass this along to the team as a bug. Let me know if you run into any other issues with "oklch" in your code.

Regards,
Phil & the Team

D

djsimmons

@1P_Phil do we have an ETA on this? All tailwind sites are unusable with 1P due to this bug.

A

asennikov

Hey @1P_Phil, any updates on this issue? We're using `oklch` colors on our website, and our Signup page becomes unusable when 1Password extension injects the values:

A

Anonymous

Hi @ivenus ,

Yes, sorry for the delay. I don't have an update nor ETA on release timing, but when I hear back, I'll get back with an update.

In the interim, can you set the colors using Hex?

Thanks,
Phil & Team

I

ivenusAuthor

Hey @1P_Phil,

Thanks for the update. I have managed to use HEX as a temporary workaround.

I think more people will encounter a similar problem, because https://tailwindcss.com/ uses the oklch color scheme as its default.

K

kohtzk

Registered just to +1 this issue, @1P_Phil any updates on this?
I'm developing a website using tailwind and am runnning into this exact issue with dark theme, is there a timeline for a fix for this?

TheDude

I am running into the same issue! Can we please have a fix for this!? Also, can you please not use the !important flag for the style/s you set. 1Password shouldn't conflict with our styles if we are already handling autofill styles. Using !important is really giving me a hard time.

R

RaniAgus

Hey folks, while waiting for this bug to be fixed I've tried applying this style in order to change the input text color and it worked:

/* Tweak for 1Password filled inputs in dark theme, due to a known issue */
.dark input[data-com-onepassword-filled="light"] {
  color: #000000;
}

Now it still has the same background color, but at least the input content is visible:

A

alexreardon

Hey all, this is still an active issue

N

nbturbo

I've hit this as well. Happens with oklch colors via tailwind CSS

Edit:

The reproduction is simple:

Which will result in

Sign up

1Password employees: Sign in with SSO

Login to the community

1Password employees: Sign in with SSO