1Password autofill doesn't detect dark mode - color-scheme attribute not set on <html> element? #157
Description
Describe the bug
Issue Description
When using mode-watcher in a SvelteKit app, 1Password's browser extension fails to detect dark mode and always sets data-com-onepassword-filled="light", even when the app is in dark mode. This causes autofilled form fields to have incorrect styling.
Current Behavior
- Mode-watcher correctly applies/removes the
.darkclass to the<html>element - 1Password inspects the page and always detects theme as "light"
- Autofilled inputs show
data-com-onepassword-filled="light"in both light and dark modes
Expected Behavior
1Password should detect the current theme and set the appropriate value:
data-com-onepassword-filled="dark"when in dark modedata-com-onepassword-filled="light"when in light mode
Investigation
According to the mode-watcher README:
The ModeWatcher component will automatically detect the user's preferences and apply/remove the "dark" class, along with the corresponding color-scheme style attribute to the html element.
However, 1Password uses the color-scheme CSS property/attribute to detect the page theme, not just the .dark class.
Question: Is mode-watcher actually setting the color-scheme style attribute on the <html> element? If so, when is it being set relative to when browser extensions inspect the page?
Possible Solutions
- Ensure
<html style="color-scheme: dark">is set inline before browser extensions scan the page - Add the
color-schemeattribute in the initial script injection that sets the.darkclass - Document the limitation if this is a timing issue that can't be resolved
Additional Context
1Password has a known bug with OKLCH color values, but setting the color-scheme attribute should help it detect the theme correctly regardless of color format.
Reproduction
Reproduction
- Create a SvelteKit app with mode-watcher
- Add
<ModeWatcher defaultMode="light" />to root layout - Switch to dark mode using a theme toggle
- Use 1Password to autofill a form field
- Inspect the input element - it shows
data-com-onepassword-filled="light"
Logs
System Info
### Environment
- **mode-watcher version:** 0.5.1
- **SvelteKit version:** 2.20.3
- **Svelte version:** 5.25.6
- **Browser:** Chrome on macOS
- **Password manager:** 1Password browser extensionSeverity
annoyance