GTK native theme window controls

balvik

Possibly a subset of this FR: Native Themes to Match the OS Design but specifically for GTK-based Linux distros. A quick search didn't show up any other similar FR (not obviously at least).

This was asked a while ago, but basically same question. Chromium in Linux (GNOME and other GTK based DEs to be specific) has a beautiful feature where you can use the GTK native window theme, so you get the same window control buttons in Chromium as you do in every other application even with disabled system title bar and borders. It looks really nice.

Vivaldi has the option to either "enable native window" which gives the native window control but at the expense of showing the title bar, or to disable it which give a nice title-bar-less window but with the client side rendered window control. It would be wonderful if Vivaldi could have the best of both worlds in this respect, same as Chromium.

Does any know if/when/how this could be added to Vivaldi?

(BTW Firefox can't do this on Linux either, not even the beta version, v59, which finally can hide the window title bar but, same as Vivaldi, cannot used native the GTK theme for window controls).

Pesala

@balvik said:

Does any know if/when/how this could be added to Vivaldi?

Nobody knows, and nobody would say if they thought they knew. As you can see, there are currently nearly 500 feature requests here, and the entire Vivaldi Team is currently only 43 with one on maternity leave, and not all are developers.

One can only make requests and hope that they get addressed.

lamarca

@pesala I could search on Jira using a consistent argument, which I don't have.

D0J0P

This is really important to me too. Whenever I use Linux, it bugs me a little that Vivaldi doesn't use the GTK theme of my DE.

lamarca

There is a similar request on Jira. It's marked as New Feature.

D0J0P

@balvik said in GTK native theme window controls:

Chromium in Linux (GNOME and other GTK based DEs to be specific) has a beautiful feature where you can use the GTK native window theme, so you get the same window control buttons in Chromium as you do in every other application even with disabled system title bar and borders. It looks really nice.

I just installed Chromium for Linux on Elementary OS(GTK), and they finally have the GTK theme of my DE when it comes to the window buttons, and the header bar(top bar of the application), but not when it comes to the scrollbar. So I hope the request on Jira includes not just the window control buttons, the removal of the system title bar and borders, but also the scrollbar.

Eventually, a skinning of everything in the UI to include the address bar buttons would be taken from the GTK theme, but right now just having the above would be nice.

etcetera

@balvik said in GTK native theme window controls:

This was asked a while ago, but basically same question. Chromium in Linux (GNOME and other GTK based DEs to be specific) has a beautiful feature where you can use the GTK native window theme, so you get the same window control buttons in Chromium as you do in every other application even with disabled system title bar and borders. It looks really nice.

Yes – and I'd like the browser to use the system's color scheme for it's tabs and other controls, too, per default, or at least as an option...

This is perhaps the single aspect of Vivaldi that somewhat annoys me – that it looks like an alien body on most desktops, even on Windows, except on Windows 10 where it nicely blends in.

(BTW Firefox can't do this on Linux either, not even the beta version, v59, which finally can hide the window title bar but, same as Vivaldi, cannot used native the GTK theme for window controls).

The latest Firefox now can (see here).

j800r

Bump post. If there's a rule against necro threads then I apologise but the forums send mixed messages throughout. It doesn't make sense for me to post a new topic requesting exactly the same thing.

The least activity regarding this matter is over a year old and nothing has been done regarding it. Like many other non-FOSS applications out there, it feels as though Linux is treated as a second-class citizen. Yes, Windows does and will always have the largest user-base but here's the thing...

Vivaldi isn't a completely independent browser like Firefox for example. It, like countless others, is based off of the Chromium open source project. Chromium for Linux is built using GTK. For the longest time it has also had the ability to adopt the system's native GTK theme while still supporting it's own independent theme system. Meaning, the code is already there. It should theoretically not be too much of a nightmare to implement said code in Vivaldi.

On Windows 10, the browser feels native. It uses a perfectly integrated and native title bar that devs would likely have either have had to code themselves or port directly over from the Chromium project. The same hasn't been done on the Linux side of things even though it could be and should be much easier because all the tools are free and open source. On Linux, the browser feels alien. The fantastic customization options allow you to colour the browser to fit it's environment but the Window controls will then stick out like a sore thumb. The only way to remedy this is to allow "native window mode", but a standalone title bar on a browser at the close of 2019 is archaic and just as much of an eyesore.

I love the Vivaldi web browser. It's way of handling tab stacking is PERFECT for how I wish to use my browser. However, I find myself forced to use alternatives because of the way they seamlessly integrate with the look of my desktop. Yes, I am aware there are ways to "mod" the browser to have this behaviour but not everybody's a coder.

Please guys, flip the magic switch in the source that enables this essential feature. I honestly feel there's little point in releasing a Linux version if you're not going to go the distance with it. Otherwise perhaps open your source so those in the know can perhaps make this modification to take the load off your limited number of coders?..

wailord

I solve it by this.

#browser.linux .window-buttongroup {
    right: 0px !important;
    top: 0px !important;
}
#browser .window-buttongroup {
    height: 32px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
}
#browser .window-buttongroup button {
    height: 30px !important;
    width: 22px !important;
    margin-left: 2px !important;
 }
 
