Vscode-vibrancy: effect doesn't work for terminal

Created on 13 Jul 2019  ·  7Comments  ·  Source: EYHN/vscode-vibrancy

The integrated terminal doesn't have the effect.
Annotation

Most helpful comment

@AmrBinBashir You need to modify the style of VSCode.

.monaco-workbench .panel.integrated-terminal *:not(.xterm-cursor):not(.xterm-cursor-block) {
    background: transparent !important;
}
.monaco-workbench .panel.integrated-terminal *:hover:not(.xterm-cursor):not(.xterm-cursor-block) {
    background: transparent !important;
}
.monaco-workbench .panel.integrated-terminal .find-focused .xterm .xterm-viewport, .monaco-workbench .panel.integrated-terminal .xterm.focus .xterm-viewport, .monaco-workbench .panel.integrated-terminal .xterm:focus .xterm-viewport, .monaco-workbench .panel.integrated-terminal .xterm:hover .xterm-viewport {
    background: transparent !important;
}
.monaco-workbench .panel.integrated-terminal .terminal-outer-container {
    background-color: rgba(37, 37, 37,0.4); // Modify it here to the color you need.
}

All 7 comments

Thanks for feedback.

In vscode, terminal is rendered through the canvas, and I can't make the background of the canvas transparent. I will reply here if there is any progress.

Thanks for feedback.

In vscode, terminal is rendered through the canvas, and I can't make the background of the canvas transparent. I will reply here if there is any progress.

you did an amazing job, I can live with terminal like this.

You should change the renderer type of the terminal to dom

"terminal.integrated.rendererType": "dom"

@syfxlin
I add this to my settings.json but no luck yet. Also tried to add "terminal.background": "#00000000" to my "workbecnh.coloCustomization" and still nothing.

@AmrBinBashir You need to modify the style of VSCode.

.monaco-workbench .panel.integrated-terminal *:not(.xterm-cursor):not(.xterm-cursor-block) {
    background: transparent !important;
}
.monaco-workbench .panel.integrated-terminal *:hover:not(.xterm-cursor):not(.xterm-cursor-block) {
    background: transparent !important;
}
.monaco-workbench .panel.integrated-terminal .find-focused .xterm .xterm-viewport, .monaco-workbench .panel.integrated-terminal .xterm.focus .xterm-viewport, .monaco-workbench .panel.integrated-terminal .xterm:focus .xterm-viewport, .monaco-workbench .panel.integrated-terminal .xterm:hover .xterm-viewport {
    background: transparent !important;
}
.monaco-workbench .panel.integrated-terminal .terminal-outer-container {
    background-color: rgba(37, 37, 37,0.4); // Modify it here to the color you need.
}

@syfxlin Thank you, It's working fine now.
@EYHN I guess you can implement syfxlin code in the next version. Consider this issue solved.

Thank you! @syfxlin
I optimized this CSS. It has been released in 1.0.5.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lyfunny picture lyfunny  ·  6Comments

drewswaycool picture drewswaycool  ·  6Comments

Diomchen picture Diomchen  ·  6Comments

dudeisbrendan03 picture dudeisbrendan03  ·  15Comments

lnminh58 picture lnminh58  ·  7Comments