Transparency in Zed

[jmurphy4]

Question or Suggestion

Hi there, love the theme. Have been trying to get it to work with Zed. The colors look right, but its not actually transparent? Any ideas on this?

Thanks!

[scottmckendry]

Hello @jmurphy4!

Glad to hear you like the theme 🙂 I’m not super familiar with Zed and the extra was added by another contributor.

It looks like this is possible via overrides similar to the ones described in this comment:

zed-industries/zed#5040 (comment)

I would happily merge a PR that implements this in a way the complements the cyberdream palette.

[jmurphy4]

Ahhhh gotcha. That makes sense. Let me take a stab at it

[scottmckendry]

Great stuff! Make sure you check out the contributing guide for tips on editing extras 🙂

If you have any questions, let me know!

[jmurphy4]

"experimental.theme_overrides": {
		"background.appearance": "blurred",
		"background": "#4c464290",
		"editor.background": "#00000030",
		"editor.gutter.background": "#00000030",
		"tab_bar.background": "#00000030",
		"terminal.background": "#00000030",
		"terminal.ansi.dim_black": "#FFFFFF",
		"editor.active_line_number": "#FFFFFF",
		"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": "#1e2124"
	},

I got it most of the way there, the only thing I'm missing is the terminal autocomplete text. This isn't an issue with the terminal from what I understand. It's not an issue with any other dark zed themes. and I have no idea how to fix it lol

[scottmckendry]

looking pretty slick! @byt3m4st3r, any ideas on how to get transparency working on the terminal?

[byt3m4st3r]

Hi @scottmckendry. The current implementation is experimental and as of now seems not stable. If you play around, you get a transparent terminal background by setting the terminal colour to a wrong colour value f.e. terminal.background": "#00000000", or terminal.background": "#0000", :-)

But if you use the same colours, like the cyberdream background color with transparency, it will work and looks great :-)

"experimental.theme_overrides": {
    "background.appearance": "blurred",
    "background": "#0016181a",
    "editor.background": "#0016181a",
    "editor.gutter.background": "#0016181a",
    "tab_bar.background": "#0016181a",
    "terminal.background": "#0016181a",
    "terminal.ansi.dim_black": "#0016181a",
    "toolbar.background": "#0016181a",
    "tab.active_background": "#0016181a",
    "tab.inactive_background": "#0016181a",
    "status_bar.background": "#0016181a",
    "title_bar.background": "#0016181a",
    "panel.background": "#0016181a",
    "editor.active_line.background": "#0016181a"
}

Transparent background with auto-suggestion:

[byt3m4st3r]

Hi @jmurphy4. Regarding auto-completion, as I see, you use ZSH.

If you use zsh-autosuggestions you can set your completion colour to cyberdream grey with an env var like this: ZSH_AUTOSUGGEST_HIGHLIGHT_STYLE=fg=#7b8496.

[scottmckendry]

Appreciate you stepping in with the assist here @byt3m4st3r 🙂 Looks super clean!

As you've mentioned this is an experimental feature so I think we'll leave the change out of the main branch for now (sorry if you had plans for a PR @jmurphy4!)

We can revisit in the future when Zed theming is a bit more mature.

[jmurphy4]

Thanks for the replies guys!
Roger on the PR. No worries 🫡