.sync-and-trash-container {
    margin-right: 80px !important;
}

.native .topmenu .horizontal-menu-pagetitle {
  display: block !important;
}

#browser.native .window-buttongroup {
  display: block !important;
}

#browser.linux .window-buttongroup button.window-minimize svg path,
#browser.linux .window-buttongroup button.window-maximize svg path,
#browser.linux .window-buttongroup button.window-restore svg path,
#browser.linux .window-buttongroup button.window-close svg path {
    display: none;
}
#browser.native.linux .window-buttongroup button.window-minimize {
    background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDQAyDF6cIAAAAGFJREFUSMft0DEOgCAQRFHkJBxEE+LxvYkUzOAJbCwsgESWxmReu8sPWedERAwABMuObz5Y/AEgdqLx2QmffpzztYLlJLlXZltrNhw3R2vxadH3PcGSwJJ6dx+Pz46KyF/cX4ViFFfojUAAAAAASUVORK5CYII=);
}
#browser.linux .window-buttongroup button.window-restore,
#browser.linux .window-buttongroup button.window-maximize {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDQAPVDbQMQAAAHhJREFUSMftkzEOgCAMRYtR3Iin85AusnguWkaX76KLMYCRyNI3FQpv4BciRVG+A8ACsKXn+1Ipx7ic9WyM2XN3zBvpxeRckTwlHQLzyiwbgPG+riLN7RcHFUR8EPFPgeX6RERdi/Gq/xQ1wmszbm/C+u1LK4qS4ABvwbZO5x7asgAAAABJRU5ErkJggg==);
}
#browser.linux .window-buttongroup button.window-close {
    width: 26px !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDQ8OpKn8aAAAAcdJREFUSMftVj1PG0EQfTO3dAm3vppIrvITgMJYfIiaKEQ29M5/QkKpiS2B+AF8GK7Jf0ikIEV0iLvYlHczKUhgfb4vKxFK4dedZnfe7ryZtwfMMcdLg8qCcRxvK9BR0BoBS783/BBQyJCBtfbsr4hGo9HbVOQQoHb5dr1ioo++73+dmSiKxm2QnAJo1DxspEI7QbAY1iZ6vIl+mYHkD+6ZsOL7/reiBex+pIKDDMlNSXI3Fojqp7KTsCs8oBtuIuPxMkDDnEIMH2MuGbXjON6qJFKgm4k1E5ET41EXoAun2KHxqJuk+hlA090g4E4RkXkmotZUZyhaicix8Xg3SXEE0gXD/CFJ9QjQzelTa7uyGaL45xjAq4JlQ+NRBwCSVAeArhfke2hY/3VlM/wDSB2Nbgvu/KRJrmaT5bmtJCJomEviavKkGe3nkQnougYR+tk5Mcy7Sar9CeEVrSTVvvFoLztnDBnUcoYoHp1nuukm28LFMb1qWLteyxkI0gNw585SifDNSQuiXi1nAABr7XcVeg/gfhafU6F3ZT6X295BsBgyYTXfeqYqf8mElSrnrvPwbQm4w9A1Bd5kHr6+tfZi/u8wx/+LX7NLs1lUKeLSAAAAAElFTkSuQmCC);
}
#browser.linux .window-buttongroup button {
    background-color: transparent !important;
    transition: all 0.2s ease;
}
#browser.linux .window-buttongroup button:hover {
    background-color: transparent !important;
}
#browser.linux .window-buttongroup button.window-close:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDREEkD0qqQAAAeRJREFUSMftlbFrE3EUxz/vZ3IgDpJVFydxcjURjGAXu0gpqJVIcwQKxiWTWfwPumWJQktIC6VVIYNLs1RIBFPnbi510TVksNKL/p5Dk3DXXHKnYHXIm+7uvXuf33vf3+/9YGYzO2uT4UM6q+J3LC9jit7OHaT/ADSLcAkA5StIG02+fuEsvdvcxPr/22+LTgX5TdfqV7FmDSUbscw2xq7IivspfkXMJQA6lfxNHN4iXIzVE6WHx71MaeMDwD57P6ZX5FxIaqVyBXE+AqnflKCLejekVPqM960fFmBGFXlpRZz1EURtC7XNiamt7qK2NXhLIc562kvrpPARqFN9fBt8mqgc5Z65S1jbGIfYRq6cfwR8933NDnJMB4E8DHpkfmu1XsuV3UIAZm0jV3YLW6v1GmLuBoU4dz8aZMytca9ZDMD8EGMWQxSfWFHCF3SZsA6fwLj+3H2q3aQ9qE6ADHNEty5iF3eTVlJ986eTIeE7D1+Aa+HCu4WDar0GMGgdoVWd5IioSGlNgow0Oa3ZePz7GKCfb4Krs81Q4QMw3T1V0qtYI6jzMr83OktqW6gcYWQ+XDTbBM4jZrjT2pknG3P/1wjKFLcPOWYBpRcbofQ4ZiFT3D6cNoL+wTXxly++mc3s7O0Xfmj228sDsgkAAAAASUVORK5CYII=) !important;
}
#browser.linux .window-buttongroup button.window-minimize:hover {
    background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDQg5U1XPoAAAAZhJREFUSMftlb1OG0EQx3+zdzW3XBsiUZE3AAqwnKDUiSJkKz28ExKiBltKlAdICOSavEMiJVKUDtkn097NUJiP87EcZ2j9L2dnftrZ+VhYaKG6pOkwz/O3Bj1DtgVWrgP+KZI5dOi9/zoXeDKZrJWqhyCd5nvZuRPZT5Lk16Pg8fiyg+gXYLll1mNTeZemS9mD4OlN7ecc0BuNnLCRJMnvG4OrnpbKwROgAKmaHVUNrloosNfP6INOnuc798AG/Zrn3xa0GR/F9QJg2aoGxJFbBzlruOHZ1OcO7rDOPbDAi0rUaqH6OY6kD3IaaNIsjqRflHYCrFayXgkWb7ZF2SpUP8WRfJyBC1ns3G5R2jHYm1qUht74/6PwZihSYcR3RstAXgXhpQ3iSHogFKUNwbqhJBX5EXrjQcPodovShk3QKUyHwckb55NvoRTbyc6Xve8GiyfoHnDxBOrIiewFJw/Ae//HVD4Ao3mgpvK+uieC7ZamS5kTNpuH4zbH707YqG+2Not+R3E9h20bvKwt+oH3/nTxVy7UXldJsKN5pS/poQAAAABJRU5ErkJggg==);
}
#browser.linux .window-buttongroup button.window-restore:hover,
#browser.linux .window-buttongroup button.window-maximize:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDR4hXKHiIQAAAZdJREFUSMftlbtKA0EYhc8ZSOzccbFTCxtfIRYmeMHaC7h5At9JEB8gEdQH8J5GfAUFC7E1Q6yMOMfCVcbNbIxgmdMszOWb+c/8/7/AWGMVxWGTzrl1AZnAOoHZfMOjBzsGvm2tPf0TuNfrLbx7vw+wMfxeujLkbpIkd7+Cu92XBuhPAEyNGHVXnhtpOtkpBX/eVDcl0H7+rUbmng1RS5Lk/mvAhLPvHnulUDGDmAUHhEq9dBAOmPChAK2UQr9tLYOz4ZxbGwALaEagbxCbMnoD1QJ1CIAitgC8Fhd7mCwC5lIEmsmoT+EIwASACqg2PasitotwAzUGwARmCuHvABCF4xz6pQqoFj0rEJuhLcpzfeDx/kE+5vFTsKA6xM+fvgfpx4ARWKFO4fSYnzHfg+vyOuZxKxLaTz/Lfc9hvh2tvK7rnQFaHZrLVDtefbqasnY5CnbOzQu8BTD9ryVtrX2Q5zaA58jmahlUnpshNJpuaTrZMcQiwMsR2vmFIWrFzjZKo1/zMJmB6gLmCo2+Za09H/8rxxpdH5XputBimUTAAAAAAElFTkSuQmCC);
}

