Safari Extension Fails to Detect Correct Dark Mode

[zexpe]

Steps To Reproduce

Oftentimes the Safari Extension doesn't honour the system Dark Mode setting - the extension would be in light mode when the system is in Dark Mode, or it would be in dark mode when the system is in Light Mode...

Expected Result

That the extension would always switch between light mode and dark mode whenever the system changes.

Actual Result

It's often the opposite.

Screenshots or Videos

No response

Additional Context

No response

Operating System

macOS

Operating System Version

12.3

Web Browser

Safari

Browser Version

15.4

Build Version

1.56.6

[eliykat]

Can you provide any specific steps we can follow to reproduce this?

One thought - do you have your OS theme set to Auto? (i.e. it automatically uses light mode during the daytime and dark mode during nighttime.) If so, I think we're missing the listeners to automatically update the popup if you still have a popup window open (e.g. popped out or sidebar) when the transition occurs.

[zexpe]

Yes, it's set to Auto. This problem isn't unique to the Bitwarden extension. Other extensions seem to suffer from this problem too. It doesn't always happen in a clearly reproducible way but it does happen very frequently - that it's in dark mode when the browser is in light mode, or it's in light mode when the browser is in dark mode.

[zexpe]

It just happened today again. During the day. No manual or automatic changes to the system theme, which remained on light mode all day. I've used the Bitwarden extension multiple times today and it was showing light mode, until just now when it decided to go into dark mode, whilst the system is clearly not in dark mode and the extension is set to the default theme.

Extra image of the Neo Noir Safari Extension which correctly states that the system is in light mode.

[zexpe]

Changing the theme to Light manually makes it return to light mode, but then returning that setting to Default then makes it go back into Dark mode.

[zexpe]

Disabling the Safari Extension for Bitwarden and then enabling it again makes it return to Light mode (the system mode) with the Default setting again.

[Hinton]

@eliykat It seems we are checking the theme using a css/js trick inside the platform service, which gets called in the background page. We might need to move that check to the popup and call it on each launch instead.

@zexpe Is it possible the Bitwarden application got updated which restarted the extension? We recently released a new version to the Mac App Store.

[zexpe]

There is another odd bug(?) where sometimes when I open up the Bitwarden desktop app it reinstalls the safari extension. That didn't happen today, but it did happen yesterday. It wasn't when the desktop app was updated - that was a couple of days before...

[zexpe]

I guess it might be possible that that was the first launch of the desktop app after the AppStore update was installed, but that updated refused to install unless Safari was first closed, which gave the impression it would have updated the extension? I'll try to remember to investigate that one in more detail next time an update occurs.

[zexpe]

When the system automatically turned on dark mode, the Bitwarden extension remained in light mode. Disabling then re-enabling the extension fixed it again.

[eliykat]

@Hinton yes you're right, I think we should extract the theming logic into its own service (for all clients) and make sure to run it in the popup in browser.

@zexpe not sure about the update issue, please open a new issue if it happens again and we can investigate.

[djsmith85]

Thanks to @addisonbeck the theming logic has been split out with https://github.com/bitwarden/clients/pull/2943. These changes will be included in the 2022.08 release.

@zexpe Please report back, once you've had a chance to test 2022.08

[github-actions[bot]]

We need more information before we can help you with your problem. As we haven’t heard from you recently, this issue will be closed.

If this happens again or continues to be an problem, please respond to this issue with the information we’ve requested and anything else relevant.

[zexpe]

It's still clearly an issue on 2022.08, which I just updated to yesterday.

[djsmith85]

@zexpe Thank you for reporting back and I'll re-open this.

Is there any change of behaviour with 2022.08? Any more information you can provide? Does this occur more often/less often, anything else that changed? Does this also happen when not using the Neo Noir Safari Extension?

[zexpe]

I don't have enough experience yet, but I'll keep a note and report back once I've seen various behaviours.

[zexpe]

I've done some tests just changing the system dark mode on and off manually. Bitwarden in the "default" theme does not switch with the system mode. However, as shown Neo Noir does. The first video is with Neo Noir extension disabled, demonstrating I'm in "default" theme mode, and that manually switching the extension theme works. Returning to "default" theme mode it remains in dark mode, whatever the system mode is set to. The second video shows how the Neo Noir extension correctly detects the current system mode.

https://user-images.githubusercontent.com/9435103/188204195-e3333910-d5d1-4541-b766-a9d542c23cc4.mov

https://user-images.githubusercontent.com/9435103/188204476-4ecff5cf-71bb-462a-9d09-4de359a6e22e.mov

[zexpe]

Again, if I now disable the Bitwarden extension and then enable it again it starts up in Light mode, as per the system, and still under the "Default" theme option.

And whilst manually switching the system mode between Light and Dark, the Bitwarden extension now remains in Light mode.

It seems to be sticking to whatever mode the system was in at the point the extension was enabled / browser started.

[djsmith85]

Linking https://github.com/bitwarden/clients/pull/3107 here for more context. This definitely only applies to Safari and seems to be due to an upstream issue with Safari.

Code comment from services.module:

// Safari doesn't properly handle the (prefers-color-scheme) media query in the popup window, it always returns light. // In Safari we have to use the background page instead, which comes with limitations like not dynamically changing the extension theme when the system theme is changed.