How to enable transparent in full screen, zen, "toggle centered layout" mod

[xBLACKICEx]

    How to enable transparent in full screen, zen, "toggle centered layout" mod

in toggle centered layout tow side is not transparent and full screen, zen mode, There is no transparency at all.

Originally posted by @xBLACKICEx in https://github.com/illixion/vscode-vibrancy-continued/discussions/66

[arily]

apparently this is caused by vscode itself adds a background color for 'centered layout'. with a custom css you can have something like this.

#workbench\.parts\.editor > div.content .centered-layout-margin {
  background-color: transparent !important
}

you can put this file somewhere and import it with vibrancy's import setting.

also @illixion how about including the css above in the provided themes? I personally would like to introduce something like postcss to extend from a base css to have better DX, so that we wouldn't have to edit every file each time we want to apply a change to every css.

[declanchiu]

apparently this is caused by vscode itself adds a background color for 'centered layout'. with a custom css you can have something like this.

#workbench\.parts\.editor > div.content .centered-layout-margin {
  background-color: transparent !important
}

you can put this file somewhere and import it with vibrancy's import setting.

also @illixion how about including the css above in the provided themes? I personally would like to introduce something like postcss to extend from a base css to have better DX, so that we wouldn't have to edit every file each time we want to apply a change to every css.

😭 It's weird that this doesn't work for me

[arily]

apparently this is caused by vscode itself adds a background color for 'centered layout'. with a custom css you can have something like this.

#workbench\.parts\.editor > div.content .centered-layout-margin {

  background-color: transparent !important

}

you can put this file somewhere and import it with vibrancy's import setting.

also @illixion how about including the css above in the provided themes? I personally would like to introduce something like postcss to extend from a base css to have better DX, so that we wouldn't have to edit every file each time we want to apply a change to every css.

😭 It's weird that this doesn't work for me

Can you try using a more generic selector? Like only .centered-layout-margin

[declanchiu]

Still doesn't work for me 🤡

[arily]

could you please make sure the css is taking effects? e.g. you have to reload vibrancy. Alternatively you can try using a different css inject extension (like kencocaceo.customvscodeuicss)

with latest vscode I confirm it works.

[menonkrishna57]

That css code didn't work for me

Is there something I am doing wrong while importing?

[illixion]

@menonkrishna57 try using .part.editor instead of #workbench\.parts\.editor, for some reason this selector doesn't work for me either even though it should be correct.

[menonkrishna57]

Still nope

[illixion]

@menonkrishna57 your CSS selector is different from what I’ve provided

[garikAsplund]

Hi, I tried all the recommended steps as above and it still doesn't work in full screen for me either. You can see in the April 13 screenshot it's not in full screen mode. Outside CSS editors, all types of minor changes in classes didn't work. Entering true full screen changes a lot--you can take Zen mode out of fullscreen and it works there, but when you disable native full screen on mac it still has an opaque background. I tried looking through the dev tools and seeing if other CSS classes were more useful but it's a little mirky at first glance. Just seconding the request for full screen fix :) If I find anything that works I'll hop back on and share.

[edwardshturman]

arily's original fix works for me on macOS! 🙏🏻

[emvaized]

It seems that the following selector in combination with the one mentioned above appears to be working for me:

.monaco-workbench.fullscreen {
    background-color: transparent !important;
}