Skip to content

fix(macos): use monochrome template icon for menu bar tray#420

Open
sopenlaz0 wants to merge 3 commits intoZackriya-Solutions:mainfrom
sopenlaz0:fix/macos-tray-icon-template
Open

fix(macos): use monochrome template icon for menu bar tray#420
sopenlaz0 wants to merge 3 commits intoZackriya-Solutions:mainfrom
sopenlaz0:fix/macos-tray-icon-template

Conversation

@sopenlaz0
Copy link
Copy Markdown

@sopenlaz0 sopenlaz0 commented Apr 7, 2026

Fixes #421

Summary

The macOS menu bar tray icon currently displays the full-color app icon (purple gradient), which looks out of place next to other native monochrome menu bar icons.

This PR fixes that by:

  • Adding a dedicated monochrome tray icon (tray_icon.png) — a 44×44 template-safe version of the actual Meetily app icon
  • Setting icon_as_template(true) — tells macOS to treat it as a template image, so the system automatically renders it in the correct color for light/dark mode
  • Enabling the image-png Tauri feature — required for Image::from_bytes() PNG decoding

Before / After

Before After
Purple full-color app icon in menu bar Monochrome Meetily app icon that adapts to light/dark mode

Changes

File Change
frontend/src-tauri/icons/tray_icon.png New monochrome 44×44 version of the Meetily app icon
frontend/src-tauri/src/tray.rs Load dedicated tray icon + icon_as_template(true)
frontend/src-tauri/Cargo.toml Add image-png feature to tauri dependency

How it works

macOS menu bar icons should be template images — monochrome shapes on a transparent background. The system automatically:

  • Renders them black in light mode
  • Renders them white in dark mode
  • Applies vibrancy effects to match other system icons

Previously, tray.rs used app.default_window_icon() (the full-color purple app icon). This PR replaces that with a purpose-built monochrome version of the Meetily app icon embedded at compile time via include_bytes!.

The tray asset uses only black visible pixels plus alpha, so macOS can recolor it cleanly as a template image without carrying over the purple gradient.

Build verification

Note: A plain cargo check from frontend/src-tauri/ will fail before reaching typechecking because binaries/llama-helper-aarch64-apple-darwin (listed in tauri.conf.json externalBin) is missing from the repo checkout. This is a pre-existing issue unrelated to this PR. With a placeholder file in place, cargo check passes with only pre-existing warnings — none related to this change.

Test plan

  • Build on macOS (may need target-specific binaries/llama-helper-* placeholder — see note above)
  • Run the app — verify tray icon appears as a monochrome Meetily icon in the menu bar
  • Toggle macOS dark mode — icon should automatically adapt (black ↔ white)
  • Verify tray menu still works (start/stop recording, open window, quit)

sopenlaz0 and others added 3 commits April 7, 2026 12:20
The tray icon was using the full-color app icon (purple gradient),
which looked out of place in the macOS menu bar. This replaces it
with a dedicated monochrome pencil character icon and marks it as
a macOS template image so the system automatically handles
light/dark mode rendering.

Changes:
- Add `tray_icon.png`: monochrome 44x44 pencil icon (black on transparent)
- Update `tray.rs`: load dedicated tray icon via `include_bytes!`
- Set `icon_as_template(true)` for native macOS menu bar styling
- Enable `image-png` Tauri feature for PNG decoding support

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…dering

macOS template images render purely from the alpha channel — opaque
white pixels look identical to opaque black. Convert the 64 white
"eye" pixels to fully transparent so they appear as cutouts, letting
the menu bar background show through and preserving the Meetily
pencil character look in both light and dark mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace the hand-drawn pencil icon with a proper monochrome conversion
of the real Meetily app icon. Uses luminance-based alpha mapping so the
logo text and pencil character appear as detail within the rounded-rect
shape, matching the actual brand.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@sopenlaz0
Copy link
Copy Markdown
Author

Screenshot 2026-04-07 at 12 40 57 in the afternoon Screenshot 2026-04-07 at 12 41 16 in the afternoon

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.

macOS menu bar tray icon uses full-color purple app icon

1 participant