How to get traditional scrollbars in GTK 2 and 3 apps in Debian 10?

Question

I am using XFce4 on Debian 10.

When opening GTK 2 apps, the scroll bars appear normal, with a large bar and arrows at the top and bottom.

When opening GTK 3 apps, the scroll bars are thin, difficult to click and see, have no arrows anywhere, and sometimes completely disappear.

If I choose a theme like Adwaita or Breeze, then GTK 2 apps match GTK 3 apps, but using the difficult-to-use-and-see scroll bars.

Is there any way to give both GTK 2 and GTK 3 apps a more traditional scroll bar with the larger buttons?

Answer 1

GTK+2

I haven’t had any problems with scrollbars in GTK+2. Perhaps the theme you use goes to extra lengths to “damage” them. Try switching to a different theme; I use GreenMotif for example.

For extra less sillyness, install the xcursor-themes Debian package and run: sudo update-alternatives --set x-cursor-theme /etc/X11/cursors/core.theme

Qt5

This seems to be easy as well. Make sure it does not use GTK engines or theming. I personally have installed the qt5-style-plugin-motif Debian package and use that.

You might have to set kcminputrc_mouse_cursortheme=core in ~/.config/startupconfig and possibly other places. The GUI settings dialogues tend to not show the core “theme” as an option; you can choose any other cursor theme, then search through your dotfiles for occurrences and change them all (this is what I did).

GTK+3

Styling this thing is a neverending PITA. I’ve documented a way to make GTK+3 a little less unbearable by fixing scrolling; I’ll inline most of the answer below, using a theme that looks pretty much like Xfce4 “basic” theme, which seems to have been used on Debian stretch by default. I suggest to still visit that snippet, as it has a Windows® 95-like alternative and more background info, etc. and, most importantly, screenshots! ☺

~/.config/gtk-3.0/gtk2xfce4basic.css

Create this file with the following content (or download it raw from the above link):

/*
 * to install, copy to ~/.config/gtk-3.0/gtk2xfce4basic.css
 * and append the line…
 *
 *  @import 'gtk2xfce4basic.css';
 *
 * to ~/.config/gtk-3.0/gtk.css
 */

/* somewhat unfuck GTK+3, by mirabilos, Ⓕ CC0 — theme Xfce basic */

/*-
 * append to ~/.xsessionrc or so, ~/.pam_environment or ~/.profile maybe
 *
 * GTK_OVERLAY_SCROLLING=0; export GTK_OVERLAY_SCROLLING
 *
 * merge into ~/.config/gtk-3.0/settings.ini
 *
 * [Settings]
 * gtk-xft-rgba=none
 * gtk-cursor-theme-name=core
 * gtk-enable-animations=0
 * gtk-primary-button-warps-slider=false
 *
 * Firefox about:config set: pref("widget.non-native-theme.enabled", false);
 * and consider a userContent.css to disable website-styled scroll“bar”s (see
 * https://edugit.org/-/snippets/31 for how).
 *
 * Try: GTK_DEBUG=interactive gtk3-demo
 */

/* remove dotted lines from GTK+3 applications */
.undershoot.top, .undershoot.right, .undershoot.bottom, .undershoot.left {
    background-image:none;
}
undershoot.top, undershoot.right, undershoot.bottom, undershoot.left {
    background-image:none;
}

/* force scrollbar arrows */
.scrollbar, scrollbar {
    -GtkScrollbar-has-backward-stepper:true !important;
    -GtkScrollbar-has-forward-stepper:true !important;
}

/* GTK+2-style scrollbar with Xfce basic theme colours {{{ */

scrollbar.horizontal, scrollbar.horizontal content,
scrollbar.horizontal button.up, scrollbar.horizontal button.up:disabled,
scrollbar.horizontal trough, scrollbar.horizontal slider,
scrollbar.horizontal button.down, scrollbar.horizontal button.down:disabled,
scrollbar.vertical, scrollbar.vertical content,
scrollbar.vertical button.up, scrollbar.vertical button.up:disabled,
scrollbar.vertical trough, scrollbar.vertical slider,
scrollbar.vertical button.down, scrollbar.vertical button.down:disabled {
    margin:0px;
    outline:0px;
    -gtk-outline-radius:0;
    border-radius:0px;
    border:0px;
    box-shadow:none;
    padding:0px;
    background-color:inherit;
}

scrollbar.horizontal button.up, scrollbar.horizontal button.up:disabled,
scrollbar.horizontal button.down, scrollbar.horizontal button.down:disabled,
scrollbar.vertical button.up, scrollbar.vertical button.up:disabled,
scrollbar.vertical button.down, scrollbar.vertical button.down:disabled {
    -gtk-icon-source:none;
}

scrollbar.horizontal {
    min-height:14px;
    box-shadow:
        inset 1px 1px 0 0 #8C8982,
        inset -1px -1px 0 0 #FBFBFA;
    padding:1px;
    background-color:#C4C2BD;
}

