Fixing the Breeze Dark theme for gtk3 apps

It has been now about two weeks that I switched to KDE/Plasma on all my desktops, and to my big surprise, that went much more smooth than I thought. There are only a few glitches with respect to the gtk3 part of the Breeze Dark theme I am using, which needed fixup.

Tab distinction

As I wrote already in a previous blog, the active tab in all kinds of terminal emulators, but in fact everything that uses the gtk3 notebook widget, is not distinguishable from other tabs. It turned out that this fix is a bit convoluted, but still possible, see the linked blog. Just for completeness, here is the CSS code I use in ~/.config/gtk-3.0/gtk.css:

notebook tab {
    /* background-color: #222; */
    padding: 0.4em;
    border: 0;
    border-color: #444;
    border-style: solid;
    border-width: 1px;
}

notebook tab:checked {
    /* background-color: #000; */
    background-image: none;
    border-color: #76C802;
}

notebook tab:checked label {
    color: #76C802;
    font-weight: 500;
}

notebook tab button {
    padding: 0;
    background-color: transparent;
    color: #ccc;
}

notebook tab button:hover {
  border: 0;
  background-image: none;
  border-color: #444;
  border-style: solid;
  border-width: 1px;
}

Scroll bars

Another of the disturbing properties of the Breeze theme is the width-changing scroll bar. While not hovered upon, it is rather small, but when the mouse moves over it it expands its width. Now that might sound like a flashy cool idea, but in fact it is nothing but a PITA: When used with a terminal emulator, the result is that the line length changes when the mouse moves over the vertical scroll bar, and thus suddenly the layout (line break) changes for instant, which is really really disturbing. I can’t imagine why developers ever come up with such a stupid idea. Anyway, the fix is not that difficult again, simply put the following into your ~/.config/gtk-3.0/gtk.css (adjusting the width to your liking) and all will be fine:

.scrollbar.vertical slider, scrollbar.vertical slider {
        min-width: 10px;
}

Not that bad, right?

Other than this I haven’t found any disturbing issue with using the Breeze theme with gtk3 (and gtk2) apps!

Hope that helps