Responsive colors everywhere!

[mavanmanen]

I like the way Vivaldi adjusts the tab or header bar color to the page you're on but I thought it could go a step further, so I did. This requires you turn on "Accent color from active page", "Apply accent color to window" and "Transparent tabs" under theme preferences. I've only really tested this with the way my browser is configuration but I'm sure if anything is wrong with using it with yours and you can't figure out how to fix it, ask me and I'll help. [img]http://i.imgur.com/YwOPEN4.png[/img] [code] #main > div.toolbar.toolbar-addressbar::after { display: none !important; } #switch > button.webviewbtn > img, .tab-position .tab.active .tab-header .favicon { background-color: transparent !important; } .win10 .vivaldi, #browser.win.win10.tabs-top #header #titlebar .window-buttongroup button { height: 30px !important; } .linux.normal .topmenu+#tabs-container.top, .win10.normal #tabs-container.top, .win.normal .topmenu+#tabs-container.top { padding-top: 0 !important; } .tabs-bottom .tab-position .tab, .tabs-top .tab-position .tab { margin-right: 0 !important; } #panels-container { border: none !important; } .color-behind-tabs-on .tab-position .tab.active { background-color: rgba(18, 19, 20, 0.25) !important; color: white !important; } .tabs-top.color-behind-tabs-on #tabs-container { background-image: none !important; } .toolbar.toolbar-addressbar svg, .button-addressfield.bookmark svg .bookmark-outline, #tabs-container > div.resize > div.tab-strip > div > div > div.tab-header > span.close > svg, #switch svg, #footer svg, #footer svg g { fill: var(--colorAccentBg) !important; } .addressfield form input.url, .addressfield .pageload, #footer { color: var(--colorAccentBg) !important; } .color-behind-tabs-on .addressfield.focused, .color-behind-tabs-on .searchfield.focused { box-shadow: 0 0 0 1px var(--colorAccentBg) inset !important; border-color: var(--colorAccentBg) !important; } #browser input[type=range]::-webkit-slider-thumb { border: 2px solid var(--colorAccentBg) !important; background-color: 2px solid var(--colorAccentBg) !important; } [/code]

[Hadden89]

Nice to have more colored things
How to avoid in urlbar area for text and buttons?
They tends to be not visible on dark themes,
maybe with a glow with opposite color…
It'll enhance a lot the readbility of text.

Ok, I made a little change for myself for using without accent on windows and transparent tab.

I removed.toolbar.toolbar-addressbar svgand```
.addressfield form input.url,
.addressfield .pageload,
#footer {
color: var(--colorAccentBg) !important;
}

Thanks for sharing ;)