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



  • 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.


    Credits: httpcss.js is based on a nice script made from Sporif


    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").



  • 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.



  • @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 two js modifications: it's more meant for testing/people which like to mess with the UI (expose the vivaldi themes to scrollbars)



  • 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.



  • @fne
    Remember that could hang the vivaldi.exe process startup.
    Don't know if it still doing with newer snapshots and what trigger the issue.
    And don't work with webpanels yet.
    It's quite safe used for internal pages (chromecss.js) while can cause hanging error in webpages (httpcss.js).
    Accent colors and transparent tabs should be disabled in themes to get best results.
    Thank you for testing this little experiment 🙂



  • 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!



  • 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. 🙂



  • 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?



  • @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.



  • @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)

    0_1525265220288_browser2.png

    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.



  • @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:

    0_1525268913622_1.PNG
    0_1525268919751_2.PNG
    0_1525268927139_3.PNG



  • @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



  • @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?



  • 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. 😞



  • @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)



  • 0_1525269790007_4.PNG



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

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

    How?



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



  • @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?



  • I'm on 1.15.1147.36



Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.