Theming Issues - Website Dark Theme Support

[data-sync-user]

I have noticed so inconsistencies on how we display the sites based on the theme (dark or light). Also, I have noticed that for example in Safari and Google Chrome, google is always displayed in dark when the app is in dark theme, but in Firefox, we usually display it in white.

I want to understand what are we doing differently from the other apps. For example, see attached screenshots Sometimes google search will appear on white, but sometimes it will appear on dark (In both cases the app is in Dark Mode)

Expected Behavior:

• Theme mode set to dark -> website should be dark if it supports it
• Theme mode set to light -> webiste should be light
• Theme mode set to auto -> website should be system's theme if website supports it

Current Behavior:

• Theme mode set to dark -> website is light (99% of the times)
• Theme mode set to light -> webiste should be light
• Theme mode set to auto -> website is light

!IMG_6027.PNG|width=25%,alt="IMG_6027.PNG"!

!IMG_6026.PNG|width=25%,alt="IMG_6026.PNG"!

┆Issue is synchronized with this Jira Spike

[data-sync-user]

➤ Matt Reagan commented:

{quote}Also, I have noticed that for example in Safari and Google Chrome, google is always displayed in dark when the app is in dark theme, but in Firefox, we usually display it in white. I want to understand what are we doing differently from the other apps.{quote}

Norberto Andres Furlan I haven’t actually been able to observe this in Safari so far. For example I attached 3 screenshots, the first was me opening an existing Google tab in Safari while the app was in light mode (in this case the tab was displayed in dark mode, but that didn’t match Safari which was in light mode).

I then explicitly set my phone’s theme to Dark and opened a new google tab (also tried reloading it a few times) in Safari and the Google website remained in light mode despite Safari’s UI being dark to match the iOS system setting.

I’m still investigating but so far I’m observing inconsistencies not just in Firefox but also in Safari.

!IMG_7533.PNG|width=1125,height=2436,alt="IMG_7533.PNG"!

!IMG_7534.PNG|width=1125,height=2436,alt="IMG_7534.PNG"!

!IMG_7532.PNG|width=1125,height=2436,alt="IMG_7532.PNG"!

[data-sync-user]

➤ Matt Reagan commented:

A few additional notes:

• I was able to observe inconsistencies with google.com ( http://google.com ) and a few other websites across both Firefox and Safari, so there seem to be some issues on these websites even outside of Firefox
• When testing more directly with a dark mode test page (like this one ( https://jsfiddle.net/greggman/kqst72vm/ )) I could see that the theme changes in Firefox did provide the expected result on the website
• Outside of Firefox in a test app I was also able to confirm that changes in the website rendering should be working correctly with WKWebView based on the current UI appearance (e.g. setting an explicit dark/light theme for overrideUserInterfaceStyle resulted in the expected output from the above test page etc)

cc Norberto Andres Furlan LMK if you may want to discuss this further.