Scrollbar with color gradient

General Help
22

I wondered if it is enough to edit gtk 4.0 gtk-dark.css to make a test with the scrollbar in Nautilus in dark mode of dark purple theme.

23

It should - the gtk.css in your home gtk folder takes the highest priority.
If you put properties in it, that is what will be displayed whether you use Zorin dark purple, orange, grey...

24

It didn't work even after changing all four files. I've tried it with grey and purple. The scrollbar was normal grey now, no purple. Perhaps I made a mistake, or I should use rgba values instead of hexcodes and add transparency.

I need a break now. Thank you for your help.

25

I have one more question about conflicts:

Do conflicts really occur even if you set the lines in ~/.config? I thought that values set here would override the themes if different values for the same property were set there.

So far, if I remember right, I’ve only encountered GTK error messages when I had set different values for the same property within a single file, for example, by adding my own lines to the original theme in /usr without first commenting out the (same) property/class.

26

In fact for gtk3 there are different keys add to .config/gtk-3.0/gtk.css (my own tweak for example)

/* GTK3 */
scrollbar.vertical > contents > trough > slider {
  background-image: linear-gradient(to top, #935cd8, #6a58f0);
}
scrollbar.horizontal > contents > trough > slider {
  background-image: linear-gradient(to right, #6a58f0, #935cd8);
}
scrollbar.vertical > contents > trough > slider:active,
scrollbar.vertical > contents > trough > slider:hover {
  background-image: linear-gradient(to top, #935cd8, #6a58f0);
}
scrollbar.horizontal > contents > trough > slider:active,
scrollbar.horizontal > contents > trough > slider:hover {
  background-image: linear-gradient(to right, #6a58f0, #935cd8);
}

In GTK3, the 'range' node does not exist

1 Like
27

Thank you very much! I'll try it.
I hadn't even checked the Lavanda theme to see if different lines were set in gtk-3.0 than in gtk-4.0. I was going to do that when it wasn't working and it seemed to me that it worked in GTK4 apps, but not in GTK 3.0, but then I completely forgot about it.

1 Like
28

If you want to take priority over the theme just add !important but basically like @Aravisian said you have this priority, maybe some apps will not apply and you will find out how to bypass them

29

It's working now for the most apps! :grinning_face: Great that you figured out what the problem was!

At which position of the lines do I have to add the !important?
Did you get the scrollbar to work with brave-browser?

30

Example

background-image: linear-gradient(to right, #6a58f0, #935cd8) !important;

I don't have the solution for brave, it's hard to tweak.

1 Like