How to Modify Style Properties of GNOME Shell Themes

GNOME Shell (GS) themes heavily depend on CSS for styling various elements of the shell. A typical CSS file included in a GS theme can have thousands of properties. This article will cover some concepts that you can use to tweak existing GS themes by creating a new theme that inherits values from the original themes. If you are a little familiar with how CSS works, you can build upon the examples mentioned below to change almost any aspect of a GS theme.

Enabling Custom GNOME Shell Themes

Ubuntu, along with many other GNOME-based distributions, does not allow user-made custom themes by default. To load user themes, a GS extension and a hidden tweaks utility need to be installed. You can install the required extension and GNOME tweak tool in Ubuntu by running the following command:

Launch the “Tweaks” app from the application launcher and go to the “Extensions” tab in the sidebar. Enable the “User Themes” extension, as shown in the screenshot below. Be sure that the “Extensions” toggle is enabled at the top.

Once you are finished with this step, close and relaunch the Tweaks app. Now, you will be able to change the GS theme from the “Appearance” tab.

Creating the Necessary Files for Theme Customization

To customize an existing theme, you will need to create a new GS theme that builds upon the original theme. This way, you can change only selected parts of the theme, without changing the entire theme. Any untouched part of the original theme will be kept as is. Running the commands below will create a new custom theme named “mytheme” in your $HOME directory.

You can use any text editor to enter your own customizations in the “gnome-shell.css” file created by running the command above. Once you have entered the required code, you can select the “Mytheme” theme in the dropdown menu in the Tweaks app, as explained in the first section of this article. Note that you will need to log out and log back in for the changes to take effect. Alternatively, you can also press and input “r” in the popup input box to reload the GNOME shell.

Finding the Base CSS File

If you want to use the original CSS file as a reference, you will need to find and extract it first. Third-party themes may directly include a “gnome-shell.css” file, making it easy to use as a base for CSS customization. However, default system files may include “gnome-shell-theme.gresource” files instead. You can find the default system GS theme located at the “/usr/share/gnome-shell/theme” path. Inside this directory, you will find the gresource file under another folder of the same as the name of the default system theme. In the latest version of Ubuntu, you will find the gresource file at the “/usr/share/gnome-shell/theme/Yaru” path. Copy the gresource file to another folder and run the following command:

After entering the command above, you will receive the following output:

The fourth line in the output above gives the correct path to the CSS file. To extract it, run a command in the following format:

You can now refer to the “output.css” file obtained above and use it as a base for customization. Some examples of CSS customization are mentioned below. These examples do not cover all use cases but will give you a basic idea for how to proceed. Note that no explanation will be given for the CSS rules mentioned below, as they are beyond the scope of this article. You can refer to the CSS reference documentation from W3Schools or Mozilla for more information.

Changing Font Properties of System Theme

The following code will change the font properties of the default system theme. The font style will be changed to Noto Sans and the font size will be changed to 12 pt.

If you are using a third-party GS theme, you may need to import its CSS file first by specifying the full path, as shown in the example below:

If a CSS file is not available for importing, you can extract it from the gresource file, as explained above.

Changing Panel Background Color

To change the panel background color to red, use the following code:

Changing Width of Toggle Switch

Use the code below to change the width of the toggle buttons:

Conclusion

With some knowledge of CSS rules and properties, you can easily customize almost all aspects of a GS theme. However, it is important to locate the correct base CSS file to use it as a reference and avoid a lot of guesswork.