generated from cotes2020/chirpy-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
39 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
--- | ||
title: Implementing Tray Icon for Common Linux Environments - Epilog | ||
date: 2023-06-01 17:43:00 +/-0000 | ||
categories: [Java, SVG] | ||
tags: [coding] # TAG names should always be lowercase | ||
--- | ||
Cryptomator issue #1645 | ||
|
||
Please find the first post of this story [here](https://blog.purejava.org/posts/issue1645/). | ||
# Tray icons in GNOME and KDE | ||
|
||
It turns out, that Linux desktop environments behave quite differently. Mainly **GNOME** and **KDE** handle the coloring of tray icons in a different manor. | ||
|
||
**GNOME** calls them [symbolic icons](https://developer.gnome.org/documentation/tutorials/themed-icons.html) and has some requirements for the icons. Once they are followed, the icons recolor when a desktop theme changes: | ||
- the file name ends with `-symbolic.svg` | ||
- and is located in the appropriate folder, e.g. `/usr/share/icons/hicolor/48x48/apps my-app-symbolic.svg` | ||
|
||
**KDE** reads a contained `<style>` tag, that has CSS instructions and [recolors the tray icon](https://develop.kde.org/docs/plasma/theme/theme-details/#using-system-colors) according to the currently activated desktop theme. | ||
|
||
An appropriate icon looks like this: | ||
```xml | ||
<svg height="16" viewBox="0 0 42 42" width="16" xmlns="http://www.w3.org/2000/svg"> | ||
<style id="current-color-scheme" type="text/css"> | ||
.ColorScheme-Text { | ||
color:#232629; | ||
} | ||
</style> | ||
<g fill-rule="evenodd" style="fill:#f2f2f2;fill-opacity:1" class="ColorScheme-Text" fill="currentColor"> | ||
<path d="m15.591 35.824c-.019.009-.936.775-1.458 1.208a.418.418 0 0 1 -.627-.111 9.322 9.322 0 0 1 -.3-5.974 15.843 15.843 0 0 0 2.894 2.043c.051 1.03-.161 2.644-.509 2.834zm6.409-6.824h-2l.5-5a2 2 0 1 1 1 0zm-14.544-3.241.744-1.366a1.579 1.579 0 0 0 -.019-1.557l.653-1.2c.2.014-.03-.113.165-.14.051-.217-.051-.336 0-.5a3.269 3.269 0 0 0 0-1.5 7.151 7.151 0 0 1 0-3 2.366 2.366 0 0 0 -2.378 1.448 2.409 2.409 0 0 0 .229 2.661l-.7 1.278a1.779 1.779 0 0 0 -1.317.891l-.741 1.372a1.577 1.577 0 0 0 -.019 1.487 3.028 3.028 0 0 0 -2.746 1.525 2.648 2.648 0 0 0 .044 2.631.748.748 0 0 0 .981.266.656.656 0 0 0 .284-.92 1.37 1.37 0 0 1 -.023-1.361 1.6 1.6 0 0 1 2.079-.63 1.408 1.408 0 0 1 .672 1.95 1.546 1.546 0 0 1 -1.2.78.688.688 0 0 0 -.636.749.707.707 0 0 0 .717.6.789.789 0 0 0 .082 0 2.989 2.989 0 0 0 2.322-1.513 2.669 2.669 0 0 0 -.377-3.084 1.767 1.767 0 0 0 1.184-.867zm13.544-10.759a13.013 13.013 0 0 1 5-1 21.6 21.6 0 0 1 4.5.5 9.312 9.312 0 0 0 -9.5-8.5c-5.794 0-9.176 4-9.5 8.5a21.858 21.858 0 0 1 4.5-.5 12.819 12.819 0 0 1 5 1zm3.5-5c1.209 0 2.5.866 2.5 2h-5c0-1.134 1.291-2 2.5-2zm-7 0c1.209 0 2.5.866 2.5 2h-5c0-1.134 1.291-2 2.5-2zm14.473 6a8.067 8.067 0 0 0 -8.08 8v2.141a3.891 3.891 0 0 0 -2.893 3.734v5.125a23.166 23.166 0 0 1 -4.174-1.623 7.857 7.857 0 0 1 -.027.878 3.263 3.263 0 0 1 -.729 2.074l-1.794 1.483a.379.379 0 0 1 -.276.188h-4c-1.324 0-2.346-1.336-2.653-3.343a7.058 7.058 0 0 1 .234-3.18 3.477 3.477 0 0 1 1.636-2.157 1.868 1.868 0 0 1 .783-.32h1.5a8.035 8.035 0 0 1 -1.5-5 11.1 11.1 0 0 1 .5-3 2.519 2.519 0 0 0 0-1.5 13.272 13.272 0 0 1 -.5-3.5c6.687-1.936 11 0 11 0s4.319-1.955 11 0"/> | ||
<path d="m39 28h-10v-4a3.13 3.13 0 0 1 3-3 3.087 3.087 0 0 1 3 3v1a1.034 1.034 0 0 0 1 1h1a1.034 1.034 0 0 0 1-1v-1a6 6 0 0 0 -12 0v4h-1a2.073 2.073 0 0 0 -2 2v6a2.073 2.073 0 0 0 2 2h14a2.073 2.073 0 0 0 2-2v-6a2.073 2.073 0 0 0 -2-2zm-5.391 5.94a1.609 1.609 0 0 1 -3.217 0v-1.876a1.609 1.609 0 0 1 3.217 0z"/> | ||
</g> | ||
</svg> | ||
``` | ||
|
||
It's important to note, that an icon can be addressed in different ways. | ||
|
||
The underlying library offers [`app_indicator_new`](https://github.com/AyatanaIndicators/libayatana-appindicator/blob/d214fe3e7a6b1ba8faea68d70586310b34dc643c/src/app-indicator.c#L1813-L1825). The second parameter is the _icon_name_, which can be the canonical name of the icon to locate it within the icon search path (commonly `/usr/share/icon` and `~/.local/share/icon`). | ||
|
||
Or your use the full path to the icon file on the file system as a second parameter. |