Skip to content

feat: Linux 托盘图标行为改为与 Windows 一致 - #255

Open
VillagerTom wants to merge 6 commits into
appshubcc:mainfrom
VillagerTom:linux_tray_icon
Open

feat: Linux 托盘图标行为改为与 Windows 一致#255
VillagerTom wants to merge 6 commits into
appshubcc:mainfrom
VillagerTom:linux_tray_icon

Conversation

@VillagerTom

@VillagerTom VillagerTom commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

服务开关开启时,Linux 托盘使用 svg 单色图标,由桌面环境渲染图标颜色。其他与 Windows 一致。
第二个 commit (525abb7) 是 DeepSeek 加的,说是其他项目的成功经验。。

@VillagerTom

Copy link
Copy Markdown
Contributor Author

不对还是有点问题,图标总是黑的

@VillagerTom

Copy link
Copy Markdown
Contributor Author

按道理讲代码是对的 (fill="currentColor"), 可能是我的桌面本身的bug

@VillagerTom

Copy link
Copy Markdown
Contributor Author

来自 DeepSeek

因为 SVG 作为独立文件被 GTK app_indicator_set_icon_theme_path() 加载,currentColor 没有父级 CSS 上下文,默认 fallback 为黑色。

@VillagerTom
VillagerTom marked this pull request as draft July 9, 2026 05:32
@VillagerTom

Copy link
Copy Markdown
Contributor Author

来自 Gemini


在 Linux 环境下(通常基于 GTK 桌面环境如 GNOME、Ubuntu 等),tray_manager 无法像 macOS 那样通过代码中的 isTemplate: true 自动让黑色图标变成白色。Linux 系统通常依赖于 AppIndicator / StatusNotifierItem (SNI) 规范,它需要通过特定的图标命名或打包方式来让系统主题接管图标颜色。
请按照以下方法解决 Linux 下图标总是黑色的问题:

1. 使用 StatusNotifier 图标命名规范

