Webpages scrollbars with var(--color) [Mod/extension hybrid]

Hadden89

Please update the httpcss for Vivaldi 3.6+

You may need this mod too which fix some API broken in Vivaldi 3.7

What is this?

An extension to change the scrollbars following the Vivaldi theme.

An extension..for scrollbars?
Scrollbars are not part of the browser (Vivaldi) but of the webpage, so they need an extension.

Why I can’t use a plain userscript/extension for that?
Actually you can, but it won’t follow Vivaldi theme, as regular extensions can’t access to Vivaldi UI (yet)

How can I test it?

#1 !important prerequisite: Read the guide to edit the browser.html
#2 Download the mod
#3 Look at the readme (instructions) in vscroll folder to see how to install the extension
#4 Follow the steps and you are done.

If you are not comfortable in messing up browser.html, there is also dark scrollbars which only need vivaldi://flags/#extensions-on-chrome-urls (as it work even on chrome:// pages) without any hacks/hooks (it's a simple userscript to load as "unpacked extension").

cherylfahling

I use the minimum amount of extensions to avoid bogging down my browser.

I get a colorful scrollbar with this userscript:

/* Chrome/Firefox/Opera scrollbar [Custom colors] Peach #F9A27B Pink #D9A5B1 #d9a5c3 Purple #ede6fa #a582e6 https://userstyles.org/styles/114748/chrome-firefox-opera-scrollbar-custom-colors */

scrollbar *
scrollbar scrollbarbutton {
visibility:collapse !important;
}

scrollbar scrollbarbutton {
display:none !important;
}
 
scrollbar[orient="vertical"]{background:rgba(255,255,255,0.22) url(https://pbs.twimg.com/media/CKecQtCWoAA8keI.png) !important;
-moz-appearance:none !important;
min-width:20px !important;
max-width:20px !important;
border-radius:0px;
}

scrollbar[orient="vertical"]:hover {
-moz-appearance:none !important;
}

scrollbar thumb[orient="vertical"] {
background:#f9a27b !important;
-moz-appearance:none !important;
border-radius:0px !important;
min-height:25px !important;
min-width:20px !important;
max-width:20px !important;
border:1px !important;
opacity:0.87;
}

scrollbar thumb[orient="vertical"]:hover {
background:#f9a27b !important;
border-radius:0px !important;
border:0px !important;
opacity:1;
}
  
scrollbar[orient="horizontal"] {
background:rgba(255,255,255,0.22) url(https://pbs.twimg.com/media/CKecQtCWoAA8keI.png) !important;
-moz-appearance:none !important;
background-color:transparent !important;
opacity:.75 !important;
min-height:20px !important;
max-height:20px !important;
border-radius:0px;
}
  
scrollbar[orient="horizontal"]:hover {
-moz-appearance:none !important;
background-color:transparent !important;
min-height:20px !important;
max-height:20px !important;
}

scrollbar thumb[orient="horizontal"] {
background:#f9a27b !important;
-moz-appearance:none !important;
border-radius:0px !important;
min-height:25px !important;
max-height:8px !important;
border:1px !important;
margin-left:0px !important;
opacity:0.87;
}
  
scrollbar thumb[orient="horizontal"]:hover {
background:#f9a27b !important;
border-radius:4px !important;
border:0px !important;
opacity:1;
}

scrollcorner {
opacity:0 !important
}
scrollbar scrollcorner:hover {
background:transparent !important
}

::-webkit-scrollbar {
width:20px !important;
}

body::-webkit-scrollbar {
width:20px !important;
}

::-webkit-scrollbar-track {
background:rgba(255,255,255,0.22) !important;
border-radius:0px !important;
-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.3) !important;}

body::-webkit-scrollbar-track {
background:rgba(255,255,255,0.22) url(https://pbs.twimg.com/media/CKecQtCWoAA8keI.png) !important;
}

::-webkit-scrollbar-thumb {
background-color:#f9a27b !important;
background-image:-webkit-linear-gradient(294deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255, 255, 255,.2) 75%,transparent 75%,transparent);
min-height:50px;
border-radius:0px !important;
-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.5) !important;
}

