3

Is it possible to change color of the scrollbar in Chromium browser, without having to install yet another extension?

Perhaps by modifying some css file somewhere?

I am using chromium 83 on Debian 10.

I know how to achieve this in Firefox. I just added following lines to userContent.css

html,body{
    scrollbar-color: #B63C29 #555555 !important;
}

Is there something similar I can do to achieve same for Chromium?

UPDATE:

I have tried following solution, but it has no effect:

  1. I have created directory ~/.config/chromium/Default/User StyleSheets/
  2. created file Custom.css inside it
  3. added following code to test it:
    .scrollable-element {
      scrollbar-color: red yellow;
    }

Nothing. No effect.

Can somebody please show me simple working example how to change the scrollbar to red?

2 Answers 2

2
+100

If nothing else works you may need to use some kind of extension after all. Based on this issue and this answer and this one I did that:

$ mkdir CustomCSS && cd CustomCSS
$ cat > manifest.json << EOF
 
{
    "name": "My Style Sheet",
    "content_scripts": [
        {
          "matches": ["*://*/*"],
          "css": ["Custom.css"]
        }
    ],
    "version": "1.0.0",
    "description": "User StyleSheet replacement",
    "manifest_version": 2
}
EOF
$ cat > Custom.css << EOF
 
::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: yellow;
}
 
::-webkit-scrollbar-thumb {
    background: red;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
 
::-webkit-scrollbar-corner {
    background: #000;
}
EOF

In chrome://extensions with developer mode on: Load unpacked extension -> choose path/to/CustomCSS

And that's it. It works. Red scroll bar on yellow background.

Checking chrome://memory reveals it uses ~1.8MiB of memory.

--

Ed: If you want to override websites' styles you may try to use !important rule

background: red !important;
4
  • - thank you. after loading the extension, the scrollbar changes shape, from square corners to round, but I only see my custom color on few websites. Others seem to override the color. May 27, 2021 at 1:07
  • installing this as extension worked, but there is one small problem: This "extension" now appears as icon in the "extension pane" in the top right corner. I really don't want yet another useless icon there. Is there any way to hide it? May 31, 2021 at 1:43
  • My chrome is old and doesn't have such stuff, so I don't know what to tell you. In Firefox there is easy option to customize menu, maybe there is something like that in chrome.
    – tansy
    May 31, 2021 at 16:07
  • It's strange as the extension doesn't do anything with menu explicitly.
    – tansy
    May 31, 2021 at 16:58
-4

Yes, it is possible.

!ddg chromium scrollbar color

How can I change the scroll bar in Google Chrome to have different colors?

How to change the scrollbar style and color in Chrome

Style the scrollbar with css in Google Chrome (-webkit)

And yet another one found following above links:

Google Chrome or Chromium

Google Chrome provides a user stylesheet that you can modify in the configuration folder or the user profile folder. In Chromium/Linux, it is located at ~/.config/chromium/Default/User StyleSheets/Custom.css. For Google Chrome it is at ~/.config/google-chrome/Default/User StyleSheets/. In MS Windows, the location is %AppData%\Local\Google\Chrome\User Data\Default\User StyleSheets. Depending on the browser version and OS this could vary but check the configuration folder on your system under the folder /Default/User StyleSheets/. Also If there is no file named Custom.css then you will need to create one inside the folder User StyleSheets/.

how to use a custom or user stylesheet (css) in a web browser.

7
  • I don't understand why I get negatives. This question has been answered on other sites but can not be flagged as duplicate because they're not unix.SE.
    – tansy
    May 24, 2021 at 9:44
  • none of these links answer my question May 25, 2021 at 2:06
  • Yes, they do. You need to read them. And formally, I have answered your question in one, simple sentence.
    – tansy
    May 25, 2021 at 16:38
  • I have created directory ~/.config/chromium/Default/User StyleSheets/ and inside created file Custom.css. Added .scrollable-element { scrollbar-color: red yellow; }, but no effect. Are you sure this should work? The answers provided all seem to require installing some kind of extension. May 26, 2021 at 1:50
  • 1
    Also, it may not work though as apparently chromium removed the concept of user stylesheets some time ago, which I didn't know till now. Although there was an effort to reintroduce it, it doesn't seem to work as expected. So you might need to use some kind of extension. I read about such uncompressed extension but lost a sight of site.
    – tansy
    May 26, 2021 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.