Linux 系统(特别是 GNOME 和 Unity)有一套专门针对状态栏(单色)图标的命名规范。如果你的图标命名包含 -symbolic 后缀,系统的主题引擎(如 Ubuntu 的 Yaru 主题)就会自动识别它,并根据顶栏的深浅色自动为其渲染颜色。

  • 重命名你的图标文件:将类似 tray_icon.png 改为 tray_icon-symbolic.svg(强烈建议使用 SVG 矢量图)。
  • 使用纯黑色绘制:图标源码内部使用纯黑色(#000000)。
  • 系统在加载带有 -symbolic 的图标时,会自动将其黑色像素替换为当前系统主题的前景色(例如深色顶栏下自动变白)。

2. 将图标放入 Linux 系统图标路径

Linux 状态栏插件(底层基于 libappindicator)在寻找 -symbolic 图标时,通常要求图标必须存在于系统的图标搜索路径中,直接从 Flutter 的 assets 相对路径读取可能无法触发系统的自动反色机制。
在打包或分发 Linux 应用时,你需要将图标安装到系统的指定目录:

  • 路径:/usr/share/icons/hicolor/scalable/apps/ 或 ~/.local/share/icons/hicolor/scalable/apps/
  • 文件名:your-app-tray-symbolic.svg
  • 并在 Flutter 代码中,直接传入图标的名称(不要带路径和后缀),让系统自己去查找:
// 不要写 assets/images/icon.png
// 如果系统路径有 your-app-tray-symbolic.svg,直接传入名称:
await trayManager.setIcon('your-app-tray-symbolic'); 

@VillagerTom

Copy link
Copy Markdown
Contributor Author

来自 @appshubcc (https://t.me/appshub_chat/192029)

话说,这个库本来就是没有用官方的,你本地试一下,能修也可以合的

@VillagerTom

VillagerTom commented Jul 9, 2026

Copy link
Copy Markdown
Contributor Author

哦这一段是 Gemini 瞎编的

  • 并在 Flutter 代码中,直接传入图标的名称(不要带路径和后缀),让系统自己去查找:
// 不要写 assets/images/icon.png
// 如果系统路径有 your-app-tray-symbolic.svg,直接传入名称:
await trayManager.setIcon('your-app-tray-symbolic'); 

c9f05fa 实现了哈Gemi的幻想

@VillagerTom

Copy link
Copy Markdown
Contributor Author

丢弃了 525abb7

如无必要,勿增实体。

@VillagerTom
VillagerTom force-pushed the linux_tray_icon branch 2 times, most recently from b28f3b7 to 8cb6e66 Compare July 13, 2026 01:39
@appshubcc
appshubcc force-pushed the main branch 3 times, most recently from bb605a0 to 570c649 Compare July 18, 2026 17:07
避免直接传递 assets 图标路径导致没有 currentColor 上下文
- isStart=true 时搜索系统 symbolic 图标:
  ~/.local/share/icons/hicolor/symbolic/apps/bettbox-symbolic.svg
  /usr/local/share/icons/hicolor/symbolic/apps/bettbox-symbolic.svg
  /usr/share/icons/hicolor/symbolic/apps/bettbox-symbolic.svg
- 找到则通过 icon 主题路径机制使用,GTK 自动着色适应主题
- 未找到则回退到与服务关闭一致的图标行为
P.S. RPM 配置删除冗余的 chmod +sx
- Config: add linuxTrayIconUsePng field to AppSettingProps
- Tray icon: when linuxTrayIconUsePng is true, fallback to
  png option, as same as Windows; remove _symbolicIconExists
  runtime detection
- Invert icon: set invertTrayIcon scope from isWindows to
  !isMacOS (tray.dart); show _TrayIconInvertItem when
  system.isWindows || (system.isLinux && linuxTrayIconUsePng)
- Theme UI: new _LinuxTrayIconUsePngItem toggle (Linux only);
  toggling calls updateTray(true) to refresh immediately
- l10n: add linuxTrayIconUsePng / linuxTrayIconUsePngDesc in
  en/ru/zh_CN/zh_TC; regenerate messages_*.dart + l10n.dart
- Generated: regenerate freezed + json_serializable
@CyberVacation

Copy link
Copy Markdown
Contributor

We don't need trayManager to deal with this because we can use theme-adaptive tray icon SVG in KDE plasma.
icon_monochrome.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -16 400 400" width="400" height="400">
    <defs>
    <style id="current-color-scheme" type="text/css">
      .ColorScheme-Text {
        color: #232629; /* Placeholder for system icon/text color */
      }
    </style>
  </defs>
  <path class="ColorScheme-Text" fill="currentColor" d="M322.68,276h-25.35c-5.34,0-9.18-5.13-7.68-10.25l45.93-156.5c3-10.22,12.38-17.24,23.03-17.24h25.34c5.34,0,9.18,5.13,7.68,10.25l-45.93,156.51c-3,10.22-12.38,17.24-23.03,17.24Z"/>
  <path class="ColorScheme-Text" fill="currentColor" d="M211.18,322h-41.01c-8.01,0-13.77-7.7-11.52-15.38l69.74-237.63c4-13.63,16.5-22.99,30.7-22.99h41.02c8.01,0,13.77,7.69,11.51,15.38l-69.74,237.64c-4,13.63-16.5,22.99-30.7,22.99Z"/>
  <path class="ColorScheme-Text" fill="currentColor" d="M75.69,368H16.01c-10.68,0-18.36-10.26-15.35-20.5L95.05,25.86C99.55,10.53,113.62,0,129.59,0h59.67c10.68,0,18.36,10.26,15.36,20.51l-94.39,321.63c-4.5,15.33-18.56,25.86-34.54,25.86Z"/>
</svg>

@VillagerTom

VillagerTom commented Jul 23, 2026

Copy link
Copy Markdown
Contributor Author

@CyberVacation Sadly it seems doesn't work for quickshell. Anyway, I'll pick for KDE plasma. Thanks.

@VillagerTom

Copy link
Copy Markdown
Contributor Author

@appshubcc 坏了,我发现 #274 在这边重新出现了

@VillagerTom
VillagerTom marked this pull request as ready for review July 23, 2026 06:17
@appshubcc
appshubcc force-pushed the main branch 2 times, most recently from 95bde57 to c0bb574 Compare August 13, 2026 04:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants