Help to edit specific element's colors in GTK3 theme?

Support
1

Hi, since in Manjaro’s community there are experts/makers of themes (also in Team members) I ask here to get rid of what is puzzling me :slight_smile:

I have a GTK Theme (sweet dark) which I’m editing accordingly to my tastes, I succesfully change most of the colors, but for a pair of them I’m not able, I cannot figure out what to check in the css files.

The first is the border around some buttons, like, eg, this one which appears in Pamac:

Screenshot_2021-01-07_15-03-13
Screenshot_2021-01-07_15-03-131100×588 96.1 KB

I checked the colors code which goes from #59065f (89, 6, 95) to #160117 (22, 1, 23), - so should be a gradient, but there are no track of these colors, in the css files…

Solved by @bill_t:

button.text-button.toggle:checked { border: 2px solid #ff0000; box-shadow: none; }

The second one is about files drag and drop in Thunar. But firstly let’s see how this works in Adwaita Dark:

Screenshot_2021-01-07_15-04-55
Screenshot_2021-01-07_15-04-55726×444 8.28 KB

When a file is dropped inside a directory, the borders are highlighed with a green color.
In sweet dark instead, such color is barely visible:

Screenshot_2021-01-07_15-04-20
Screenshot_2021-01-07_15-04-20910×565 27.5 KB

Solved by @bill_t:

.thunar :not(decoration):not(window):drop(active):focus, :not(decoration):not(window):drop(active) { border: 2px solid #ff0000; }

Can someone explain me what I have to check or add to change these colors?

I leave here the links of css files:

Many thanks.

2

I don’t know how but I like the theme. Where can I find the .css file to edit?

3

The CSS files are in my message :slight_smile:

4

Anyway be aware: compared to the original theme, I made it more darker :smiley:

Screenshot_2021-01-07_16-42-26
Screenshot_2021-01-07_16-42-26951×598 58.1 KB

5

For the button border try something like this:

button.text-button.toggle:checked {
	border: 2px solid #ff0000;
}

Try something like this:

:not(decoration):not(window):drop(active):focus, :not(decoration):not(window):drop(active) {
	border: 2px solid #ff0000;
}

You can paste both CSS rules in the file ~/.config/gtk-3.0/gtk.css (if the file does not exist, create it), instead of modifying your theme’s .css files. This file has higher priority for your user, hence it will override the values of the theme’s files.
In both cases adjust the pixels (px) and colors (#ff0000 in my example) according to your liking.

A logout/login might be needed for the changes to have effect (especially for the second one).

1 Like
6

This one is applyed (the border becomes red!)

This one is not applyed…

We are near to solution! :slight_smile:

7

I make it green, but looks here:

border

The original halo is still here… Why? In the original gtk.css there should be something about?

8

This one as worked as

  .thunar :not(decoration):not(window):drop(active):focus, :not(decoration):not(window):drop(active) {
  border: 2px solid #ff0000;
}

Peek 2021-01-07 22-03

Amazing :slight_smile:

1 Like
9

This could be a box-shadow property. Try this:

button.text-button.toggle:checked {
    border: 2px solid #ff0000;
	box-shadow: none;
}
1 Like
10

Perfect!!

If you could merge the code in one answer, I will set your answer as solution :slight_smile:

1 Like
11

There is no need to mark a specific answer as a solution.

Instead, you can add something like [Solved] in the thread title to mark the thread as solved. :slightly_smiling_face:

Glad I could help!

1 Like
12

Thank you a lot!

1 Like