How do I output color similar to VS Code integrated terminal - I only get black & white

[damms005]

I think it is similar to #3875

I am building an electron app and I set up xterm.js in my Vue component and use node-pty in the main process for the emulation

// Terminal.vue
<template>
  <MainLayout>
    <template #main>
      <div ref="containerElement" class="w-full h-full"></div>
    </template>
  </MainLayout>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import MainLayout from "@/layouts/MainLayout.vue";
import { useTerminalStore } from "@/stores/terminal-store";
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
import { WebLinksAddon } from "@xterm/addon-web-links";
import "@xterm/xterm/css/xterm.css";

const store = useTerminalStore();

const containerElement = ref<HTMLElement | null>(null as HTMLElement);
let terminal: Terminal | null = null;
const fitAddon = new FitAddon();
let terminalId = "app-log";

onMounted(async () => {
  terminal = new Terminal({
    cursorBlink: true,
  });

  terminal.loadAddon(fitAddon);
  terminal.loadAddon(new WebLinksAddon());
  terminal.open(containerElement.value);
  fitAddon.fit();

  terminal?.onData((data: any) => {
    window.renderer.send("send:terminal-data-to-pty", { terminalId, data });
  });

  store.registerTerminalHandler(terminalId, (data) => {
    terminal?.write(data);
  });

  terminal.focus();
});

onBeforeUnmount(() => {
  if (!terminal) return;
  terminal.dispose();
});
</script>

// electron/main/services/terminal.ts
import { spawn, IPty } from 'node-pty';
import { platform } from 'os';
import { sendPtyDataToFrontend } from 'electron-src/main/main-ipc';

const terminalSessions: Record<string, IPty> = {};

export function createTerminal(terminalId: string, cwd: string) {
	const shell = platform() === 'win32' ? 'powershell.exe' : 'bash';

	const ptyProcess = spawn(shell, [], {
		name: 'xterm-256color',
		cols: 80,
		rows: 30,
		cwd,
		env: process.env
	});

	ptyProcess.onData((data: string) => sendPtyDataToFrontend(terminalId, data));

	terminalSessions[terminalId] = ptyProcess;
}

export function writeToPty(terminalId: string, data: string) {
	terminalSessions[terminalId].write(data);
}

And I got this:

Example same command in VS Code's integrated IDE:

Also, notice my prompt and the color different in mine and VS Code's, is it possible to get same prompt similar to the VS Code screenshot above?

[jerch]

This can have different reasons:

• shell mismatch: In xterm.js you use bash, in vscode something else (prolly zsh). If the color output of ls is defined as a local shell alias, the other shell wont see that. Try to switch to zsh, or try to enable colors explicitly with ls --color=auto (ls -G on a Mac). If both gives you colors in ls, then it is an alias shell issue.
• terminfo lacks the xterm-256color profile: Although highly unlikely, it could happen on heavily stripped down systems. Check the output of infocmp xterm-256color vs infocmp -1. (You might have to install terminfo and its tools in that case.)
• TERM env var not correctly applied for some reason. Check the output of echo $TERM.