Option to be more colorful



  • I really like how Vivaldi changes it's color depending on the active webpage but one thing I would really love is if Vivaldi had the option to change the color on omnibar together with the window (color on the window a slightly darker shade.) Making vivaldi more visually appeasing and colorful.



  • This could be done with a CSS mod, as it's all done through css variables.



  • @lonm Oh I see, I have no experience with CSS or modding it XD so I would not know how to go about doing that.



  • @artex if you take a look in the modding sub forum, the topics pinned should give you a good start. CSS mods are the easiest to start off making



  • @lonm Alright I'll look around and get back to you



  • @lonm this is what I managed to do so far, I'm having trouble with setting a faded kind of color when hovering over the bookmarks and the address buttons
    Code:

    .toolbar.toolbar-addressbar, .button-toolbar {background:var(--colorAccentBg) }
    .addressfield form input.url, .addressfield .pageload, #footer { color: var(--colorAccentBg) !important; } 
    #browser.color-behind-tabs-on .tab-position .tab.active.active {background: var(--colorAccentBg);}
    .bookmark-bar,.bookmark-bar button {background-color: var(--colorAccentBg) !important}
    .tab.active.active {background-color: var(--colorAccentBg) !important}
    

    [modedit] Please use code fences; see http://commonmark.org/help/ and http://commonmark.org/help/tutorial/09-code.html



  • @artex I would suggest checking for hover:

    .bookmark-bar button:hover {
        background: var(--colorAccentBgFaded) !important;
    }
    

    Fun fact: on the forums, if you use triple quotes
    ```
    like this
    ```
    you can add fancy formatting to code like css.



  • @lonm oh thanks!
    I also had no idea about the triple quote thing, I'll try it lol. Thanks for helping me progress a bit further on my project

    .addressfield form input.url, .addressfield .pageload, #footer { color: var(--colorAccentBg) !important; } 
    #browser.color-behind-tabs-on .tab-position .tab.active.active {background: var(--colorAccentBg);}
    .bookmark-bar,.bookmark-bar button {background-color: var(--colorAccentBg) !important}
    .tab.active.active {background-color: var(--colorAccentBg) !important}
    .button-toolbar:hover{background-color:var(--colorAccentBgFaded) !important}
    .bookmark-bar button:hover {
      background: var(--colorAccentBgFaded) !important;
    }


  • This post is deleted!


  • If anyone is interested in this mod go here to get the latest version of it : https://forum.vivaldi.net/topic/25763/accent-color-everywhere-more-colorful-vivaldi/8


Log in to reply
 

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