[SOLVED] Dark GTK themes with scrollbar steppers?

penyuan · 04-25-2018, 12:00 PM

Hello,

I am running the latest Manjaro GNU/Linux XFCE edition. I've been trying to find a good dark theme for the UI, and so far Adwaita Dark and Material Dark look good.

However, I still can't find a dark theme with scrollbar steppers. Can someone suggest one of the following:

(1) Is there an Adwaita-like dark theme with scrollbar steppers.

OR

(2) Is there a way to tweak the theme so that it has scrollbar stepprs?

I'd like something that would work for GTK 2 and 3, thank you!

cwizardone · 04-25-2018, 12:31 PM

scrollbar stepprs?

penyuan · 04-25-2018, 12:53 PM

Quote:

Originally Posted by cwizardone

scrollbar stepprs?

Yes. They are the arrows on the top and bottom of scrollbars that you can click on to move the page. Most of the themes I've seen forego these buttons but I want them!

teckk · 04-25-2018, 01:01 PM

For gtk2, look in your theme gtkrc for something like:

Code:

GtkScrollbar::has-backward-stepper= 1  
GtkScrollbar::has-forward-stepper= 1
GtkScrollbar::min-slider-length= 30
GtkScrollbar::slider-width= 20
GtkScrollbar::trough-border= 3
GtkScrollbar::activate-slider = FALSE
GtkScrollbar::trough-side-details= 0
GtkScrollbar::stepper-size= 10

For gtk3 look in your gtk.css for something like:

Code:

-GtkScrollbar-has-backward-stepper: true;
-GtkScrollbar-has-forward-stepper: true;

scrollbar slider {
    min-width: 20px;
    min-height: 13px;
    margin: 0px;
    border: 1px solid black;

gtk2/gtk2 themes haven't changed for years. gtk3/gtk3 themes change
every so often. Every time they do a major upgrade you'll likely have to
modify your theme, or download a new one made for the new version.

An easy way to do it is to download a theme set for gtk2/3, and then look through it and modify it line by line to see what changes it makes.
Or just get a theme set already made. gtk3 changes every so often, you'll have to keep up.

penyuan · 04-26-2018, 05:55 AM

Quote:

Originally Posted by teckk

For gtk2, look in your theme gtkrc for something like:

Code:

GtkScrollbar::has-backward-stepper= 1  
GtkScrollbar::has-forward-stepper= 1
GtkScrollbar::min-slider-length= 30
GtkScrollbar::slider-width= 20
GtkScrollbar::trough-border= 3
GtkScrollbar::activate-slider = FALSE
GtkScrollbar::trough-side-details= 0
GtkScrollbar::stepper-size= 10

For gtk3 look in your gtk.css for something like:

Code:

-GtkScrollbar-has-backward-stepper: true;
-GtkScrollbar-has-forward-stepper: true;

scrollbar slider {
    min-width: 20px;
    min-height: 13px;
    margin: 0px;
    border: 1px solid black;

gtk2/gtk2 themes haven't changed for years. gtk3/gtk3 themes change
every so often. Every time they do a major upgrade you'll likely have to
modify your theme, or download a new one made for the new version.

An easy way to do it is to download a theme set for gtk2/3, and then look through it and modify it line by line to see what changes it makes.
Or just get a theme set already made. gtk3 changes every so often, you'll have to keep up.

Thanks @teckk, I was able to find the files for both gtk2 and 3. After applying the changes, it seems that there aren't icons for the arrows because they show up as empty boxes. They work, but it's a bit jarring to see empty boxes. Oh well.

Anyway, thanks again for the informative instructions!

teckk · 04-26-2018, 09:42 AM

Your theme engine does some of that
Look for other items in theme that controls that.
gtk2 is fairly easy to spot and adjust.

Code:

engine "murrine" {
....
sliderstyle = 0 # 0 = nothing added
stepperstyle = 1 # 0 = standard, 1 = integrated stepper handles, 2 = unknown
....
}

Code:

engine "murrine" {
		sliderstyle			= 2 
		contrast 			= 0.6
        .....

Make a backup of your gtkrc first, then
open your gtkrc in a text editor and search for stepper.
Edit what you want, see what it does. And then some themes use
little images for that. gtkrc will have to point to it.

Or look through the half thousand themes that gnome has for gtk
https://www.gnome-look.org/browse/cat/135/ord/latest/
http://www.webhostingsearch.com/arti...gtk-themes.php

You can put a few of them into a directory, rename them what you will
and look at them one by one just by changing your config file

gt2 uses the structure.
~/.gtkrc-2.0

Code:

gtk-icon-theme-name="Tangerine"
gtk-theme-name="gtk2theme"
gtk-font-name = "Sans 14"

~/.themes/<theme_name>/gtk-2.0/gtkrc
There could also be a
~/.themes/<theme_name>/gtk-2.0/assets/
with icons, checkbox's etc. for the theme.

gt3 uses the structure.
~/.config/gtk-3.0/settings.ini

Code:

[Settings]
gtk-theme-name = gtk3theme
gtk-icon-theme-name = Tangerine
gtk-font-name = Sans 14
gtk-application-prefer-dark-theme = true

~/.themes/gtk3theme/gtk-3.0/gtk.css
~/.themes/gtk3theme/gtk-3.0/assets/

Anyway, that's how it works......enjoy.

penyuan · 04-26-2018, 10:16 AM

Quote:

Originally Posted by teckk

Your theme engine does some of that
Look for other items in theme that controls that.
gtk2 is fairly easy to spot and adjust.

Code:

engine "murrine" {
....
sliderstyle = 0 # 0 = nothing added
stepperstyle = 1 # 0 = standard, 1 = integrated stepper handles, 2 = unknown
....
}

Code:

engine "murrine" {
		sliderstyle			= 2 
		contrast 			= 0.6
        .....

Make a backup of your gtkrc first, then
open your gtkrc in a text editor and search for stepper.
Edit what you want, see what it does. And then some themes use
little images for that. gtkrc will have to point to it.

Or look through the half thousand themes that gnome has for gtk
https://www.gnome-look.org/browse/cat/135/ord/latest/
http://www.webhostingsearch.com/arti...gtk-themes.php

You can put a few of them into a directory, rename them what you will
and look at them one by one just by changing your config file

gt2 uses the structure.
~/.gtkrc-2.0

Code:

gtk-icon-theme-name="Tangerine"
gtk-theme-name="gtk2theme"
gtk-font-name = "Sans 14"

~/.themes/<theme_name>/gtk-2.0/gtkrc
There could also be a
~/.themes/<theme_name>/gtk-2.0/assets/
with icons, checkbox's etc. for the theme.

gt3 uses the structure.
~/.config/gtk-3.0/settings.ini

Code:

[Settings]
gtk-theme-name = gtk3theme
gtk-icon-theme-name = Tangerine
gtk-font-name = Sans 14
gtk-application-prefer-dark-theme = true

~/.themes/gtk3theme/gtk-3.0/gtk.css
~/.themes/gtk3theme/gtk-3.0/assets/

Anyway, that's how it works......enjoy.

I had no idea you can do this, I've always relied on my package manager to find themes, which is quite limited. Really glad there's a way to set up those config files with custom/downloaded themes. Huge thanks to you for your help!