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
-