Firefox 72: dynamic scrollbars based on page color

Martin Brinkmann
Nov 11, 2019

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.

firefox adaptive scrollbar color

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.

Now You: Do you prefer light or dark themes in your applications / on websites?

Firefox 72: dynamic scrollbars based on page color
Article Name
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.
Ghacks Technology News

Tutorials & Tips

Previous Post: «
Next Post: «


  1. ben said on March 13, 2020 at 2:59 pm

    How do I turn this stupid feature off? The scrollbar-color CSS is not working.

  2. iwanttodie said on November 12, 2019 at 2:42 am

    Oh I don’t know Mozilla, maybe just maybe I would like the scrollbar to match the dark theme I am using.

  3. anonymous said on November 12, 2019 at 2:35 am

    The dark theme in Firefox used to also display the new tab page as a black background. This is no longer the case, why?

    1. Anonymous said on November 13, 2019 at 9:22 am

      I did a quick test of this & the new tab page was dark,so don’t know why it wasn’t for you.

  4. Herman Cost said on November 12, 2019 at 12:21 am

    I have a strong preference for light themes. I would not use a browser that did not offer that option at all times.

  5. pHROZEN gHOST said on November 11, 2019 at 8:41 pm

    Mozilla used to boast about Firefox being your browser your way.
    Apparently they didn’t believe in that.
    Now, it’s your browser THEIR way.

    Wouldn’t it be nice if they just focused on the user experience?

    1. Nick said on February 20, 2020 at 11:01 pm

      Totally agree. It is not for FF to decide how to color the scrollbar, that’s for the owner/designer/developer to choose. It really doesn’t work in the real world, it messes up the original design.

  6. happysurf said on November 11, 2019 at 6:52 pm

    Good news, I want add some codes for scrollbars for usercContent.js:

    /* Thin Global Scrollbar */
    *{ scrollbar-width: thin }

    /* Hide Scrollbar */
    scrollbar-width: none;

    1. Tom Hawack said on November 11, 2019 at 9:51 pm

      @happysurf, I just tested your /* Hide Scrollbar */ code (added to my userContent.css) and it works perfectly (you forgot the semi-colon before ‘root’). One advantage is that it preserves Firefox’s own scrollbars (code is in userContent.css). Thanks for sharing. Big surprise for me hiding the scrollbars can be performed s easily when I remember older Firefox versions requiring numerous lines of code and recent Firefox versions where old code didn’t make it and many stating it was a challenge then to hide the scrollbars, which is why I had opted for the userChromeJS script I mention above.

      Only 1 line makes it, nice! And thanks!

  7. John Fenderson said on November 11, 2019 at 6:02 pm

    “Do you prefer light or dark themes in your applications / on websites?”

    I strongly prefer the light color schemes over the dark ones in general.

  8. Tom Hawack said on November 11, 2019 at 4:48 pm

    Regarding lite/dark themes it all depends of how the lite and dark are configured.
    If ‘lite’ means a lite gray background with quasi black text then I prefer lite;
    If ‘lite’ means a white background with gray (and even lite gray) text then I prefer dark;
    If dark mans a dark gray background with quasi white text then I prefer dark;
    If dark means a black background with white text then I prefer lite.

    It all depends, which is why I use the browser’s (Firefox here) default theme and edit its GUI components; which is why as well I use a Firefox extension named ‘Dark Reader’ on a per-site basis, actually enabling the extension’s excellently rendered dark display only for sites I, 1- visit frequently and 2- have one of those lite gray text on white background I (and many others) just can’t stand.

    It’s not the text color which fatigues the eyes, but the background color, mainly white, Setting gray text on a white background (which would assume it’s the text color which is eye-straining) is a big mistake many website developers and/or designers seem to ignore totally. Personally I’m fond of black text on a lite/medium gray background, mainly because it’s the color pair which strains the less my eyes.

    Secundo : the scrollbars. Latest versions of Firefox have made it difficult to disable them all together. Fortunately I’ve found a dedicated script named ‘Hide Scrollbar’, quite old yet still functional on Firefox 70.0.1, at — The script is a uc.js script which means it needs the userChromeJS environment :

    No idea if disabling the scrollbars will be possible in the near future, be it with the help of userChromeJS (with which, by the way, I’ve installed 12 scripts at this time). Considering tweaking seems to be Mozilla’s nightmare, I enjoy the present times and fear the ones to come.

    1. x said on March 27, 2020 at 3:04 pm

      I have the inverse problem. I want scrollbar because I use a lot of window and keep clicking on other page because there is no clear border anymore where the scrollbar is. It activate things all the time because I click on something I did not want to activate. I want to force scrollbar to be there and this is also made difficult.

    2. Nick said on February 20, 2020 at 10:58 pm

      Really stupid idea from Firefox… it is the designer/developer who should have the say in any presentation layer design, not the browser provider!

    3. owl said on November 15, 2019 at 2:25 pm

      I agree with the full article by Martin Brinkmann.
      I prefer “Dark theme” in terms of “Eyestrain measures, Energy saving, Visibility”.
      Add-on “Dark Background and Light Text:Makes every page to have light text on dark background (exact colors are customizable)” to assist it is a favorite.

      However, Firefox was very uncomfortable because “Some parts such as scroll bars cannot adjust the color tone.”
      Since the presence of the scroll bar itself is annoying, it is using add-on “hide-scrollbars: Hide page scrollbar!”

      Mozilla’s plan is an appropriate idea, but I hope so will pursue a user experience.

      @Tom Hawack said on November 11, 2019 at 4:48 pm:
      It will share most of your views.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.