Setting text colour in GtkEditable label while it's being edited (Gtk4)

[realh (Tony Houghton)]

I can’t change the colour of text in a GtkEditableLabel when it’s being edited. Inspector shows that it contains a stack with two child nodes, “label” and “text”. All the nodes, including label, have the color style I want to use, except text which is always white (when using the dark theme). I’ve tried using editablelabel > stack > text as my selector, with and without :focus and :highlight etc, but nothing works.

Inspector also shows the filename that provides the style it’s actually using, but I can’t refer to it, because it’s a resource which only ever exists as a file while building GTK.

[StefanSalewski]

Do you know that you can change colors and other text attributes of gtk labels with pango text attributes?

I gave some label examples in the GTK4 Nim book, see subsection " Pango Text Attributes" example label4.nim in GTK4 for Graphical User Interfaces

Well it is not an editable label, and I did not try to modify colors while entering text, but I would guess that it should work in a similar way.

Note that in the past some people had problems changing colors when using Glade XML files, see gtk3 - GTK+3 change text color in a label (raspberry pi) - Unix & Linux Stack Exchange

[realh (Tony Houghton)]

Hm, that could work, but GtkEditableLabel doesn’t have an official API for accessing its children like that. I know it’s possible, but I’d rather find a solution that doesn’t involve poking around in its innards.

I think the problem is that the default style is being applied by a rather specific CSS selector, so I need to find a selector that’s even more specific to be able to override it.

[StefanSalewski]

Yes you are right, the GtkEditableLabel seems to be very different from the ordinary GtkLabel. And it is very restricted, maybe only intended for very special use cases.

[matthiasc (Matthias Clasen)]

this works fine in quick testing:

editablelabel stack text {
  color: yellow;
  background: red;
}

editablelabel stack text selection {
  color: red;
  background: yellow;
}

editablelabel stack label {
  color: white;
  background: green;
}