Bad window look on macOS with light theme enabled when using dark theme in Zed

[widersky]

Check for existing issues

• [X] Completed

Describe the bug / provide steps to reproduce it

When I use a light theme in macOS, the dark theme in Zed looks not the best. On the screenshot below you can see an example - in the background is Slack, in the foreground Zed. Notice the lack of a dark 1px border around the Zed window.

Environment

macOS 13.1, Zed 0.67.5

If applicable, add mockups / screenshots to help explain present your vision of the feature

No response

If applicable, attach your ~/Library/Logs/Zed/Zed.log file to this issue

No response

[michealp-coder]

I think I have the same issue too (Zed v0.120.2)

The window border on Zed (with a light them), is extremely "thick".

It's a thick grey border (using the Atelier Sulphurpool Light, theme)

Where as any other macOS app (like Safari, Outlook, etc), the window has no border.

As such, it make the window drop shadow odd looking and make Zed look non-native.

@widersky are you still experiencing this?

[widersky]

@michealp-coder I'm not sure I understand correctly. My case is when macOS uses a light and Zed uses a dark theme. In this case, Zed has a kind of "blurred" edge:

For comparison, the IntelliJ IDEA window:

[widersky]

FYI: VSCode is adding proper setting to fix this behavior in their 1.86 release ("New setting to enforce system color theme").

[notpeter]

Circling back on this issue and wanted to clarify the actual request(s) here.

I think the matching native controls to whether the theme is dark/light is covered by this:

• https://github.com/zed-industries/zed/issues/13673

Other than that, we don't really use native controls (e.g. our context menus are native GPUI, not MacOS).

@widersky is this a request for the theme layer to add support for themes to have two border colors which are selected based on the MacOS dark mode / light mode setting? Or am I missing something.

[widersky]

@notpeter

As you can see in the photo in the original post at the very top, the native window in macOS in dark mode has two single-pixel borders. This happens regardless of whether macOS has light or dark mode set - if the IDE has dark mode set, it behaves as if the entire macOS also had dark mode. Thanks to this, the window looks solid and does not have the impression that it is "blurred" at the edges. I only meant the appearance of the window - the appearance of context menus is not that important to me.

To sum up - if macOS has a light mode and the editor has a dark mode, Zed (when using one of the themes defined as dark) should look as if macOS had a dark mode set.

[notpeter]

To sum up - if macOS has a light mode and the editor has a dark mode, Zed (when using one of the themes defined as dark) should look as if macOS had a dark mode set.

Apologies for being a design-blind (practically speaking), but what does "should look as if macOS had a dark mode set" mean and how would we implement this? Specifically what is different?

To my eye Zed looks similar to VSCode and Slack/JetBrains look like they have an ugly one pixel black border. But luckily I'm not a designer.

[widersky]

There are 4 windows in the attached screenshot. 3 editors/IDEs (1) and a Finder fragment (2) indicating that macOS is in light mode. VSCode and PHPStorm with a dark theme display the correct border, while Zed does not.

Above, a similar arrangement of windows when macOS has dark mode enabled - in such a scenario, the Zed window looks fine.

EDIT: In one of the updates, VSCode introduced a setting that forces the dark mode on the window so that the border displays properly when macOS is in light mode. I mention this a bit above:

https://github.com/zed-industries/zed/issues/5049#issuecomment-1914690263

EDIT2:

look like they have an ugly one pixel black border

This is the border I'm talking about - this is what it SHOULD look like 😅