It is based on https://forum.vivaldi.net/topic/18677/solved-changing-the-button-on-linux-to-look-like-windows-10
And remove frame and title bar in KDE setting.

dustiriy

I ended up making a CSS mod that would match my theme:
https://forum.vivaldi.net/topic/43984/close-button-position-kde-plasma/3?_=1584320001039

I used an image to uri converter, so if you'd like to use your own images, simply replace the ones in the code with your own!
Image to URI Converter:
https://websemantics.uk/tools/image-to-data-uri-converter/

Tips:
On my system, Vivaldi is installed in the /opt directory.

linuxcool

I would like to see in the next version of Vivaldi the support of gtk themes on Linux, because other popular browsers support this feature and without it Vivaldi doesn't match the system appearance
Снимок экрана от 2022-06-12 10-35-40.png

allblackt

So, I have achieved a situation where I am happy with the integration of the Vivaldi window in my Linux environment.
How Vivaldi looks like;

How Brave looks like (I am really happy with the integration of Brave)

How I achieved this?
I removed the "tick" for "Use native Window", see below

and in vivaldi://settings/appearance I set as follows:

Using Gnome 45.2 on OpenSUSE Tumbleweed, with the "Mojave-Dark" theme (https://www.gnome-look.org/p/1252328/).

I hope it helps.

DoctorG

@allblackt Thanks for sharing

wojpawlik

#browser.linux .window-buttongroup button {
	backdrop-filter: invert() opacity(15%);
	border-radius: 50%;
	margin-right: 5px;
	width: 20px;
	padding: 0;
}

Maschinami

@wojpawlik said in GTK native theme window controls:

#browser.linux .window-buttongroup button {
	backdrop-filter: invert() opacity(15%);
	border-radius: 50%;
	margin-right: 5px;
	width: 20px;
	padding: 0;
}

This actually fits quite well in Ubuntu 24.04. Thanks!

Captura desde 2024-11-12 21-20-30.png

I also had to add some CSS to move the trash icon a little to the left because somehow it was overlapping with the window control buttons.