1546540 - about:newtab/about:home does not respect system dark mode with Default theme

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P3)

Description

[jkhsjdhjs]

about:home has a light background color on linux systems, when it should have a dark background color, because my system uses a dark theme. about:preferences and about:config are displayed with a dark background as intended.
Setting ui.systemUsesDarkTheme to true doesn't change this behavior.
browser.in-content.dark-mode is set to true on my system.

I created a blank profile to verify that I don't experience this behavior because my profile is corrupt.

Comment 1

[jkhsjdhjs]

(In reply to jkhsjdhjs from comment #0)

Setting ui.systemUsesDarkTheme to true doesn't change this behavior.

true should be 1 since the setting is a Number value.

Comment 2

[Kestrel]

This depends on Bug 1529323 since the built-in light and dark themes still need to override the system colors for the new tab page like they do currently.

Comment 3

[Ciprian Muresan [:cmuresan], Ecosystem QA]

about:newtab and about:home are displayed in their dark themes only when extensions.activeThemeID is set to [e-mail]. Or if you have set the dark theme from about:addons->themes.

There's also bug 1529897 that's fixed, which makes is so Firefox themes are not overridden by the OS set theme.

@jkhsjdhjs could you please check and see that if you switch the browser over to Dark theme the about:newtab and about:home pages also switch to dark theme?

Comment 4

[Kestrel]

This bug is specifically for the Default theme where it is expected that the OS light/dark mode is applied consistently to all about:pages.

Comment 5

[jkhsjdhjs]

(In reply to Kestrel from comment #4)

@jkhsjdhjs could you please check and see that if you switch the browser over to Dark theme the about:newtab and about:home pages also switch to dark theme?

Yes, about:newtab and about:home are displayed with a dark background color when explicitly enabling the dark theme.

Comment 6

[Punam Dahiya [:pdahiya]]

As verified in comment #5, on linux about:newtab displays dark on explicitly enable dark theme in Firefox.

NI Kestrel to help clarify work needed post Bug 1529323 fix to support system dark mode on linux with gtk themes for about:new tab pages. It will help assign bug to correct component.Thanks!

Comment 7

[Tim Nguyen :ntim]

Here's the situation right now:

• about:newtab follows the current browser theme and can be styled by browser themes (Arc Dark theme is an example), mainly for Chrome parity
• The default theme automatically becomes the dark theme when the system dark mode is used, except on Linux, where the default theme already uses system colors. This has the side-effect of about:newtab staying light on Linux for dark GTK themes.
• The in-content dark mode follows the system theme rather than the browser theme, regardless of what browser theme is selected and which platform is used.

FWIW, the current situation matches Google Chrome's behaviour on MacOS and Windows. Not sure about Linux however.

Dão, do you think something should be done about this ? I do think the current situation is confusing, but I'm also not sure how much better we can do here.

Comment 8

[Dão Gottwald [:dao]]

I think we should probably fix bug 1529323 and let about:newtab use prefers-color-scheme.

Comment 9

[ntninja]

Since add-on themes can already restyle these pages, wouldn't it make sense to simply export the required pieces of information for the built-in themes as well? This way no special-casing for [e-mail] would be needed and the pages would actually use system colors when using the Default theme on all platforms. Would this be a thing that realistically could be done?

Comment 10

[Jessilyn Davis]

Moving this bug to our backlog until Bug 1529323 is fixed.

Comment 11

[Kestrel]

Attachment: Bug 1546540 - Make unthemed about:newtab, about:home and about:welcome respect dark mode like other about: pages and to avoid white flashes.

Instead of relying solely on the theme to make about:newtab dark, use prefers-color-scheme as well like other about: pages. This makes it work on Linux for the Default theme combined with dark GTK themes and also avoids a white flash on load as the dark mode can be applied immediately rather than waiting for theme colors. The light theme must now explicitly apply newtab colors to override dark mode.

Comment 13

[QwertyChouskie]

This is a very annoying bug, and something should really be done here, as it results in a very inconsistent UX. about:preferences works as expected, but about:newtab is blinding. Reading the thread, it seems there were concerns that having a dark newtab when the Light FF theme is enabled could also be a problem, and that the proposed patch would cause a dark flash when using Light FF with a dark system theme. Maybe a workable solution would be this:

Instead of if (getPref("extensions.activeThemeID") == "firefox-*[e-mail]") { dark_newtab=true; }, which is the current logic, have:

if (getPref("extensions.activeThemeID") == "firefox-*[e-mail]" || 
        (getPref("extensions.activeThemeID") == "[e-mail]" && getCSSProperty("prefers-color-scheme") == "dark"))
{
    dark_newtab=true;
}

This way, the Default theme behaves as expected, without potentially adding unwanted behavior/bugs for the Light FF theme.

Honestly, any solution that gets me a dark newtab theme when on Default would be super awesome, FF's Dark theme doesn't quite match my system colors, but it would be super awesome to not have each new tab blind me. :)

I run Nightly, so happy to test any patches that land, and if there's any other way I can help move this bug along, let me know.

Comment 14

[Alex K]

On Windows 10 with system dark mode enabled, Firefox was running Dark theme but about:home was showing as white. However toggling to any other theme and then back to dark theme seemed to fix the issue - until Firefox is restarted. Both explicit dark mode and default make rest of Firefox skinned to use dark theme (so it follows system settings). But as others stated - about:home does not seem to follow this and any temp fixes are dropped at browser restart.

Comment 15

[sharparam]

I can confirm that the dark mode on about:newtab/about:home no longer works (or maybe never did on my system?).

Firefox version: 72.0.1 (64-bit) (latest stable)
OS: Windows 10 Pro 10.0.18362 Build 18362
"Dark" is enabled in system settings for Windows.
Dark mode is enabled for Firefox.
extensions.activeThemeID is set to [e-mail]
The value of browser.in-content.dark-mode is true

Toggling the theme to "Default" and back to the dark theme makes the dark theme apply to newtab for one single pageload only, then it reverts back to a light theme.

Comment 16

[sharparam]

(In reply to sharparam from comment #15)

Disregard my comment, teaches me to do proper testing before commenting.

The AddOn VivaldiFox interfers with the theming apparently (completely forgot I had that installed), and causes the newtab page to render in a light theme. Disabling the extension makes the page behave as expected.

Comment 17

[Lua MacDougall]

My eyes are burning. On GNOME 3 (Linux) and I still don't understand the inconsistency between about:home and every other internal Firefox page.

Comment 18

[Dão Gottwald [:dao]]

ke5trel, do you intend to get back to this or should it be unassigned?

Comment 19

[Ciprian Dorin Craciun]

The same with about:blank, which if opened at night it temporarily blinds me... :)

I've hacked it by putting the following in my userContent.css:

@-moz-document url(about:blank) {
    * {
        background: #2a2a2e;
    }
}

(Moreover I do have the dark theme selected in Firefox, and I do have the OS dark theme enabled, and still I get the "blank screen of blindness".) :)

