DEV Community

Cover image for Hey! Firefox scrollbar-color is magical
Michel
Michel

Posted on • Originally published at blog.pagesd.info

6 1

Hey! Firefox scrollbar-color is magical

I think so. I just came back from my site Solitaire-Play and I realized that the vertical scrollbar is "green", which is the dominant color of any solitaire game. Cool!

I check with Chrome and there, the scrollbar is "gray" as usual. No matter where I look, I can't find anything to explain this behavior.

According to MDN web docs, it's possible to define the color used for the scrollbar with the experimental property scrollbar-color:

scrollbar-color: auto | dark | light | <color> <color>;
Enter fullscreen mode Exit fullscreen mode

And to define which colour to use, the following values are available:

  • auto => default platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties. (so "gray" in my case)
  • dark => show a dark scrollbar, which can be either a dark variant of scrollbar provided by the platform, or a custom scrollbar with dark colors
  • light => show a light scrollbar, which can be either a light variant of scrollbar provided by the platform, or a custom scrollbar with light colors
  • <color> <color> => the two colours to be applied ("yellow" and "magenta" for example ...)

So no magic value to tell the browser to use colors that will match the general color theme of the site...

And I swear that I have no scrollbar or scrollbar-color property in my CSS and nothing redefined in the "normalize.css" I use.

Since I haven't yet set up a "manifest.json" file, I don't have any "theme_color" property that could have been a good idea to follow.

For now, I'm going to put this in an added bonus of switching from Chrome to Firefox. We don't see any other explanation...


This post was originally published on blog.pagesd.info.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs