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;
    }


  • Finally finished the my Colorful Vivaldi mod

    
    .toolbar.toolbar-addressbar, .button-toolbar {background:var(--colorAccentBg) }
    
    #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(--colorAccentBgDarker) !important;
    }
    
    .tree-item:hover{  background: var(--colorAccentBgDarker) !important;}
    .panel {background:var(--colorAccentBg) !important; }
    .sortselector-button {background:var(--colorAccentBg) !important; }
    .sortselector, .sortselector-dropdown {background:var(--colorAccentBg) !important; }
    .notes-cardwrapper, .downloads-cardwrapper, .download-editor,.addbookmark-cardwrapper .upper-half, .notes-cardwrapper .upper-half, .addbookmark-cardwrapper .lower-half, .notes-cardwrapper .lower-half,.toolbar.icons button + button, .toolbar.text button + button,.toolbar.icons button:first-of-type,#panels-container.left #switch .addwebpanel-wrapper .addwebpanelcallout{  background: var(--colorAccentBg) !important;}
    .notes-add-area-capture:hover,.notes-toggle-md:hover,.button-toolbar.add:hover,.notes-add-attachment:hover,.notes-editor .note,.panel#downloads input.title, .cardview input[type=text],.manager-editor .fieldset > input[type=text], .manager-editor .fieldset > textarea, .manager-editor .fieldset > select,.panel > header input,.sortselector-button:hover,#browser .sortselector .sortselector-dropdown:hover,.toolbar.icons button + button:hover, .toolbar.text button + button:hover, .toolbar.icons button:first-of-type:hover {  background: var(--colorAccentBgDarker) !important;}
    .notes-new-folder, #switch .addwebpanel-wrapper .addwebpanelcallout .add:hover {  background: var(--colorAccentBgDarker) !important;}
    .tree-row[data-selected] {  background: var(--colorAccentBgDarker) !important;}
     #switch button:focus, #footer button:open{  background: var(--colorAccentBgDarker) !important;}
    .notes-add-area-capture,.notes-add-attachment, .notes-toggle-md,.note-new, .button-toolbar.add {  background: var(--colorAccentBg) !important;}
    #footer, #panels-container.left, #switch {  background: var(--colorAccentBg) !important;}
    #footer button:hover, #switch button:hover, #switch .addwebpanel-wrapper .addwebpanelcallout .add:active {background: var(--colorAccentBgFaded) !important;}
    #webpage-capture-button {  background: var(--colorAccentBg) !important;}
    #webpage-capture-button:hover,#switch button.active {  background: var(--colorAccentBgDarker) !important;}
    #webpage-capture-button:active,.notes-add-area-capture:active,.notes-toggle-md:active,.button-toolbar.add:active,.notes-add-attachment:active,.notes-editor .note,.panel#downloads input.title, .cardview input[type=text],.manager-editor .fieldset > input[type=text], .manager-editor .fieldset > textarea, .manager-editor .fieldset > select,.sortselector-button:active,#browser .sortselector .sortselector-dropdown:active,.toolbar.icons button + button:active, .toolbar.text button + button:active, .toolbar.icons button:first-of-type:active,.button-toolbar-small:active {  background: var(--colorAccentBgFaded) !important;}
    #footer .callout,.pageactions .capture-container .active, .imageactions .capture-container .active, .captureactions .capture-container .active, .dialog-footer,.dialog-javascript{  background: var(--colorAccentBgDarker) !important;}
    .pageactions header, .imageactions header, .captureactions header,.find-in-page, #switch button:focus:not(.active) {  background: var(--colorAccentBg) !important;}
    .toolbar .button-toolbar{  background: var(--colorAccentBg) !important;}
    


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