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
.dark class 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-scheme attribute in the initial script injection that sets the .dark class
- 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 extension
Severity
annoyance
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
.darkclass to the<html>elementdata-com-onepassword-filled="light"in both light and dark modesExpected 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 modeInvestigation
According to the mode-watcher README:
However, 1Password uses the
color-schemeCSS property/attribute to detect the page theme, not just the.darkclass.Question: Is mode-watcher actually setting the
color-schemestyle attribute on the<html>element? If so, when is it being set relative to when browser extensions inspect the page?Possible Solutions
<html style="color-scheme: dark">is set inline before browser extensions scan the pagecolor-schemeattribute in the initial script injection that sets the.darkclassAdditional Context
1Password has a known bug with OKLCH color values, but setting the
color-schemeattribute should help it detect the theme correctly regardless of color format.Reproduction
Reproduction
<ModeWatcher defaultMode="light" />to root layoutdata-com-onepassword-filled="light"Logs
System Info
Severity
annoyance