ComputersHow to modify a gnome shell theme

This is (I think) the correct way of doing what I tried to do with an extension. My objective was to reduce a bit the size of the gnome shell top bar, and especially the font size.

comparison of the top bar, before and after

The correct way is to use a “user” theme. What I did is to create a directory in the $HOME/.themes called “Romano” (guess why). You can find attached the files in the directory, but basically, the important file is the $HOME/.themes/Romano/gnome-shell/gnome-shell.css, which looks like that:

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

#panel {
    color: #ffffff;
    font-family: ubuntu, cantarell;
    font-size: 0.9em;
    font-weight: normal;
    height: 1.55em;

.panel-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 4px;
    font-family: MintSpirit, ubuntu, cantarrell;
    font-weight: bold;
    color: #ccc;
    transition-duration: 100;
.panel-button:hover {
    color: cyan;
    font-weight: bold;


The important line is the first, which loads the standard gnome-shell theme, and then the theme proceeds with modifying the font sizes and attributes. In this case, it set the font smaller, it reduces the space between buttons and indicators, and then changes the color when hovering atop the buttons with the mouse.

Obviously to use it you need the user-theme extension and then you have to activate it with the “advanced settings” (aka gnome-tweaks-tools; see for example here). And you need to restart gnome-shell to make the new theme “visible”:

Here you have the files, just to get started. Ah, yes, if you change the name of the theme, you have to modify the json file too…

download the mini-theme

Title: romano-theme.tar.gz (0 click)
Filename: romano-theme-tar.gz
Size: 571 B



8 comments to How to modify a gnome shell theme

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>




This site uses Akismet to reduce spam. Learn how your comment data is processed.