Adding translucency/macOS desktop tinting to tab bar. Possible?
-
Hi, I'd like to make the tab bar slightly translucent so that content behind the Vivaldi window is visible in blurred form, similar to how desktop tinting on macOS works. As a macOS user, I feel this might make Vivaldi feel more 'native'.
I'm no CSS expert. I've tried a bunch of macOS-oriented CSS mods available on Github. I've tried overriding the styling of the tab bar elements. As a last resort, I even tried riffing on it with Claude/ChatGPT. Pure trial and error, just to see what is and isn't possible. So far, no luck.
Can anyone comment whether this is even possible at all? FWIW, Arc's sidebar applies desktop tinting, which gives me hope that maybe this is something that all Chromium-based browsers can manage.
Modding experts, what do you think?
-
@lemontheme You can’t make Vivaldi’s background opaque. Vivaldi’s background is the the theme’s background image. Vivaldi’s UI elements like the panel and the tabs can have transparency, then the background image will become visible. Maybe set the Vivaldi wallpaper to mirror your desktop wallpaper.
-
You can’t make Vivaldi’s background opaque
Do you maybe mean 'transparent' instead? Opaque (as in 'not letting light through') is how I'd describe the default appearance.
I suppose I should rename this post as 'How do I set a transparent background?'
-
@lemontheme Yep, I always mix that up because of CSS opacity. 1 is opaque, 0 is transparent. And as said, you can’t get a transparent background. At least you can’t do it with CSS. Vivaldi is not an Electron app, but comparable to Electron and there are ways to get transparency for them. For example see this topic on stackoverflow ☛ https://stackoverflow.com/questions/55785565/how-do-i-blur-an-electron-browserwindow-with-transparency. Anyway, don’t think anyone has tried that yet with Vivaldi. I’m not on macOS anymore and I don’t know whether it can be applied to Vivaldi.
-
@luetage I hear you, 'opaque' is one of those words that always takes an extra little bit of parsing effort, haha.
So window transparency can't be achieved with CSS alone. It probably requires changes in the browser code itself, if the Chromium APIs allow it, that is. Too bad... Oh well, good to know I can stop searching.
Thanks for your help!
