How to get the style_class_name properties from the current shell theme?

Desktop
#1

I am trying to get the given style_class_name properties from the current shell theme.
this is to get the color of the “popup-menu” style_class from the current shell theme used.

I have tried similar to below, can anyone help please.

Main._getStylesheet('gnome-shell.css')
Main.getThemeStylesheet()
#2

@andyholmes can you help me please?

#3

Sorry, I really don’t know much about that topic. You probably want to look at how the Main.loadTheme() function works and then look through the documentation for St.Theme and St.ThemeContext.

#4

@andyholmes thanks for your comment.
I tried like this

imports.gi.St.ThemeContext.get_for_stage(global.stage).get_theme().get_property('popup-menu', 'color')

I think I am still missing something.

#5

It looks like you are calling St.ThemeContext.get_theme() which returns a St.Theme object, but that object has no method called get_property()?

#6

g_object_get_is_valid_property: object class 'StTheme' has no property named 'popup-menu'

#7

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
1 Like
#8

That’s a wonderful explanation. I have gone through the code but didt test it in my actual extension. Will test it in some time. I really impressed with your explanation. Thank You somuch.