Software & AppsOperating SystemLinux

Customizing GTK Theme in Ubuntu 20.04: Changing Button Colors

Ubuntu 13

Ubuntu 20.04, also known as Focal Fossa, comes with a default GTK theme called Yaru. While this theme is appealing to many users, you may want to customize it to better suit your preferences. One way to do this is by changing the color of the buttons. This article will guide you through the process of customizing the GTK theme in Ubuntu 20.04 by changing button colors.

Quick Answer

To customize the GTK theme in Ubuntu 20.04 and change button colors, you can create a copy of the default Yaru theme, extract the gtk.gresource file, modify the color values in the gtk.css file, and apply the custom theme using the GNOME Tweaks tool.

Understanding GTK Themes

GTK themes control the appearance of your desktop, including the color of various elements such as buttons. These themes are essentially a collection of CSS files and assets, such as images and icons. The Yaru theme, for example, is located in the /usr/share/themes/Yaru directory and includes several subdirectories for different versions of GTK and the GNOME Shell.

Creating a Custom Theme Directory

Before we start modifying the Yaru theme, we’ll create a copy of it. This will prevent our changes from being overwritten when the theme gets updated. To create a copy of the Yaru theme directory, open a terminal and run the following command:

sudo cp -r /usr/share/themes/Yaru /usr/share/themes/MyTheme

In this command, cp is the copy command, -r is a parameter that means “recursive” (i.e., it tells the command to copy all files and subdirectories), and the two paths are the source and destination directories, respectively.

Extracting the gtk.gresource File

The gtk.gresource file is a binary file that contains the CSS files and assets for the theme. To modify the color of the buttons, we’ll need to extract this file. Navigate to the gtk-3.0 and gtk-3.20 subdirectories of your custom theme directory and run the following command:

gresource extract gtk.gresource /org/gnome/yaru/gtk-3.0/gtk.css > gtk.css

In this command, gresource is a utility for handling GResource files, extract is a command that extracts a resource from a GResource file, gtk.gresource is the GResource file we want to extract from, /org/gnome/yaru/gtk-3.0/gtk.css is the resource we want to extract, and > gtk.css redirects the output to a file named gtk.css.

Modifying the Button Colors

Now that we have extracted the gtk.css file, we can modify the color of the buttons. Open the gtk.css file in a text editor and look for the CSS selectors that correspond to the buttons you want to change. For example, you might find a selector like .button { background-color: #f57900; }. Change the color value to the color you want, save the file, and close the text editor.

Applying the Custom Theme

To apply your custom theme, you’ll need to change your current theme to a different one and then switch back to your custom theme. You can do this using the GNOME Tweaks tool. If you don’t have GNOME Tweaks installed, you can install it by running the following command:

sudo apt install gnome-tweaks

Once you have GNOME Tweaks installed, open it, go to the Appearance tab, and change the Applications theme to your custom theme.

Conclusion

Customizing the GTK theme in Ubuntu 20.04 by changing button colors can be a fun and rewarding process. It allows you to personalize your desktop and make it truly your own. However, keep in mind that modifying GTK themes can be a trial-and-error process, as it may not always be clear which CSS selector corresponds to a specific element on the screen. Don’t be afraid to experiment and make adjustments until you achieve the desired results. Happy theming!

How can I revert back to the default Yaru theme if I don’t like my custom theme?

To revert back to the default Yaru theme, open GNOME Tweaks, go to the Appearance tab, and select the Yaru theme under the Applications section.

Can I change the color of specific types of buttons, such as the minimize or maximize buttons?

Yes, you can change the color of specific types of buttons by finding the corresponding CSS selector in the gtk.css file and modifying the background-color property. For example, you can change the minimize button color by finding the .minimize-button selector.

Can I change the button color for a specific application only?

Yes, you can change the button color for a specific application by using CSS selectors that target the specific application’s window or elements. You would need to inspect the application’s UI using tools like gtk-inspector to identify the appropriate selectors to modify in the gtk.css file.

Will my custom theme be preserved after system updates?

No, system updates can overwrite your custom theme. To prevent this, it is recommended to keep a backup of your custom theme directory and reapply it after system updates.

Can I apply my custom theme to other GTK-based desktop environments?

Yes, you can apply your custom theme to other GTK-based desktop environments, as long as they support GTK 3.0 or 3.20 themes. However, keep in mind that the directory structure and file names of the theme may vary in different desktop environments. You may need to adjust the paths and filenames accordingly.

Leave a Comment

Your email address will not be published. Required fields are marked *