Difficult to Distinguish between Different Windows in Zorin Dark Theme

Feedback
,
1

Hi,

Zorin is already a great OS but it can be greater if you solve this problem :grinning_face_with_smiling_eyes:

I have an absolutely annoying problem with Dark Theme.

Different windows don't have a visible border so when several windows are open I have difficulty distinguishing between them.

DeepinScreenshot_select-area_20211005154112
DeepinScreenshot_select-area_202110051541121272×791 141 KB

I think the color of active window should be much brighter than windows that are behind it. Then it will be much easier to distinguish between them.

This is an example of a good Dark Mode theme in macOS:

image

Another simple solution is to make the border line of windows brighter or thicker to make the window borders more visible and distinguishable.

And finally here is another text readability problem in Dark Theme:

DeepinScreenshot_select-area_20211005152022
DeepinScreenshot_select-area_202110051520221007×731 48.7 KB

Thank you in advance for your attention!

2 Likes
2

This is a common current trend and yes, it has downsides. It bothers me too.
Fortunately, yes, there is something you can do, even if it is limited by Gnomes lack of Window Manager run Borders.
Aside from switching to a Desktop Environment like XFCE or Cinnamon or Mate, anyway...

In your ~/.config/gtk-3.0/ directory, create a new file named gtk.css

Paste the following snippet into it:

decoration {
border: 1px solid #000000;
}
decoration:backdrop {
border: 1px solid #000000;
}

Or if you want a more pronounced border, you can try:

decoration {
border: 2px ridge #181818;
}
decoration:backdrop {
border: 2px ridge #181818;
}

Save the file and reload your desktop by hitting alt+F2 and entering into it r
then hit enter.
You can reload the desktop each time, if you wish to experiment a bit, looking for a border you really like.
Or you can add properties to change, like border radius or the shadow...

5 Likes
3

Thanks! I did what you said and It looks better now.
Is there a simple solution like this to make the color of the active window brighter than other windows?

1 Like
4

Yes, you can adjust the Window background color the same way as above. The inactive window is governed by the "backdrop" property.
I would need to test and check this to ensure I give you the right properties to adjust. So please allow me some time when I can return to this and load up an instance of Gnome to do it.

2 Likes
5

Ok, formatted and tested (You may want to try log out and in or reboot to see changes). Change the Hex colors to suit what you want. #242424 and #1d1d1d. Make sure you have the ( ; ) closing each, or it won't read.

.background, .view, iconview, .view text, iconview text, textview text, .view:disabled, iconview:disabled, .view text:disabled, iconview text:disabled, textview text:disabled, assistant .sidebar, .titlebar:not(headerbar), headerbar, .inline-toolbar, searchbar > revealer > box, .location-bar, .titlebar:not(headerbar) separator, treeview.view.separator, menubar, .menubar, filechooser #pathbarbox, placesview list, paned > separator.wide, grid > viewport > box > scrolledwindow.frame.history-view > viewport > list > row.history-entry, terminal-window decoration, terminal-window .terminal-screen {
background-color: #242424;
}
.background:backdrop, .view:backdrop, iconview:backdrop, .view text:backdrop, iconview text:backdrop, textview text:backdrop, .view:backdrop:disabled, iconview:backdrop:disabled, .view text:backdrop:disabled, iconview text:backdrop:disabled, textview text:backdrop:disabled, assistant .sidebar:backdrop, .titlebar:backdrop:not(headerbar), headerbar:backdrop, .inline-toolbar:backdrop, searchbar > revealer > box:backdrop, .location-bar:backdrop, .titlebar:not(headerbar) separator:backdrop, treeview.view.separator:backdrop, menubar:backdrop, .menubar:backdrop, filechooser #pathbarbox:backdrop, placesview list:backdrop, paned > separator.wide:backdrop, grid > viewport > box > scrolledwindow.frame.history-view > viewport > list > row.history-entry:backdrop, terminal-window decoration:backdrop, terminal-window .terminal-screen:backdrop {
background-color: #1d1d1d;
}

3 Likes
6

I really appreciate your help but the result wasn't as I expected. It made color of some UI components dark that had a light color before. As if when you fixed something in the UI, something else got broken!

I think much more modifications should be applied to the gtk.css stylesheet of ZorinGrey-Dark theme:

Anyway, thanks for taking the time! :+1:
I learned something new today. :grinning_face_with_smiling_eyes:

7

I just threw some Hex Colors into the post above- did you change them to a color you preferred?
Choosing the right color for the theme you are using is up to you. :wink: I cannot choose them for you since I do not know which theme you are really using and what your preferences are.

You can use a Color Picker to fine tune the exact hex code you want:
https://g.co/kgs/SnsU5A

1 Like
8

The color in the gtk.css was OK and I also tried other colors and there was no problem in windows coloring.
The problem is at the top right corner of my screen where there is a sticky note (from Indicator Stickynotes) which normally should be yellow but after applying the gtk.css, it turned into black.

image
image1280×865 98.7 KB

9

The second problem is when I select a file, its text becomes dark (black):

image
image960×662 24.7 KB

10

How about this?

1 Like
11

The sticky note is OK now, but the selected item text is still black.

image
image1233×738 110 KB

12

Let's try removing iconview, and iconview:backdrop, and test.

1 Like
13

No, it didn't work but by removing view, and view:backdrop, the problem is solved.

image
image979×351 43.4 KB

1 Like
14

This bit of experience may just open some doors for you, to really adjusting your system to be exactly how you want. :wink:

2 Likes
15

Yes, you finally solved it. :100: Thank you!

Isn't there any documentation to explain the CSS selectors and classes of gtk themes? How can one know which selector is for what?

1 Like
16

Not easily found... It's on my list of things to make. :wink:

1 Like
17

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.