chromium: change scrollbar color

Question

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?

Answer 1

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;

Answer 2

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.