Xterm.js: How to set terminal colors?

[Tyriar]

I was looking into using xterm.js for vscode's integrated terminal but the colors seem to be gone after I swapped out jeremyramin/term.js.

Expected:

This is how I was setting the colors:

terminal.colors = [...]; // array of 16 string in format '#rrggbb'
terminal.refresh(0, terminal.rows);

[petschekr]

I believe xterm.js uses an external stylesheet instead of styles embedded into the JavaScript like term.js. Therefore you have to import xterm.css in your HTML. If you want to change the default colors, the stylesheet makes it a lot easier to override certain color rules. Adding it also makes the <textarea> used for input disappear.

[Tyriar]

Thanks, that clears that up :)

[parisk]

Hi @Tyriar, @petschekr got it completely right; xterm.js depends on xterm.css for proper color rendering, in order to allow theming of the terminal.

I guess it would be helpful to document this in a more visible place though 😊 .

[zwhitchcox]

This does not allow you to set the background color of the terminal

[zwhitchcox]

I set the background terminal color with

term._core.renderer.colorManager.colors.background = {
  css: "#fdf6e3",
  rgba: "rgb(253, 246, 227)",
}

[Tyriar]

@zwhitchcox the current way to do this:

const term = new Terminal({
  'theme', { background: '#fdf6e3' }
});

// or

term.setOption('theme', { background: '#fdf6e3' });

[sdegutis]

On a related note, are there any known themes out there or NPM packages containing themes?

[Tyriar]

@sdegutis not that I'm aware of

[sdegutis]

@Tyriar Thanks, I'll just check out the ones VS Code comes with.