1976652 - Websites loaded in sidebar do not honor "Website Appearance" light/dark setting (prefers-color-scheme) or "content_color_scheme" theme property and instead get overridden by browser chrome color scheme

Status: NEW

(Firefox :: Theme, defect, P3)

Description

[Kestrel]

Attachment: Sidebar web content dark despite preference being light

STR:

1. Enable the Dark theme.
2. In settings, change "Website Appearance" from Auto to Light (layout.css.prefers-color-scheme.content-override = 1).
3. Open ChatGPT in sidebar (Ctrl+Alt+X).
   or
4. Install Side View extension and open a website in sidebar that has a dark mode.

Expected:
Sidebar website content is light.

Actual:
Sidebar website content is dark, hard-coded by theme.

The AI chatbot sidebar should not be confused with being part of the browser, it is external content that does not honor sidebar text or background colors, only the sidebar light/dark scheme.

Workarounds:

1. Enable fingerprinting protection (FPP) to force light scheme:
   privacy.fingerprintingProtection = true
privacy.fingerprintingProtection.overrides = -AllTargets,+CSSPrefersColorScheme
2. Install an extension (does not work for AI chatbot):
   Dark Mode - Night Eye with "Default mode" set to "Normal" can force Side View to be light.

Extensions that don't work in the sidebar:

• Toggle dark mode and Dark Mode Website Switcher only change layout.css.prefers-color-scheme.content-override.
• Dark Reader

Comment 1

[Jules Simplicio [:jules]]

We discussed this as a team and are considering options, but are not entirely sure of what to do at the moment. Hoping that at some point someone can pick this up.

Comment 2

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:jules, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Kestrel]

Similarly, the webextension theme property content_color_scheme does not work for web content in the sidebar. Only the color_scheme property works, except for vertical tabs (Bug 1974988).

content_color_scheme
Determines which color scheme is applied to the content (for example, built-in pages and preferred color scheme for web pages). Overrides color_scheme.

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme