Not sure if I’ve picked the right group for this, sorry if not.
I have a GNOME extension which is misbehaving on Ubuntu 22.04 (I use Fedora) because of its default light mode theme. I need some guidance on how I might resolve the issue.
The immediate problem is that for whatever reason my extension’s CSS is leaking out into the main top-bar / system menus (bizarrely, even though the problematic CSS entry only sets STLabel text to white, it forces all top-bar text so some teal colour).
Now, regardless of the weirdness, I can resolve that by using a CSS class-name for the items in question, I was largely being lazy because it worked.
But it raises a wider question: how can I style my extension, even slightly, and still have it legible? I can’t use the GNOME prefers-light / prefers-dark setting because in this case the Fedora GNOME light-mode still has a dark background on the top-bar menus, whereas Ubuntu’s has a white background (ditto @media (prefers-color-scheme: dark) which I can’t get to work anyway).
I can only think that I somehow have to read the theme’s actual background colour setting (or extract it from my newly created menu before I add any class-named widgets) and use an appropriately different set of class names explicitly.
But even that will only work once, if the theme changes, or switches from day-light to night-dark as some do during a single session.
Ideas?
Are there some stock “highlight level” classes I can use instead that follow the current theme?
In my case, I may just resort to bold as I’m only really trying to arrange for highlights.
I like to describe extensions as live patches to the gnome-shell process. Once loaded, their code becomes indistinguishable from gnome-shell code. If -say - a label is added somewhere, gnome-shell cannot tell whether the label was added “from an extension” or “from itself”.
With that in mind, it should be clear that the same applies to extension stylesheets. If it is not possible to determine whether an actor was added from an extension, it is not possible to apply a stylesheet selectively.
I can’t use the GNOME prefers-light / prefers-dark setting
That is correct. gnome-shell is currently always dark. Themes (which aren’t officially supported, although we do it ourselves in gnome-classic) can do whatever they want, just like in GTK. And just like with GTK applications, this means that themes can break custom styling.
I did open a merge request for color-scheme support a while ago, but it needs figuring out how to deal with extension and session-mode styling (ideally we ditch session mode styling, then extensions can assume particular colors in stylesheet-dark.css and stylesheet-light.css)
I can only think that I somehow have to read the theme’s actual background colour setting
You can’t really do that. The background of a widget may be a color, a gradient or an image, or just none at all. You’d have to pick an actual screen pixel, and hope that it’s representative enough (gradient/background-image) and you don’t hit a border or text.
Ideas?
You can provide classic.css and ubuntu.css stylesheets that are loaded instead of the regular stylesheet.css in the “GNOME Classic” and “Ubuntu” sessions.
You can start them with
@import url("stylesheet.css");
to avoid duplication and only override the bits that need it (namely colors).