scrollbar.horizontal contents {
    min-height:14px;
}

scrollbar.horizontal button.up {
    min-width:11px;
    background:
        linear-gradient(to top right,    transparent 49.5%, #000000 50%) 5px 6px / 3px 3px,
        linear-gradient(to bottom right, transparent 49.5%, #000000 50%) 5px 4px / 3px 3px,
        linear-gradient(to top right,    transparent 49.5%, #434341 50%) 4px 6px / 4px 4px,
        linear-gradient(to bottom right, transparent 49.5%, #434341 50%) 4px 3px / 4px 4px;
    background-repeat:no-repeat;
}

scrollbar.horizontal button.up:disabled {
    min-width:11px;
    background:
        linear-gradient(to top right,    transparent 49.5%, #757575 50%) 5px 6px / 3px 3px,
        linear-gradient(to bottom right, transparent 49.5%, #757575 50%) 5px 4px / 3px 3px,
        linear-gradient(to top right,    transparent 49.5%, #9D9D9D 50%) 4px 6px / 4px 4px,
        linear-gradient(to bottom right, transparent 49.5%, #959493 50%) 4px 3px / 4px 4px,
        linear-gradient(to top right,    transparent 49.5%, #FFFFFF 50%) 6px 7px / 3px 3px,
        linear-gradient(to bottom right, transparent 49.5%, #FFFFFF 50%) 6px 5px / 3px 3px,
        linear-gradient(to top right,    transparent 49.5%, #F0EFED 50%) 5px 7px / 4px 4px,
        linear-gradient(to bottom right, transparent 49.5%, #F0EFED 50%) 5px 4px / 4px 4px;
    background-repeat:no-repeat;
}

scrollbar.horizontal trough {
    min-height:14px;
}

scrollbar.horizontal slider {
    min-width:18px;
}

scrollbar.horizontal button.down {
    min-width:11px;
    background:
        linear-gradient(to bottom left, transparent 49.5%, #000000 50%) 5px 4px / 3px 3px,
        linear-gradient(to top left,    transparent 49.5%, #000000 50%) 5px 6px / 3px 3px,
        linear-gradient(to bottom left, transparent 49.5%, #434341 50%) 5px 3px / 4px 4px,
        linear-gradient(to top left,    transparent 49.5%, #434341 50%) 5px 6px / 4px 4px;
    background-repeat:no-repeat;
}

scrollbar.horizontal button.down:disabled {
    min-width:11px;
    background:
        linear-gradient(to bottom left, transparent 49.5%, #757575 50%) 5px 4px / 3px 3px,
        linear-gradient(to top left,    transparent 49.5%, #757575 50%) 5px 6px / 3px 3px,
        linear-gradient(to bottom left, transparent 49.5%, #959493 50%) 5px 3px / 4px 4px,
        linear-gradient(to top left,    transparent 49.5%, #9D9D9D 50%) 5px 6px / 4px 4px,
        linear-gradient(to bottom left, transparent 49.5%, #FFFFFF 50%) 6px 5px / 3px 3px,
        linear-gradient(to top left,    transparent 49.5%, #FFFFFF 50%) 6px 7px / 3px 3px,
        linear-gradient(to bottom left, transparent 49.5%, #F0EFED 50%) 6px 4px / 4px 4px,
        linear-gradient(to top left,    transparent 49.5%, #F0EFED 50%) 6px 7px / 4px 4px;
    background-repeat:no-repeat;
}

scrollbar.horizontal button.up, scrollbar.horizontal button.up:disabled,
scrollbar.horizontal slider,
scrollbar.horizontal button.down, scrollbar.horizontal button.down:disabled {
    min-height:11px;
    box-shadow:
        inset -2px -2px 0 0 #9E9A91,
        inset 1px 1px 0 0 #FFFFFF,
        inset -1px -1px 0 0 #000000;
    /*      ↑   →   ↓   ←   */
    padding:1px 2px 2px 1px;
    background-color:#DCDAD5;
}

scrollbar.vertical {
    min-width:14px;
    box-shadow:
        inset 1px 1px 0 0 #8C8982,
        inset -1px -1px 0 0 #FBFBFA;
    padding:1px;
    background-color:#C4C2BD;
}

scrollbar.vertical contents {
    min-width:14px;
}

scrollbar.vertical button.up {
    min-height:11px;
    background:
        linear-gradient(to bottom right, transparent 49.5%, #000000 50%) 4px 5px / 3px 3px,
        linear-gradient(to bottom left,  transparent 49.5%, #000000 50%) 6px 5px / 3px 3px,
        linear-gradient(to bottom right, transparent 49.5%, #434341 50%) 3px 4px / 4px 4px,
        linear-gradient(to bottom left,  transparent 49.5%, #434341 50%) 6px 4px / 4px 4px;
    background-repeat:no-repeat;
}

scrollbar.vertical button.up:disabled {
    min-height:11px;
    background:
        linear-gradient(to bottom right, transparent 49.5%, #757575 50%) 4px 5px / 3px 3px,
        linear-gradient(to bottom left,  transparent 49.5%, #757575 50%) 6px 5px / 3px 3px,
        linear-gradient(to bottom right, transparent 49.5%, #959493 50%) 3px 4px / 4px 4px,
        linear-gradient(to bottom left,  transparent 49.5%, #9D9D9D 50%) 6px 4px / 4px 4px,
        linear-gradient(to bottom right, transparent 49.5%, #FFFFFF 50%) 5px 6px / 3px 3px,
        linear-gradient(to bottom left,  transparent 49.5%, #FFFFFF 50%) 7px 6px / 3px 3px,
        linear-gradient(to bottom right, transparent 49.5%, #F0EFED 50%) 4px 5px / 4px 4px,
        linear-gradient(to bottom left,  transparent 49.5%, #F0EFED 50%) 7px 5px / 4px 4px;
    background-repeat:no-repeat;
}

scrollbar.vertical trough {
    min-width:14px;
}

scrollbar.vertical slider {
    min-height:18px;
}

scrollbar.vertical button.down {
    min-height:11px;
    background:
        linear-gradient(to top left,  transparent 49.5%, #000000 50%) 6px 5px / 3px 3px,
        linear-gradient(to top right, transparent 49.5%, #000000 50%) 4px 5px / 3px 3px,
        linear-gradient(to top left,  transparent 49.5%, #434341 50%) 6px 5px / 4px 4px,
        linear-gradient(to top right, transparent 49.5%, #434341 50%) 3px 5px / 4px 4px;
    background-repeat:no-repeat;
}

scrollbar.vertical button.down:disabled {
    min-height:11px;
    background:
        linear-gradient(to top left,  transparent 49.5%, #757575 50%) 6px 5px / 3px 3px,
        linear-gradient(to top right, transparent 49.5%, #757575 50%) 4px 5px / 3px 3px,
        linear-gradient(to top left,  transparent 49.5%, #9D9D9D 50%) 6px 5px / 4px 4px,
        linear-gradient(to top right, transparent 49.5%, #959493 50%) 3px 5px / 4px 4px,
        linear-gradient(to top left,  transparent 49.5%, #FFFFFF 50%) 7px 6px / 3px 3px,
        linear-gradient(to top right, transparent 49.5%, #FFFFFF 50%) 5px 6px / 3px 3px,
        linear-gradient(to top left,  transparent 49.5%, #F0EFED 50%) 7px 6px / 4px 4px,
        linear-gradient(to top right, transparent 49.5%, #F0EFED 50%) 4px 6px / 4px 4px;
    background-repeat:no-repeat;
}

scrollbar.vertical button.up, scrollbar.vertical button.up:disabled,
scrollbar.vertical slider,
scrollbar.vertical button.down, scrollbar.vertical button.down:disabled {
    min-width:11px;
    box-shadow:
        inset -2px -2px 0 0 #9E9A91,
        inset 1px 1px 0 0 #FFFFFF,
        inset -1px -1px 0 0 #000000;
    /*      ↑   →   ↓   ←   */
    padding:1px 2px 2px 1px;
    background-color:#DCDAD5;
}

/* }}} end of GTK+2-style scrollbar */

~/.config/gtk-3.0/gtk.css

Add the following line:

@import 'gtk2xfce4basic.css';

~/.config/gtk-3.0/settings.ini

Add the following (or otherwise suitable) settings to the [Settings] section:

gtk-xft-rgba=none     
gtk-cursor-theme-name=core   
gtk-enable-animations=0   
gtk-primary-button-warps-slider=false     

environment

Ensure that GTK_OVERLAY_SCROLLING=0 is set for your X11 session. (This can usually be done by placing it into ~/.pam_environment or the follwing into ~/.profile or ~/.xinitrc or ~/.xsessionrc or so, depending on your OS, init system, and how you start X11; ~/.xsessionrc is usually the easiest one on Debian and derivatives.)

GTK_OVERLAY_SCROLLING=0
export GTK_OVERLAY_SCROLLING

Firefox

Recent versions of this use GTK+3 and insist on drawing their own scrollbars. The above fix is therefore insufficient, and you need to add extra configuration to Firefox, which then only gets close, but every bit helps…

about:config

pref("widget.non-native-theme.enabled", false);

userContent.css

Place the following lines into your userContent.css file:

* {
    scrollbar-color:unset !important;
    scrollbar-width:unset !important;
}

If you do not have such a file (at all, or working) yet, you’ll need to enable it first. This will give you usable scrollbars on Twitter, StackExchange, etc. ☻