GPUI window transparency

jansol commented 1 year ago

Check for existing issues

[X] Completed

Describe the feature

I don't have access to the alpha so not sure if this is supported but judging from screenshots it does not seem to be the case.

It would be very nice to have the option to make the background of zed windows slightly transparent, similarly to my current go-to setup of running neovim in alacritty with 75% background opacity.

Besides the obvious aesthetic that blends in nicely with almost any wallpaper/theme, this also allows me to put an actively updating window behind the editor (either an unrelated application or something that is hot reloading the file I am editing). The background dims the window behind the editor enough so it does not distract from editing, but still allows me to monitor the changes in the other window live without having to sacrifice editing space or alt+tabbing around.

At least on Linux it is sometimes possible to request the compositor to adjust the opacity of specific windows, but that also makes text transparent. For readability it would be important that the application handles background transparency by itself, so text and important UI symbols can remain fully opaque. The main gotcha with this appears to be that different platforms have different requirements for transparent windows (e.g. macOS wants non-premultiplied alpha, Wayland wants premultiplied).

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

SilentGlasses commented 1 year ago

To each their own but why would you want transparency on an editor? Terminal I can understand to a point.

Pretty sure there will be an option at some point but nothing that I've seen as yet.

The docs are all here by the way... https://zed.dev/docs/configuration/configuring-zed

jansol commented 1 year ago

Why would a GUI text editor be different from a terminal? (especially if the main function of the terminal is... running a text editor)

There are some practical uses for it like mentioned in the OP (hot reloading apps e.g. for shaders, api references, research papers outlining an algorithm I'm in the middle of implementing, ...) and sometimes I simply enjoy the mood set by my desktop wallpaper while being productive in a maximized editor window.

nervenes commented 11 months ago

Support for window transparency and blurring is something I personally expect in any modern IDE or Text Editor, unfortunately in VSCode's case we have to use an extension, which makes the whole process hacky as we have to inject custom attributes to the built CSS.

I'd like to propose being able to control every panels transparency and blur effect from the settings, giving the option for full window transparency (e.g all panels are transparent), and also to the users who likes the macOS standard, to only have the sidebars transparent with blur (similar to Xcode).

WilliamWelsh commented 8 months ago

+1 ! for window transparency and blur

jansol commented 8 months ago

Reminder that issue popularity is programmatically tracked based on :+1: reactions to the top post, not by comments.

jansol commented 8 months ago

Since blur is a particularly popular component to this request, the platform-specific features for implementing that appear to be:

macOS:
- NSVisualEffectView Apple's way or the highway - note that the original configuration values for the view got deprecated very quickly
- What they don't want you to know is the (apparently) widely used undocumented CGSSetWindowBackgroundBlurRadius(runtime::AnyObject, NSInteger, i64)
Windows:
Linux/Wayland: (plain alpha blending is part of Wayland core)
- org_kde_kwin_blur seems to be the only application-controlled way that is actually usable somewhere
- ext_blur_v1 based on org_kde_kwin_blur so migrating should be easy once this gets accepted
- Some compositors have their own blur settings, but those are generally not directly controllable by the application
- Some compositors are explicitly against having blur support
Linux/X11:
- the UNIX philosophy, not application-controllable
- KDE has some settings for forcing blur, seems to be at least somewhat application-controllable
- GNOME has extensions for forcing blur, does not seem to be application-controllable

jansol commented 8 months ago

So upon further inspection I concluded that the only somewhat consistent solution across platforms is:

The undocumented CGSSetWindowBackgroundBlurRadius (should be safe as long as Terminal.app relies on it)
DWM_BLURBEHIND
org_kde_kwin_blur/ext_blur_v1

The NSVisualEffectView and Acrylic/Mica materials have Opinions that are based on the system theme (tint towards bright/dark), which gets very awkward unless one designs separate themes for dark and light mode and automatically switches based on the active system theme. Additionally such themes would not really look the intended way on platforms other than the one they were created on. OTOH with the plain blur the theme can specify a semitransparent background color to tint the background in the desired way.

I started working on the somewhat portable solution (well, the macOS part of it - PR coming as soon as I have time to clean it up a bit), but I won't be touching the more platform specific ones. Those should be easy enough to add as alternatives later on if someone feels like they would be good to have.

Luk4h commented 7 months ago

Hello @jansol, a lover of the transparent look here as well. I would like to know how is your progress so far? I tried myself to achieve something and so far I got to render the blurred/transparent view below the zed view. I believe meaning if we got to remove the background of the zed view, to see the blurred/transparent background. I am not very comfortable with rust, which made a bit hard for me to find anything related to the zed background, at least not relevant. And my tries with applying a transparent background with themes was not successful as well. I believe this would be the first step to achieve the style we are looking for, later we would need to create a way to toggle this, since most users do not want it. I would love to contribute to this feature since I love the look. If you are willing to collaborate, or anyone else interested. Hit me up. I have forked the zed repo with my progress.

jansol commented 7 months ago

@Luk4h I got it working with the CGSSetWindowBackgroundBlurRadius approach, which turned out to be much simpler more convenient for theming than NSVisualEffectView. Right now my implementation is mainly stuck in figuring out how to do the plumbing from the theme to the GPUI window. I've made some decent progress with that, but it's still missing some bits before it's ready for a PR.

Luk4h commented 7 months ago

@jansol Are you able to share your work? Interested in seeing your approach, since It was what I aimed for, but got lost and ended up using the NSVisualEffectView, which can't get it to work together with the CAMetalLayer.

JosephTLyons commented 6 months ago

This is now available in v0.130.0-pre.

krstp commented 6 months ago

A snippet of code that show a guidance how to properly implement it would be much appreciated. It is not exactly clear how to leverage it correctly. Thanks.

Luk4h commented 6 months ago

A snippet of code that show a guidance how to properly implement it would be much appreciated. It is not exactly clear how to leverage it correctly. Thanks.

On the patch notes it mentions how to specify the new property. You can also override it using the "experimental.theme_overrides" property on your settings file.

ThatOneCalculator commented 6 months ago

Any chance we could get this on Linux too?

xcrap commented 6 months ago

Still have to fix some borders, but looks so sweet :)

