Custom CSS is not working well outside of default Elementary OS gtk theme

[actionless]

When i first discovered the issue i suggested to fix it at the level of packaging:
https://aur.archlinux.org/packages/go-for-it/

diff --git a/PKGBUILD b/PKGBUILD
index 8edf9b7..b28a55b 100755
--- a/PKGBUILD
+++ b/PKGBUILD
@@ -38,6 +38,7 @@ package() {
   cd $_gitname/build

   make DESTDIR="${pkgdir}" install
+  echo > "${pkgdir}"/usr/share/com.github.jmoerman.go-for-it/style/widgets-3.20.css
 }

 # vim: ts=2 sw=2 et:

however i was thinking that mb it could be better to do on the level of the app, detect if running inside Elementary and load custom CSS file only in that case

[actionless]

Or alternative solution, in the settings, instead of "Dark theme" switch to have "Custom theme" dropdown with choices:

• None
• Light
• Dark

[JMoerman]

This is something which I don't think I will be able to solve for everybody.
The themeing is necessary for the application to work well as it is dnd would look strange without it.
Unfortunately it isn't possible to query the colors of the system theme that is currently in use. Nor are the names used for the CSS variables used for storing the color values in the themes standardized. This means that I cannot solve this in a general way.

Right now I only check theme compatibility with the elementary theme and Adwaita as I can't hope to make it look native for every theme.

What I can do is to allow the user to load a custom theme. Which may be possible once support for plugins is implemented.

[actionless]

dnd would look strange without it.

would you consider using ".destructive" class or something else inside GTK?

custom theme would solve it, but let's be realistic, who will writing such theme to match every possible gtk theme? (and every gtk theme which could be generated by oomox :-) ) given what after switching theme in gtk settings user will need to update application settings

i recommend considering some solution which not involving any hardcoded colors

[JMoerman]

The list I'm using is basically a more powerful version of https://blog.gtk.org/2017/06/01/drag-and-drop-in-lists-revisited/. Here one of the main developers of Gtk+ also uses hardcoded colors in the same way.
(Originally I had made the drag and drop list from scratch and the themeing situation was much worse.) The use of hardcoded colors is also not unique to Go For It!

The main problem is that I need to make the rows that are being dragged opaque as else only the text, checkbox and the drag handle are visible of this row. (assuming the row is not selected.)
I also consider indicating where the the row will be placed after letting go of the mouse button the be important. Both of these things I cannot do without setting a color.

would you consider using ".destructive" class or something else inside GTK?

I can't find any information on a ".destructive" class. The closest I can find is ".destructive-action".

i recommend considering some solution which not involving any hardcoded colors

I'm open to suggestions on how to improve this situation.
All I can think of right now is offering a bunch of pallets to choose from, similar to the color schemes used in text editors.

[actionless]

also, to explain more clear the scale of the problem i'll give example screenshots:

without custom CSS:

also uses hardcoded colors in the same way

after hearing in news report on TV about some crime you also go outside to repeat it? i don't want to go too much into the topic but in gnome team there are some people who lobbying dropping themes support and leaving Adwaita hardcoded (part of their motivation actually was "what for app devs it could be hard working with dynamic themes while on other platforms like Mac or Windows they can assume some default appearance", but that's simply BS since both mac and windows allowing you to customize theme colors (in windows you need first to choose High Contrast theme to get color options).

The closest I can find is ".destructive-action".

yes, i meant it

the rows that are being dragged opaque as else only the text

why you need hardcoding colors for adjusting opacity/visibility of some elements?

how to improve this situation

my main suggestion was to leave an option in settings not to override theme at all.

[JMoerman]

after hearing in news report on TV about some crime you also go outside to repeat it?

What I meant to say is: I've searched for a way to to this in a general way, and couldn't find any. I haven't been able to find any apps which do this in a better way (most apps do not have a need to set colors. Those that do generally aren't affected as badly as this app.). When finally the main devs of Gtk+ also handle these kind of situations in the same way I concluded that no nice way to handle this exists.

Yes, I'm looking at code from the same people who insist that Adwaita is the only theme in existance. However, these people are also responsible for theme and styling support. Meaning that it isn't very likely that they have added some functionality to do this in a better way.

why you need hardcoding colors for adjusting opacity/visibility of some elements?

The background of a row normally has no color information associated with it (exception: selected rows), rendering it transparent. This usually isn't a problem as rows are rendered on top of widgets that have a background color.

When a row is being dragged it means that only the widgets contained in a row show up. This means that we need to add a background layer to the row to fix this. Unfortunately we cannot take the background of the widget placed below the row (the listbox widget, grid, or the window). Nor can we change the opacity of the background layer as it has no color information associated with it (even then no functionality exist to make something more opaque), multiplying zero with something will always be zero.

The situation in Windows is significantly different BTW as much less people use custom themes there and you are limited in how much you can change the colors as far as I know.

[actionless]

This means that we need to add a background layer to the row to fix this.

you can solve it by another trick, not involving hardcoding colors (the only limitation what user will have to restart the app when changing gtk theme or app should explicitly handle theme change event if it's even possible in gtk). here's the trick:
retrieve base_color from GtkStyleContext and set it to elements from code, not from css. it will give elements the color so you could apply transparency

situation in Windows

in highcontrast theme you don't have as many limitations, it's simillar to classic theme customizing interface as it was in win 9x/2000

[JMoerman]

The base_color color variable isn't available for all themes, unfortunately. For example: Adwaita doesn't have it.
Setting a background color separately for each element doesn't sound that appealing to me. I can however generate some css code to override the colors at runtime.

theme_base_color, theme_fg_color and theme_bg_color, theme_text_color seem to be available in most (still not all) themes so I may be able to generate a color pallet based on those colors. (Using them directly if they exist and using a fallback if they don't.)

How does the application look if you use the css code below?

@define-color task_active_label_color @theme_fg_color;

@define-color main_layout_background @theme_base_color;

@define-color list_row_drag_icon_background @theme_base_color;
@define-color list_row_drag_icon_border @theme_fg_color;
@define-color list_row_drag_icon_text @theme_text_color;
@define-color list_row_border_top transparent;
@define-color list_row_border_bottom transparent;
@define-color list_row_drag_highlight_top @theme_fg_color;
@define-color list_row_drag_highlight_bottom @theme_fg_color;

(Replace colors.css/colors-dark.css or use gtk-inspector)

[actionless]

Adwaita doesn't have it.

sorry, i meant theme_base_color, not just base_color

How does the application look if you use the css code below?

it looks fine except for the headerbar (CSD) area

[actionless]

also regarding variable names, official position of gtk devs: "since they're not documented, assume the ones from Adwaita theme should be available"

(since your target platform is Elementary -- i guess you need to choose such theme vars which presented in both Adwaita and default Elementary theme)

[JMoerman]

it looks fine except for the headerbar (CSD) area

Great! In that case I will try to read and use the colors from the theme and fall back to predefined colors in case that isn't possible. The area that includes the switcher buttons and menu is something that will change in a next version, it will no longer have the same background color as the task list.

[actionless]

anyway with your latest proposed change it looks sane enough :-)

[JMoerman]

cb48678 adds an option to select different themes (currently just elementary and a theme using the proposed color changes).
Adding palettes/themes should be as easy as adding a css file and editting a few lines.
I've left the elementay theme as the default as this should be a bit more robust (in the worst case it will look ugly.).

[actionless]

brilliant!
thanks a lot! it looks now exactly as i expect it to when i switch to inherit GTK theme

[JMoerman]

Great! Not having to use the same stylesheet for all themes also allowed me to improve how the app looks on elementary OS, so everybody gains something.