search

zed-industries / zed

Code at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
https://zed.dev
Other
48.9k stars 2.94k forks source link

Transparency / Blurry for Different Panels #9620

Closed Congyuwang closed 6 months ago

Congyuwang commented 7 months ago

Check for existing issues

Describe the feature

Related issue: #5040

I see that PR #9610 enables blurred / transparent window background, which is great. But it would be even more awesome to allow setting different parts of the window blurred / transparent, since making the text editing part opaque gives clearer code display.

For example, Xcode makes the left panel blurry, but the main editor part opaque:

截圖 2024-03-21 13 34 17

Having a blurred project / left panel gives a beautiful and native feel, while making the main editor part opaque is still most helpful for text editing.

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

No response

jansol commented 7 months ago

This is easy to do with #9610, since themes have different keys for the background of the project pane and the editor. If you make the editor background opaque, the project pane transparent, and set window background to blurred you get essentially the effect described here.

nervenes commented 5 months ago

This is easy to do with #9610, since themes have different keys for the background of the project pane and the editor. If you make the editor background opaque, the project pane transparent, and set window background to blurred you get essentially the effect described here.

Hi, how can i do this, what's the settings.json i need to configure?

jansol commented 5 months ago

It needs to be done in your theme, not settings. (but for testing and small tweaks you can use experimental.theme_overrides)

You need to set background.appearance to "blurred" or "transparent" and then make sure all background colors in your theme have an alpha value that is not "ff" (unless you want some individual backgrounds to be opaque).

DataRaj commented 2 months ago

You need to set background.appearance to "blurred" or "transparent" and then make sure all background colors in your theme have an alpha value that is not "ff" (unless you want some individual backgrounds to be opaqu

please share your configs, I not working in my linux machine

jansol commented 2 months ago

The easiest way to get started is to install a theme that is already transparent such as Catpuccin Blur from the Extensions store.

Also, if you are using X11 without a compositor I don't think transparency can work properly. And blur on Linux currently only works on KDE when running in Wayland mode.