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?
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.
