GNOME Shell Theme css documentation

Question

Where can I find documentation about the GNOME Shell theme css elements? For instance, if I want to change the style of the "Activites" which css class/id do I have to tweak? More in general I'm looking for somethings that maps each gnome shell element to its class / id in the css

Thanks!

Tussore

Does this help? ubuntuforums.org/showthread.php?t=1479239 – Agronomy

...unfortunately not... It's stuff I already knew... I'm looking for mapping information. Thanks anyways – Tussore

Is there any recent development in this area? – Dieball

Answer 1

Well I still cannot find documentation, however by looking into other themes I could finally find what I was looking for this specific case.

#panelActivities

is the style to tweak

Tussore

Answer 2

This might be a little dated, but I was able to track down a somewhat authoratiative source. Starting with the documentation that turns up for developing on gnome shell:

https://wiki.gnome.org/Projects/GnomeShell/Development

The CSS section mentions that the theme stuff is located in gnome-shell/source/gnome-shell/data/theme/gnome-shell.css. Of course, it doesn't give a link or anything. From there, I googled for the source code, picked a reasonably recent version and hoped that I could browse the code using the path in the documentation. Lo and behold, the CSS!

https://git.gnome.org/browse/gnome-shell/tree/data/theme/gnome-shell.css?h=gnome-3-18

In my case, I wanted to make all of the font smaller but I didn't know what the root element was. I was able to determine that stage is what I should target with something like font-size: 0.8em in my custom theme in ~/.themes/Naddeo/gnome-shell/gnome-shell.css. This is my entire CSS file in case someone else is trying a real theme but they want to override one or two things. To use it, just pick it in the gnome tweak tool as your shell theme.

@import url("/usr/share/gnome-shell/theme/gnome-shell.css");

stage {
    font-size: 0.8em;
    height: 1.50em;
}

Succussion

Answer 3

current for GNOME 46...

• https://gjs.guide/

GNOME JavaScript

Introduction Welcome to GNOME JavaScript (GJS)! This introduction covers the basics of how JavaScript is used with GJS. More detailed information about GJS is available in the GJS Usage Documentation.

Platform and API Many APIs that JavaScript developers are familiar with are actually a part of the Web API, such as DOM or Fetch. GJS is not intended as an environment for web development and does not include support for most of these APIs.

GNOME Platform APIs are documented at gjs-docs.gnome.org

GJS provides JavaScript bindings for the GNOME platform libraries, meaning that developers will use libraries like Gio for working with files, Gtk to build user interfaces, Soup for WebSockets and so on.

as mentioned above: https://gjs-docs.gnome.org/

Wimble