1721019 - How to make scrollbar use system/gtk-theme?

Status: RESOLVED WORKSFORME

(Core :: Widget: Gtk, defect)

Description

[aleks.stier]

Attachment: non-system-theme.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Steps to reproduce:

1. Install arc-gtk-theme on my linux-machine
2. Choose arc-dark as the system-theme for my linux-distro
3. Choose system-theme as firefox-theme
4. Open website in firefox which shows the scrollbar

I also tried the following settings in about:config which didn't help

widget.content.allow-gtk-dark-theme = true
widget.disable-dark-scrollbar = true

Actual results:

The scrollbar doesn't use the system-theme as can be seen in the attached screenshot non-system-theme.png

Expected results:

The scrollbar should use the system-theme.

Comment 1

[aleks.stier]

Many versions ago it worked out of the box. Then I had to set the following settings in about:config:

widget.content.allow-gtk-dark-theme = true
widget.disable-dark-scrollbar = true

Then after another firefox-update also this stopped working and I hat to put the following in my userContent.css

:root { scrollbar-color: unset !important; }

Now after the firefox-90 update this also stopped working. I tried all kinds of settings in about:config but can't get it working.

Comment 2

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Gtk' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 3

[aleks.stier]

The solution I ended up using is to set in about:config the following settings

widget.non-native-theme.enabled = false
widget.content.gtk-theme-override = Arc-Dark

where Arc-Dark is my desired theme. While it works it would be nice if I wouldn't have to set it manually. Also it took me quite some while to figure it out and I couldn't do it without the help of reddit.

Additionally whats weird about it is that if I only set widget.non-native-theme.enabled = false but not widget.content.gtk-theme-override than firefox uses the correct theme but only for the about: sites like about:config. Although all other normal sites like google.com also change their theme its not the correct system-theme. Therefore I have to set the theme manually with widget.content.gtk-theme-override. If the about: sites can detect system-theme if widget.non-native-theme.enabled = false is set then all other sites should also be able to detect the correct theme without me setting it manually. Did is just inconsistent.

Comment 4

[aleks.stier]

Nevermind. It doesn't work with youtube for some reason. Youtube keeps changing it to a thick, brown scrollbar.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Youtube uses custom scrollbars. When using widget.non-native-theme.enabled without widget.content.allow-gtk-dark-theme (or a theme override), we use a light theme rather than a dark theme for content, for compat reasons (too many pages break otherwise).

We could try to use dark system colors rather than the hard-coded semi-transparent dark scrollbars, but honestly not sure if it's worth it. The semi-transparent colors have been reviewed so that they work in pretty much all dark-ish backgrounds.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

For youtube, you need to use * { scrollbar-color: unset !important; } rather than :root, most likely

Comment 7

[aleks.stier]

I would like if firefox could uses the system-theme if I tell it to do so. Preferably I shouldn't have to define the theme manually with widget.content.gtk-theme-override. Maybe a setting could be added which makes firefox use system-theme if its set to true? Like widget.use-system-theme.