Blurry Background Available in Main

[Congyuwang]

This is a wonderful theme, and now easily my favorite theme. Thank you a lot for authoring it!

Now, zed has this nice PR zed-industries/zed#9610 that enables blurry / transparent background.

I'm thinking that perhaps following Xcode style, we can have certain parts of the editor to assume dark/light blurriness. Although I have yet only limited idea of the specifics.

[skarline]

Thank you so much for your kind words! I'm thrilled to hear you're enjoying it!

I've been really looking forward for that PR to be merged! As of now, I'm exploring how to integrate this feature in a way that is cohesive with the rest of the Zed UI. Hopefully, more themes will start implementing it soon enough.

If you, or anyone else, have any ideas of what it should look like, feel free to provide a theme_overrides configuration for one of the themes so we can discuss on it!

[Congyuwang]

I've tried to experiment with theme_overrides and got the following settings that seems to give me a Xcode feeling:

• for Xcode Default Light

  // for Xcode Default Light
  "experimental.theme_overrides": {
    "background.appearance": "blurred",
    "background": "#e8e8e8c0",
    "border": "#909090c0",
    "text": "#000000ff",
    "text.muted": "#404040ff",
    // problem: what is text.disabled / ghost_element.disabled
    // "text.disabled": "#808080ff",
    "status_bar.background": "#00000000",
    "title_bar.background": "#00000000",
    "panel.background": "#00000000",
    "ghost_element.background": "#00000000",
    "ghost_element.hover": "#00000020",
    "ghost_element.active": "#00000020",
    "ghost_element.selected": "#00000020"
  }

• for Xcode Default Dark

  // for Xcode Default Dark
  "experimental.theme_overrides": {
    "background.appearance": "blurred",
    "background": "#2a2a30c0",
    "border": "#101010ff",
    "text": "#ffffffff",
    "text.muted": "#bfbfbfff",
    // problem: what is text.disabled / ghost_element.disabled
    // "text.disabled": "#something",
    "status_bar.background": "#00000000",
    "title_bar.background": "#00000000",
    "panel.background": "#00000000",
    "ghost_element.background": "#00000000",
    "ghost_element.hover": "#a8a8a880",
    "ghost_element.active": "#a8a8a880",
    "ghost_element.selected": "#a8a8a880"
  }

Mainly, I've changed the alpha value of panel / status_bar / title_bar backgrounds.
Also I adjusted some text colors to make the text more obvious.
I've also adjusted the ghost element color to make it more like Xcode.
It look good to me. But I am not fully familiar with Zed settings, nor confident in UI color design at all! 😀

Give it a try! And see if there is anything that needs further refinement.

[jmshgs]

Just wanna say these look amazing!

[SergoGansta777]

And so, it turns out, there are no official blurry background versions planned?

[skarline]

@SergoGansta777 Not really. I have experimented with it in the past; however, I was never satisfied with the result. Also, a couple of Zed updates broke much of the transparency stuff, so I decided to put it off until it becomes more stable :/

Anyway, I'm open to experimenting with it sometime. So, feel free to suggest any transparent themes that you like.