That’s really not how CSS works. Keep in mind that the “C” stands for cascading, so in order to determine the value of a particular property (say: color), it is not enough to examine a single node, because the actual value could be inherited from a parent node.
Case in point: The following code does what you are trying to do:
const ctx = St.ThemeContext.get_for_stage(global.stage);
const node = St.ThemeNode.new(
ctx,
null, /* parent node */
ctx.get_theme(),
St.Widget, /* gtype */
'', /* id */
'popup-menu', /* class */
'', /* pseudo class */
''); /* inline style */
const fg = node.get_foreground_color();
log(fg.to_string()); // #eeeeecff, correct
const bg = node.get_background_color();
log(bg.to_string()); // #00000000, unexpected but correct
const [, bpBg] = node.lookup_color('-arrow-background-color', true); // property that is actually used for menu background
log(bpBg.to_string()); // #00000000, incorrect
You can get a better result by examining the theme node of an actual actor:
const node = Main.panel.statusArea.appMenu.menu.actor.get_theme_node();
const fg = node.get_foreground_color();
log(fg.to_string()); // #eeeeecff, correct
const bg = node.get_background_color();
log(bg.to_string()); // #00000000, unexpected but correct
const [, bpBg] = node.lookup_color('-arrow-background-color', true); // property that is actually used for menu background
log(bpBg.to_string()); // #353535ff, correct
But you must be aware that in particular the background color is problematic, and there is no generic way to get the correct value:
- an actor may use a custom property instead of the standard
background-color
(see above)
- an actor may not have any background itself, but just draw on top of its parent (example: menu items have a background when hovered, but otherwise have a fully transparent background on top of the menu background)
- similar: a background may be translucent, so the visible color depends on what’s underneath
- backgrounds may use gradients or
background-image
instead of a single color