How can I access /org/gnome/shell/theme/ which is referred to in the ubuntu.css file on Ubuntu 18.04?

Is there a way to access ///org/gnome/shell/theme/ in Ubuntu 18.04?
I got this path in a .css file from /usr/share/gnome-shell/theme/ubuntu.css,

for example:

resource:///org/gnome/shell/theme/checkbox-off.svg  
resource:///org/gnome/shell/theme/toggle-on-us.svg

Example:

.check-box StBin {
  width: 24px;
  height: 22px;
  background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); }


.check-box:checked StBin {
  background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }

Solution 1:

/org/gnome/shell/theme/ is not an actual directory that you can access (you cannot access it using dconf Editor either). This is associated to the GResource mechanism, GNOME shell can get the resource from the resource:// URI. Generally they're not human-readable as they are pre-compiled into a binary format.

You can however extract the the resource using the gresource command. You should be able to find a .gresource file somewhere in /usr/share/gnome-shell/ directory for shell theme. First check whether it contains the resource you're looking for by running

gresource list /path/to/filename.gresource | grep <resource-name>

for example,

gresource list /path/to/filename.gresource | grep checkbox-off.svg

Once confirmed, run the following command to extract the resource

gresource extract /path/to/filename.gresource /path/to/resource

for example,

gresource extract /path/to/filename.gresource /org/gnome/shell/theme/checkbox-off.svg

It should show you the content of the .svg file.

You can use this resource without extracting in the .css file for your custom theme as follows

url("resource:///path/to/resource");

for example,

url("resource:///org/gnome/shell/theme/checkbox-off.svg");