evwltrs commented 6 months ago

For the impatient Gruvbox users like me based off @xcrap's config.

"experimental.theme_overrides": {
    "background.appearance": "blurred",
    "background": "#4c464290",
    "editor.background": "#00000030",
    "editor.gutter.background": "#00000030",
    "tab_bar.background": "#00000030",
    "terminal.background": "#00000030",
    "toolbar.background": "#00000030",
    "tab.active_background": "#28282820",
    "tab.inactive_background": "#00000000",
    "status_bar.background": "#00000030",
    "title_bar.background": "#00000030",
    "panel.background": "#00000030",
    "border.variant": "#00000000",
    "scrollbar.track.border": "#00000000",
    "editor.active_line.background": "#00000000"
  }

jansol commented 5 months ago

Linux support for transparent and blurred windows has been merged in #10973

Blur is only supported on Wayland with compositors supporting the kde-blur protocol for now -- i.e. Plasma.

On X11 it may be possible to configure a compositor to blur window backgrounds but Zed has no way to influence that.

Jervx commented 2 months ago

https://github.com/user-attachments/assets/f47a8bd9-cf13-475b-806d-ccc3037454df

hfjallemark commented 2 months ago

simplescreenrecorder-2024-08-07_15.19.23.mp4

Sorry for off topic but what theme is that @Jervx?

Jervx commented 2 months ago

simplescreenrecorder-2024-08-07_15.19.23.mp4

Sorry for off topic but what theme is that @Jervx?

Catppuccin Themes

martin503 commented 2 months ago

Dracula config I use for transparent:

