dimanche 23 juin 2019

changing xterm js web terminal background colour leads to hiding of terminal text

We are using xtermjs for terminal on browser. I need to change its background color so that it matches our color scheme. But changing its background color leads to hiding of terminal text. See image attached for more understanding.

Xterm js has a file called xterm.css in which all the colors are mentioned but even overwriting the defaults in custom stylesheet results into same problem. I tried changing background color multiple times but no luck.

Here's the code and screenshot of terminal before changing background color:

#interactive .panel-right {
  background-color: #000;

  height: 87vh !important;
}
.xterm-viewport {
  height: 87vh !important;
}
.xterm-cursor-layer {
  height: 87vh !important;
}
.xterm-link-layer {
  height: 87vh !important;
}
.xterm-selection-layer {
  height: 87vh !important;
}
.xterm-text-layer {
  height: 87vh !important;
}
.xterm-screen {
  height: 87vh !important;
}
.webterm {
  height: 87vh !important;
  background-color: #000 !important;
}
.panel-container {
  background-color: #000 !important;
}

enter image description here

and here's the code and screenshot after changing background color :

#interactive .panel-right {
  // background-color: #000;
  background-color: #201e2f !important;
  height: 87vh !important;
}
.xterm-viewport {
  height: 87vh !important;
  background-color: #201e2f !important;
}
.xterm-cursor-layer {
  height: 87vh !important;
  background-color: #201e2f !important;
}
.xterm-link-layer {
  height: 87vh !important;
  background-color: #201e2f !important;
}
.xterm-selection-layer {
  height: 87vh !important;
  background-color: #201e2f !important;
}
.xterm-text-layer {
  height: 87vh !important;
  background-color: #201e2f !important;
}
.xterm-screen {
  height: 87vh !important;
  background-color: #201e2f !important;
}
.webterm {
  height: 87vh !important;
  // background-color: #000 !important;
  background-color: #201e2f !important;
}
.panel-container {
  // background-color: #000 !important;
  background-color: #201e2f !important;
}

enter image description here




Aucun commentaire:

Enregistrer un commentaire