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.
$ touch ~/.themes/mytheme/gnome-shell/gnome-shell.css
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 <ALT+F2> 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.
font-family: Noto Sans, sans-serif;
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:
font-family: Noto Sans, sans-serif;
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:
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.