tauri-apps / tauri-apps/tauri

[bug] titleBarStyle: "Transparent" Uses Opposite Hex Color for Background on macOS

Open
#12,349 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

platform: macOS status: needs triage type: bug
Dominant language
Rust
Stars
111k
Forks
4k
Avg merge
2d 7h
Merged PRs (30d)
45

Description

Describe the bug

When setting "titleBarStyle": "Transparent" and specifying a backgroundColor in a Tauri app on macOS, the expected behavior is for the title bar to match the provided background color. However, instead of using the exact hex color, Tauri applies what seems to be the opposite color, or black.

Reproduction

Set the titleBarStyle to "Transparent" and specify a backgroundColor in tauri.conf.json:

{
  "tauri": {
    "windows": [
      {
        "titleBarStyle": "Transparent",
        "backgroundColor": "#00FF00"
      }
    ]
  }
}
Expected behavior

Observe that the title bar does not match the given background color.

Example: Setting a green background (#00FF00) results in a black title bar.

A temporary fix is to manually use the opposite hex value to get the intended background color.

Full tauri info output
[✔] Environment
    - OS: Mac OS 15.1.1 arm64 (X64)
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.83.0 (90b35a623 2024-11-26)
    ✔ cargo: 1.83.0 (5ffbef321 2024-10-29)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-aarch64-apple-darwin (default)
    - node: 20.18.0
    - npm: 10.9.2

[-] Packages
    - tauri 🦀: 2.1.1
    - tauri-build 🦀: 2.0.3
    - wry 🦀: 0.47.2
    - tao 🦀: 0.30.8
    - @tauri-apps/api : 2.1.1 (outdated, latest: 2.2.0)
    - @tauri-apps/cli : 2.1.0 (outdated, latest: 2.2.3)

[-] Plugins
    - tauri-plugin-shell 🦀: 2.2.0
    - @tauri-apps/plugin-shell : not installed!
    - tauri-plugin-sql 🦀: 2.2.0
    - @tauri-apps/plugin-sql : 2.2.0

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../dist
    - devUrl: http://localhost:1420/
    - framework: React
    - bundler: Vite
Stack trace

No response

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the tauri.conf.json window settings using titleBarStyle: "Transparent" and backgroundColor on macOS, then trace how those values reach the native window implementation. Reproduce the green #00FF00 case on macOS and compare the configured color with the rendered title bar; done means the title bar matches the supplied color.

Written by the indexing model from the issue text.

Assessment

Tech stack
macos, rust
Domain
desktop, operating-systems
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.