"experimental.theme_overrides": {
      "background.appearance": "transparent",
      "background": "#282a3669",
      "editor.background": "#282a3669",
      "editor.gutter.background": "#282a3669",
      "tab_bar.background": "#282a3669",
      "terminal.background": "#282a3600",
      "toolbar.background": "#282a3669",
      "tab.active_background": "#282a3642",
      "tab.inactive_background": "#282a3669",
      "status_bar.background": "#282a3669",
      "title_bar.background": "#282a3669",
      "panel.background": "#282a3679",
      "border.variant": "#282a3669",
      "scrollbar.track.border": "#282a3669",
      "editor.active_line.background": "#420069",
      "players": [
        {
          "selection": "#420069"
        }
      ]
    }

kudos, great feature! Now waiting for image in background https://github.com/zed-industries/zed/discussions/11086 :D

AurevoirXavier commented 1 month ago

Is possible to change the transparent level? Something like 0.75, 0.5.

xcrap commented 1 month ago

Is possible to change the transparent level? Something like 0.75, 0.5.

It's not like rgba values, it's hexadecimal values. The first six characters (RRGGBB) represent the red, green, and blue components, just like in a normal hexadecimal color code, The last two characters (AA) represent the alpha (transparency) channel, where 00 is fully transparent and FF is fully opaque. So yes, you can control the transparency as you like using hexadecimal values instead of the more common opacity in css for example.

For example, black with full transparency, 00000000, black with no transparency 000000FF, black with a tiny bit of transparency 000000DD.

Here's an example converter: https://rgbacolorpicker.com/rgba-to-hex#google_vignette

When the color has no transparency you don't need to add nothing, for example pure white #FFFFFFF you don't need to add any transparency so it stays like #FFFFFF instead of #FFFFFFFF which is the same, black #000000FF is the same as #000000 as FF would equals the opacity of 1, meaning no transparency.

xcrap commented 1 month ago

Unfortunately they have none of this information in their docs, they should, it's important.

AurevoirXavier commented 1 month ago

Is possible to change the transparent level? Something like 0.75, 0.5.

It's not like rgba values, it's hexadecimal values. The first six characters (RRGGBB) represent the red, green, and blue components, just like in a normal hexadecimal color code, The last two characters (AA) represent the alpha (transparency) channel, where 00 is fully transparent and FF is fully opaque. So yes, you can control the transparency as you like using hexadecimal values instead of the more common opacity in css for example.

For example, black with full transparency, 00000000, black with no transparency 000000FF, black with a tiny bit of transparency 000000DD.

Here's an example converter: https://rgbacolorpicker.com/rgba-to-hex#google_vignette

When the color has no transparency you don't need to add nothing, for example pure white #FFFFFFF can be like does do not need to add #FFFFFFFF

Yep, I know. But thanks for your explnation.

I mean if there's a way to specify a 0.5 (which can be automatically converted to hex) or DD and apply or append these to every background, that would be excellent.

Currently, I need to identify every color utilized by the theme and add the alpha channel to each value. Then, override the values...

xcrap commented 1 month ago

I mean it's easy to convert any color to hex and vice versa, the alpha channel you can convert the alpha value (from 0 to 1) to a percentage and then into a hexadecimal value (00 to FF).

Ex: Alpha: 0.125 (12.5%) → 12.5% of 255 = 32 → 20 in hex

But the above link you can convert any rgba color to their hex with alpha equivalent. When you change the theme settings you have a almost real time preview so it's very easy to change and check and mostly colors will have a common transparency levels or you will use like 3 or 4 different depending on each setting but it's not the worse. I think they mentioned this use about something related with GPU rendering but i'm not sure, but they could have a converted to accept rgba or hsla values or example, not sure if it's a great priority as the theme development as the plugins still need a lot of work. The theme converted they have is rust based and there are some themes I would love to port but it's too much work :)

AurevoirXavier commented 1 month ago

I set the alpha channel to 60.

With no file opening, the background is almost 100% transparent:

With file opening:

xcrap commented 1 month ago

Keep in mind for example the editor is affected by two backgrouds, so there are multiple layers.

"background": "#00000060", "editor.background": "#00000060",

