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;
}
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;
}
Aucun commentaire:
Enregistrer un commentaire