How can I enable colour on my custom GNOME icons?

Question

I'm a relatively new Linux user and I've been trying to customise my icons. However, when I try to change my "Show application" icon, it only appears in black and white.

The icon should look like this

but ends up looking like this

Is there any way I can enable this icon to have colour?

I am running Ubuntu 18.04.2 LTS and the svg file is here in a Google Drive link (I don't know if there's a better way to host it) https://drive.google.com/file/d/1e680s8PoXJqECs6vFHdy9BR6nQfjg6DN/view?usp=sharing I also used the terminal to move the new svg ``` sudo mv '/home/vincent/Downloads/view-app-grid-symbolic.svg' '/usr/share/icons/Adwaita/scalable/actions' ``` — Vincentmario, Apr 28 '19 at 16:05
Sorry, I don't know what exactly you mean. I haven't installed anything that modifies the dock and I've used Gnome Tweaks to edit stuff as you can see here: https://imgur.com/a/kxM0gph I'm also trying to follow the link you sent me but I'm having trouble making it work. I also would've thought I would've found "view-app-grid-symbolic.svg" in the .css file so I could edit the colours from there, but I couldn't find anything. — Vincentmario, Apr 28 '19 at 16:27
https://i.stack.imgur.com/gCrxA.png let me write the steps for 18.04. but the steps are almost similar to this post https://askubuntu.com/a/1124586/739431 — PRATAP, Apr 28 '19 at 16:56

score 2 · Accepted Answer · edited Apr 28 '19 at 18:08

Install "User Themes" gnome-shell extension from Ubuntu Software. (this is required to select the edited shell theme file)
Create a .themes folder in home directory, if you have previously created it, then ignore this step.
Copy the required files from the default shell theme direcotry /usr/share/gnome-shell/theme/ubuntu.css with the below command in terminal

Command:
```
mkdir ~/.themes/myshell && mkdir ~/.themes/myshell/gnome-shell && cp -r /usr/share/gnome-shell/theme/* ~/.themes/myshell/gnome-shell/
```
Delete the file gnome-shell.css and rename the file ubuntu.css as gnome-shell.css
Close all, Open gnome-tweaks and choose MyShell from the drop down under User Themes

Open the file gnome-shell.css from the ~/.themes/myshell/gnome-shell/ directory and go to line number around 1301 and find below content.

Content:

.search-provider-icon,
.list-search-result, .app-well-app .overview-icon,
.app-well-app.app-folder .overview-icon,
.show-apps .overview-icon,
.grid-search-result .overview-icon {
  color: #eeeeec;
  border-radius: 4px;
  padding: 6px;
  border: 1px solid transparent;
  transition-duration: 100ms;
  text-align: center; }

Edit the Content like below, save & close:

.search-provider-icon,
.list-search-result, .app-well-app .overview-icon,
.app-well-app.app-folder .overview-icon,
.show-apps .overview-icon,
.grid-search-result .overview-icon {
 color: #eeeeec;
 border-radius: 4px;
 padding: 6px;
 border: 1px solid transparent;
 transition-duration: 100ms;
 text-align: center; }

.show-apps .show-apps-icon { border: none; background-image: url(005-book.svg); background-size: contain; color: transparent; transition-duration: 0s; -st-background-image-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); }

.show-apps:hover .show-apps-icon, .show-apps:active .show-apps-icon, .show-apps:checked .show-apps-icon, .show-apps:focus .show-apps-icon { color: transparent; background-image: url(005-book.svg); -st-background-image-shadow: 0 3px 4px rgba(0, 0, 0, 0.28); transition-duration: 0.15s; }

Take a backup of the file view-app-grid-symbolic.svg and delete it.
Copy the file 005-book.svg to ~/.themes/myshell/gnome-shell
Restart the shell with Alt+F2, type r and press Enter.

It worked! Thank you so much, this is great. I tried to follow the other guide but I thought I needed to download those unavailable files. Thank you so much for your help! — Vincentmario, Apr 28 '19 at 17:59

How can I enable colour on my custom GNOME icons?

1 Answers1