Mine is a dark peach and wider width than normal. I like lots of grabbing room.

Hadden89

@cherylfahling said in *EXPERIMENTAL* Colorful scrollbars:

I use the minimum amount of extensions to avoid bogging down my browser.

It's always a good idea
This is basically a custom.css wrapped in an extension, linked to a js mod: it's more meant for testing/people which like to mess with the UI (expose the vivaldi themes to scrollbars)

fne

EDIT: Never mind. I got it to work but it seems that it only has effect on the browser scrollbars, not the Web sites.

~~Could you please show me where to put this? The scrollbars are very pale for my eyes and this would help me greatly. I do not know how to install it. I mean, which file do I need to add/add for this?~~

Thank you.

Hadden89

@fne Thank you for testing this little experiment

fne

Hadden, I didn't test your extension. I tried Cheryl's CSS code.

But I am about to test yours. Although, no offence but I do not trust any third party extension so I will be opening up your code and read it carefully before doing any testing.

I will report back!

fne

OK, I reviewed the 5 files in the VScroll.zip, the code seem safe without any connection or sending data outside... yey!

Let's see how to install this thing.

fne

I'm sorry, I do not understand the steps to install your extension at all.

For example:

"PREREQUISITES
Changes to do in browser.html

Hook chromecss.js (thanks Sporif for that)
Hook httpcss.js (which is the same, but hook on webpages)
Place an exclamation mark (!) in body section of the browser.html, so <body> should become <!body> to avoiding hooking unwanted resources from there"

Would it be possible for you to provide a step by step 1 2 3 4... guide?

luetage

@fne All you need to know is written here: https://forum.vivaldi.net/topic/10549/modding-vivaldi/
Hooking means you make an entry for the file in browser.html and then place the file in the style folder (if it's css), or alongside browser.html.

Hadden89

@fne
It's always a good idea check 3rd party codes before test, no offence
Sample of browser.html changes.
For the experiment just look for red notes. Other things are other mods
!body is to prevent hooking the js script where it shouldn't (like in other extensions)

Then the flag vivaldi://flags/#extensions-on-chrome-urls

Then you can load the extension (first link) which can read the v-colors hooked by these two js.

fne

@hadden89

Thank you very much for the clear steps.

I did all 3 steps... but when I start the browser... well, I see no changes in the scrollbars. In the code, I tried both /style/ and /style/VScroll.

See pictures:

Hadden89

@fne Try to remove line 22 (empty line)
Unpacked extension (vscroll content) should be under a different path, maybe is not working due its path (I keep under c:\devext\vscroll for example).
You shouldn't put vscroll content (manifest, angrycat, custom.css) in style folder. Only js and custom.css (but not the ones in the extensions) are supposed to be in style folder

fne

@hadden89

Ah wait, I think I'm a bit confused. Beside the two files... where do the rest of the files go? Or do I put the whole zip somewhere?

fne

I got it to work! My bad... forgot to put custom.css in style! :D... but this only affects the browser scrollbars... not any web pages.

Hadden89

@fne
After you put the two js in browser.html and activated the flag, you can load in the extensions the vscroll folder. But it's better to keep in a different path (or at least not on any of \application subfolder)

fne

fne

@hadden89 said in *EXPERIMENTAL* Blink scrollbars with vivaldi current theme:

@fne
...you can load in the extensions the vscroll folder...

How?

Hadden89

@fne I see dark scroll.. have you disabled that from extensions? Are you on 1.16?

fne

@hadden89

I'm totally confused. I need the scrollbars in the Web sites to change.

Not sure what you mean by "load/install" the extension. I thought by altering the files, is what I did?

fne

I'm on 1.15.1147.36