Comment 20

[Tom S [:evilpie]]

Is there anyone who could fix this? I think this would be a good idea to fix in conjunction with Bug 1529323. Right now it's very easy to get into a mode where the UI is dark, but some in-content pages are blinding white.

We probably need some kind of product decision here? The coment in patch D33442 also highlight some of inconsistencies we produced here. Mostly for compatibility with Chrome?

Aside: I am personally annoyed that I have to use the Firefox dark theme to avoid this issue, because the title-bar color doesn't match with my GTK theme...

Comment 21

[Dão Gottwald [:dao]]

(In reply to Tom Schuster [:evilpie] from comment #20)

Is there anyone who could fix this? I think this would be a good idea to fix in conjunction with Bug 1529323. Right now it's very easy to get into a mode where the UI is dark, but some in-content pages are blinding white.

We could potentially fix this as suggested in D33442 without bug 1529323, but bug 1529323 would get us better consistency overall, so bundling both fixes would make sense. I don't think it's particularly difficult to pull off, we just need someone to make it their project. Recently it seemed like a Thunderbird engineer might pick up bug 1529323 via bug 1592210.

Comment 22

[reukiodo]

(In reply to jkhsjdhjs from comment #1)

(In reply to jkhsjdhjs from comment #0)

Setting ui.systemUsesDarkTheme to true doesn't change this behavior.

true should be 1 since the setting is a Number value.

Hahaha! What other numbers other than 0 and 1 make any sense here? 0.5 ? It' not a dark theme, but it's not light either, since it's just about gray.

Comment 23

[Danny Colin [:sdk]]

(In reply to reukiodo from comment #22)

Hahaha! What other numbers other than 0 and 1 make any sense here? 0.5 ? It' not a dark theme, but it's not light either, since it's just about gray.

An OS could have theme variant (e.g High Contrast Dark Theme). Or like on Ubuntu, you have Light, Dark, and only titlebar dark mode.

Comment 25

[r.rudolph]

if dark mode in Firefox is selected:
not only the new tab should be in dark but also internal pages like about:preferences and about:config

Comment 26

[Teoh Han Hui]

not only the new tab should be in dark but also internal pages like about:preferences and about:config

Those already use a dark theme, at least in Firefox 76 Beta.

Comment 28

[r.rudolph]

(In reply to Teoh Han Hui from comment #26)

not only the new tab should be in dark but also internal pages like about:preferences and about:config

Those already use a dark theme, at least in Firefox 76 Beta.

Firefox 76.0:
new tab and internal pages, like about:preferences and about:config, are unfortunately NOT in dark mode

Comment 29

[Tom S [:evilpie]]

This is offtopic. This bug is about:newtab/about:home. For other in content pages like about:preferences you need to have a dark OS theme or create ui.systemUsesDarkTheme in about:config and set it to 1.

Comment 31

[gabrc52]

Especially with Linux GTK themes, Bug 1529323 is the opposite of what we want:

If you're using the "Default" theme (which is basically the system GTK theme) and change your system theme to dark, every theme-respecting website would be light. Other websites (like WhatsApp web), and extensions (like Dark Reader with the "Use system color scheme" option) already work properly and render everything dark. Doing what's suggested in bug 1529323 would just spread this bug to every website and extension instead of just the "about:" pages.

Instead, what's needed is for about:newtab, about:home, about:preferences, etc to use "prefers-color-scheme" to determine if they should be dark or not, independent of what's said in any other bug. They should just behave as the rest of the websites.

Comment 32

[promeneur]

The same problem occurs with "Reader View for clutter-free web pages" feature which does not apply dark theme with "dark reader" extension

Comment 33

[Tom S [:evilpie]]

Attachment: Bug 1546540 - On Linux use the hard-coded theme data for in-content dark mode with default theme. r?ntim

I can't use my GTK's default theme because of this bug. Enabling the Firefox Dark theme however makes the colors
not match with the rest of GTK. This is a targeted fix for that case by using the default theme's darkTheme
colors for content.

Comment 34

[Tom S [:evilpie]]

Can you please answer my last question on phab?

Comment 35

[Dão Gottwald [:dao]]

(In reply to Tom Schuster [:evilpie] from comment #34)

Can you please answer my last question on phab?

done

Comment 36

[Nika Layzell [:nika] (ni? for response)]

Attachment: Bug 1546540 - Part 1: Fallback to prefers-color-scheme in uncustomized newtab,

Previously a light theme was always used for the newtab page if no
customizations were applied by the active lightweight theme. This change instead
respects the prefers-color-scheme media query in that situation, making it more
consistent with other content pages.

Comment 37

[Nika Layzell [:nika] (ni? for response)]

Attachment: Bug 1546540 - Part 2: Override newtab colorscheme in "Light" theme,

With the changes in part 1, the newtab page would now be rendered with a dark
theme if the user has prefers-color-scheme: dark due to OS styling, but
explicitly selects the provided "Light" theme.

This patch explicitly specifies the text and background colors in the "Light"
theme, ensuring that the newtab page will always be rendered with a light
colorscheme if the "Light" theme is selected, which is more in-line with the
previous behaviour and consistent with the built-in "Dark" theme.

Comment 38

[Nika Layzell [:nika] (ni? for response)]

Attachment: Bug 1546540 - Part 3: Remove explicit newtab styling from default theme,

With the changes in part 1, the default behaviour for the newtab page is based
on the value of prefers-color-scheme, rather than always defaulting to a light
theme.

As this should produce the correct behaviour in places where the default theme's
dark_theme variant is currently used, this patch removes custom newtab styles
from the default theme entirely.

Comment 39

[Nika Layzell [:nika] (ni? for response)]

Attachment: Bug 1546540 - Part 4: Support dark_theme Lightweight Theme variants on Linux,

Previously due to the decision to use native styles on linux in the parent
process, we would always ignore the dark_theme variant provided Lightweight
Themes, in order to ignore the overrides used by the default theme. This changes
that logic to respect dark_theme variants for all non-default themes on Linux,
bring it closer to feature parity with other platforms.

Comment 40

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/677b943b54d9
Part 1: Fallback to prefers-color-scheme in uncustomized newtab, r=dao
https://hg.mozilla.org/integration/autoland/rev/04e63023b6e8
Part 2: Override newtab colorscheme in "Light" theme, r=dao
https://hg.mozilla.org/integration/autoland/rev/69785e213145
Part 3: Remove explicit newtab styling from default theme, r=dao
https://hg.mozilla.org/integration/autoland/rev/03c5e8aa1f99
Part 4: Support dark_theme Lightweight Theme variants on Linux, r=dao

Comment 41

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/677b943b54d9
https://hg.mozilla.org/mozilla-central/rev/04e63023b6e8
https://hg.mozilla.org/mozilla-central/rev/69785e213145
https://hg.mozilla.org/mozilla-central/rev/03c5e8aa1f99

Comment 42

[Robert Martin [:romartin], Ecosystem QA]

I have verified that the "about:home", and the "about:newtab" pages respect the OS Theme while the "Default" Firefox theme is selected using Firefox Beta 88.0b3 (Build ID: 20210325185929) on Windows 10 x64, macOS 11.2.3, and Ubuntu Linux 20.04 x64.