Firefox 72: dynamic scrollbars based on page color

[Karlston]

Firefox 72: dynamic scrollbars based on page color

Mozilla plans to adapt the color of the scrollbar in the Firefox web browser to the background color of the visited webpage in Firefox 72.

 

Dark themes are en vogue currently; operating systems, web browsers, and other applications get dark theme options that users may enable to switch from the previously favored light design to a black design.

 

For many, it seems like a personal preference more than anything else, but dark themes offer some advantages over lighter themes including better battery performance on mobile devices.

 

Firefox users may enable a dark theme in the browser on the Menu > Customize page of the web browser; this paints the browser UI in darker colors. Certain websites, e.g. DuckDuckGo or Startpage, support dark themes as well that users may enable.

 

One of the issues that Firefox users experienced with dark themed sites in the browser was that the scrollbar area was not adapted accordingly.

 

 

The scrollbar used a light design regardless of website or selected Firefox theme; this felt distracting to many users. Some used custom CSS styles to paint scrollbars in a dark color, others endured the light area on websites visited in the Firefox web browser.

 

Starting with Firefox 72, Firefox will adapt the color of the scrollbar based on the background color of the visited page. Users of the browser who prefer a darker theme will notice that the color of the scrollbar area shines in a darker color as well and that page position indicator is darker than before as well.

 

The screenshot above highlights the change. The window on top shows the new scrollbar color scheme on the dark homepage of the search engine DuckDuckGo.

 

Sites that don't use standards when it comes to dark themes or modes may not show the correct scrollbar colors after all; this is the case for Reddit which, according to a comment on the official bug listing on Mozilla's bug tracking site, sets the dark background "on a child element of the scrollable container" so that Firefox cannot detect the dark theme usage.

 

Firefox 72 Stable will be released on January 7, 2020 according to the release schedule.

 

 

Source: Firefox 72: dynamic scrollbars based on page color (gHacks - Martin Brinkmann)