Add post 2023-06-01-issue1645-4.md

_posts/2023-06-01-issue1645-4.md

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