Closed jansol closed 6 months 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
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.
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).
+1 ! for window transparency and blur
Reminder that issue popularity is programmatically tracked based on :+1: reactions to the top post, not by comments.
Since blur is a particularly popular component to this request, the platform-specific features for implementing that appear to be:
CGSSetWindowBackgroundBlurRadius(runtime::AnyObject, NSInteger, i64)
So upon further inspection I concluded that the only somewhat consistent solution across platforms is:
CGSSetWindowBackgroundBlurRadius
(should be safe as long as Terminal.app relies on it)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.
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.
@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.
@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.
This is now available in v0.130.0-pre.
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.
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.
Any chance we could get this on Linux too?
Still have to fix some borders, but looks so sweet :)
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"
}
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.
simplescreenrecorder-2024-08-07_15.19.23.mp4
Sorry for off topic but what theme is that @Jervx?
simplescreenrecorder-2024-08-07_15.19.23.mp4
Sorry for off topic but what theme is that @Jervx?
Catppuccin Themes
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
Is possible to change the transparent level? Something like 0.75, 0.5.
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.
Unfortunately they have none of this information in their docs, they should, it's important.
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...
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 :)
I set the alpha channel to 60
.
With no file opening, the background is almost 100% transparent:
With file opening:
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 :)
Still have to fix some borders, but looks so sweet :)
Your setup looks amazing, can you give me the config experimental.theme_overrides
json?
"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.
Is there anyway this works on windows? I mean, i tried changing the settings and all but no effect?
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
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
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...
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
Check for existing issues
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