Is there a way to style or theme scrollbars?



  • I used Inspect to narrow it down to several pseudo elements under #webview-container but playing around with the different options or adding them to my personal css didn’t do anything. I just want to change the colors around to suit my dark theme and maybe get rid of -webkit-scrollbar-button completely since I don’t use those. Has anyone had any luck with this?


  • Moderator

    Are you on Vivaldi version 1.2 or 1.3?



  • Vivaldi 1.3.551.13 (Developer Build) (32-bit)
    Revision 331825079e140af9b3ca54103e3ddd3996c5233a


  • Moderator

    In that case, unless you want to hack CSS, you have access to the latest built-in mods. More will be along.



  • I’m fine with writing my own CSS, I just need help finding the right selector. I know it’s:

    #webview-container >

    But I’m lost after that.

    -webkit-scrollbar-button was suggested by the Inspector, but I tried that and it didn’t work. I also tried #webview-container > scrollbar-button as a variant, but no dice.


  • Moderator

    Then you probably want to join the discussion here: https://vivaldi.net/forum/all/3073-vivaldi-ui-customisations

    That's your best bet.



  • Cross-posted. Wish me luck! :)



  • So on a hunch I tried putting my CSS in Stylebot instead of the Vivaldi style folder, and… it worked!!

    My code (designed for my custom dark theme, black background, dark grey scrollbar, no arrows):

    ::-webkit-scrollbar-button,::-webkit-scrollbar-track{display:none}
    ::-webkit-scrollbar-thumb{background-color:#555}
    ::-webkit-scrollbar{background-color:#000}
    
    ```For the URL I just wrote: ** (Two asterisks applies the style to any website in Stylebot.)
    
    But could someone please explain **why** this CSS only works within Stylebot? How come when I place this same exact code in my custom CSS in my Vivaldi folder, nothing works?


  • The scrollbar is part of the webpage, not part of Vivaldi's UI. (btw, sorry for crossposting)



  • Weird that it comes up under #webview-container, then. It’s a sibling of tabs and panels and a parent of the status bar!

    Thanks for the info. :)



  • IDK, that may be the scrollbar of the UI (hidden)? (Vivaldi's UI uses the same rendering engine as the webpage itself)


Log in to reply
 

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