So if you set full transparency in the main background and set some transparency in the editor it's one thing, if you set some transparency in the main background plus some transparency in the editor background it will affect differently.

"background.appearance": "blurred",

Also keep in mind that having the background appearance blurred is different than transparent, this is something you'll have to play with. The best thing is start with a clean slate and using the auto complete you figure out the values for each thing. In their docs they recommend to see a theme to figure out the settings but yes, they should have much more info in the settings docs to help us figure everything out :)

AvikantSrivastava commented 1 month ago

Still have to fix some borders, but looks so sweet :)

Your setup looks amazing, can you give me the config experimental.theme_overrides json?

xcrap commented 1 month ago

 "experimental.theme_overrides": {
        "background.appearance": "blurred",
        "background": "#09090bBB",
        "panel.background": "#00000000",
        "editor.background": "#00000000",
        "tab_bar.background": "#00000000",
        "terminal.background": "#00000000",
        "toolbar.background": "#00000000",
        "tab.inactive_background": "#00000000",
        "tab.active_background": "#3f3f4650",
        "border": "#00000000",
        "status_bar.background": "#00000000",
        "title_bar.background": "#00000000",
        "border.variant": "#00000000",
        "scrollbar.track.background": "#52525b20",
        "scrollbar.track.border": "#00000000",
        "scrollbar.thumb.background": "#52525b30",
        "scrollbar.thumb.border": "#00000000",
        "elevated_surface.background": "#00000090",
        "surface.background": "#00000090",
        "editor.active_line_number": "#ffffffcc",
        "editor.gutter.background": "#00000000",
        "editor.indent_guide": "#ffffff30",
        "editor.indent_guide_active": "#ffffff80",
        "editor.line_number": "#ffffff80",
        "editor.active_line.background": "#3f3f4640",
    },

This only works well if you're using a dark background on your computer. Also the Catppuccin Macchiato theme helps.

One of the best themes I've used in other editors is https://citylights.xyz/, I would love if someone could port this because I don't have Rust to use the theme porter, this theme with some subtle background transparencies would look amazing.

thedeveloper-sharath commented 1 month ago

Is there anyway this works on windows? I mean, i tried changing the settings and all but no effect?

maxiim3 commented 1 month ago

To each their own but why would you want transparency on an editor? Terminal I can understand to a point.

Pretty sure there will be an option at some point but nothing that I've seen as yet.

The docs are all here by the way... https://zed.dev/docs/configuration/configuring-zed

You want continuity in your overall theme. Also I like to have a slight transparency on my windows, I find it pretty and pleasant

lewyuburi commented 3 weeks ago

Looks great! Thanks!

"theme": {
  "mode": "system",
  "light": "One Light",
  "dark": "One Dark"
},
"experimental.theme_overrides": {
  "background.appearance": "blurred",
  "background": "#3b414daa",
  "title_bar.background": "#3b414ddf",
  "toolbar.background": "#282c3344",
  "tab_bar.background": "#2f343e33",
  "tab.inactive_background": "#2f343e00",
  "tab.active_background": "#282c3311",
  "panel.background": "#2f343e44",
  "editor.background": "#282c334f",
  "status_bar.background": "#3b414dee"
}

Pd: values from https://github.com/zed-industries/zed/blob/main/assets/themes/one/one.json

momchilvanchev commented 1 week ago

It would really be awesome if the transparency was cross theme. Meaning you don't have to set the actual color of each part, but you can set the overall transparency or individual transparency of the parts, regardless of the theme set...

Msouza91 commented 2 days ago

It would really be awesome if the transparency was cross theme. Meaning you don't have to set the actual color of each part, but you can set the overall transparency or individual transparency of the parts, regardless of the theme set...

Absolutely especially for weirdos like me that use the Automatic Light/Dark option for my setup and I have to pick one of the themes to look right... Weird how this was easier to get working, despite a more convoluted setup, with Neovim than with Zed while looking nicer. :(

https://github.com/user-attachments/assets/22801585-c3e5-4d7f-abc6-25a7cace18a0

zed-industries / zed