One of the things I love most about Linux desktop environments is the ability to customize nearly everything to my liking. In this post I describe how I changed the default "activities" icon of the gnome shell theme I use to a set of smileys that change at random. Let's go!

Prequesites

Throughout the years I tried out quite a number of desktop environments and window managers. I fell in love with awesomeWM for quite a while and I still miss it sometimes for it's tiling features andthe way you can customize just about every part of its behavior.

At the moment, however, I'm running gnome 3.38 on fedora33 and I'm happy with it. It looks decent right out of the box, but after some time using it, I felt like some changes had to take place.

While I'm not a fan of macOS or any other Apple product (I once had an iPhone 4 as a business device), I really like the clean and calm look of the interface.

So the first thing I did was to install the 'dash to dock' extension with dnf install gnome-shell-extension-dash-to-dock, so I could have a dock like you know it from Apple's macOS systems. Another extension I installed was the user theme extension, that allows for custom Themes to be chosen for the gnome shell. This was quickly installed with dnf install gnome-shell-extension-user-theme and I was ready to go. As a last package I installed gnome tweaks, so that I could activate extensions and configure their settings, with dnf install gnome-tweaks.

There are quite a few options under the "extensions" tab, that you can check out by clicking on the settings icon next to an extension. I might go through all of that in another post, as soon as I settled on the seetings and don't have to tweak them every now and then.

Chose your theme wisely

There are noumerous websites at your hands that offer custom themes for the gnome shell as well as gtk2, gtk3, and gtk4 applications. Some even package the theme suitable for cinnamon, xfwm4 and other window managers.

In my case I got the theme from https://www.gnome-look.org, which in my opinion has everything to offer that I desire. Your mileage may vary, so feel free to search for other options.

As I already mentioned, the look and feel of macOS is quite pleasing to me, so I fell for a gtk3/gk4 theme called "McMojave" that I really liked.

I downloaded the package and installed the necessary folders to /usr/share/themes/. It's perfecly fine though, to put your themes into ~/.themes/, which is what I'll do once I finally get started with my dotfiles repo.

Once installed, I chose the theme within gnome tweaks as shown below.

The theme should change immediately. If, for any reason it doesn't, just logout of your session or try reloading gnome shell with alt+f2 and then type r and hit enter.

For me everything went smoothly, but I was greeted with the apple icon immediately. As you probably know from the bible and snow white, apples are not to be trusted, so it had to go.

Tweak, tweak, and then tweak a little more

With some hints of a friend (he actually told me the exact path), I found the icon in /usr/share/themes/Mojave-light-solid/gnome-shell/assets/activities.svg.
With this pinned down, I went to look for a smiley to fill the void I was about to create by renaming the file, hence leaving a blank space in the top left corner of my screen.

After searching for "smiley svg" for a few minutes on my favourite search engine, if found these gems from Laura Reen on dribbble and fell in love.

I swapped one of the smileys in as a replacement and... ran into the next issue. The smiley had what I'd consider a base size of 64x64 pixels, which the original Icon did not have. Luckily I already knew, that gnome themes are basically just well crafted css classes, so I grep -irl 'activities' /usr/share/themes/Mojave-light-solid/gnome-shell()ed my way through the files and found the files that contained the string 'activities'.

>> # grep -irl 'activities' /usr/share/themes/Mojave-light-solid/gnome-shell 
/usr/share/themes/Mojave-light-solid/gnome-shell/gdm3.css
/usr/share/themes/Mojave-light-solid/gnome-shell/assets/activities.svg
/usr/share/themes/Mojave-light-solid/gnome-shell/gnome-shell.css

Of course, searching for 'activities' was just a wild guess, I could have found nothing at all.

Within the gnome-shell.css file however, I found the section referencing 'activities.svg' as a background-icon. It's rules did not account for icon sizes other than 24x24 pixels (which sounds perfectly valid to me, considering that one usually does not change the theme itself).

This resulted in the new icon being to large for the available space, hence cutting off parts of it.

I added a background-size directive to it like so:

#panel #panelActivities.panel-button > * {
  background-image: url("assets/activities.svg");
  background-size: contain;
  width: 24px;
  height: 24px;
  background-color: transparent !important;
  background-gradient-direction: none !important;
  border: none;
  color: transparent;
}

This fixed the "issue" I created, as can be seen below.

(Left side is before the change, right side is after)

Randomize!

So after a rather long intro to what I did, here's the rather short but important part.

When I had my smiley sitting in the top left corner of the screen, I felt like having to give a chance to all the other ones to be part of my desktop every once in a while as well.

To accomplish that, I placed all the smileys in a custom directory (I usually put stuff like that into a .custom/ folder, so I can easily back it up), renamed them smiley_1.svg to smiley_25.svg and wrote a bash script that does all the magic:

#!/bin/bash

#####
# This script changes the activities.svg of to symlink a random smiley_[number].svg in a given directory.
# The original activities.svg will be renamed to activities.svg.bak if it exists. 
# If there are no smiley_[number].svg files present, it will try to revert activities.svg.bak back to activities.svg
#
# Author: Oliver Jakobi | https://oliverjakobi.com/blog/en/randomize-activity-icon-gnome-theme/

# Original filename of "activities.svg" (might have another name on different themes?) 

ORIGINAL=activities.svg
BASEDIR=/usr/share/themes/Mojave-light-solid/gnome-shell/assets/

# Filename pattern and basedir of your custom icons 
# this will be used as ${ICONDIR}${ICONPREFIX}${RAND}${ICONSUFFIX} to build the full path to your custom icons.
ICONDIR=/home/oliver/.custom/smileys/
ICONPREFIX=smiley_
ICONSUFFIX=.svg


# first and last number of smiley svg's.
# this is used as the range of smileys available
START_SMILEY_NUMBER=1
END_SMILEY_NUMBER=25


# Here we start the actions! 

RAND=$(shuf -i ${START_SMILEY_NUMBER}-${END_SMILEY_NUMBER} -n 1)

# Check if activities.svg is a file, if so, back it up

if [[ -f "${BASEDIR}${ORIGINAL}" ]]
then 
    if [[ ! -L "${BASEDIR}${ORIGINAL}" ]]
    then
        mv ${BASEDIR}${ORIGINAL} ${BASEDIR}${ORIGINAL}.bak
    fi
fi

if [[ -L "${BASEDIR}${ORIGINAL}" ]]
then
    unlink ${BASEDIR}${ORIGINAL}
fi
ln -s  ${ICONDIR}${ICONPREFIX}${RAND}${ICONSUFFIX} ${BASEDIR}${ORIGINAL}

(This is also availabe as a gist on github)

Essentially, what it does is to check if the activities.svg file is a file/symlink. If it's not a symlink, it renames the original to activities.svg.bak, so I can rename it, if I ever wish to use it again. Then it generates a random number from 1 to 25 and uses this number to symlink one of the 25 emojis to activities.svg, instantly changing the activity icon.

The only thing left now was to make it a cronjob that changes the icon every few minutes.

* * * * * /home/oliver/.local/bin/change_activities_icon.sh (Yes, I do change it every minute.) If your theme resides in /usr/share/themes, you will have to add the cronjob for the root user, otherwise it won't work.

The end

So, for a rather small change on my theme, this has become quite a lengthy article.
I hope I didn't forget anything and the process is easy to follow.

If you have a question or would like to add some more information, feel free to send me a message on twitter or an email!

Thanks for reading and bye! :)