Blessed "Prompt" by default black on black - how to style it?

Question

I am using blessed and I am trying to add an invitation to my application. It works fine, but I cannot read its text. I have prepared a minimal example that illustrates what I see.

I would like to know how I can style text in input. style-Attributes, as stated in the docs , seem to have no effect.

Here is what I see (there is text in the input and on two buttons, but black on black).

Here is the code that reproduces the error on Debian 9 with a standard terminal and a standard theme:

var blessed = require('blessed'); var screen = blessed.screen({}); var prompt = blessed.prompt({ left: 'center', top: 'center', height: 'shrink', width: 'shrink', border: 'line', }); screen.append(prompt); screen.key(['q', 'C-c'], function quit() { return process.exit(0); }); screen.render(); prompt.input('Search:', 'test', function() {}); 

Answer 1

Disclaimer: I am not very familiar with the blessed code base, so there may be a more natural way to do this. If this does not happen, then this function should be requested / implemented.

Observation 1 - The color settings of your terminal affect the problem

Based on the screenshot you have indicated, the colors of your terminal default to black in front of a white background. If you invert this in your terminal settings, you can see the expected behavior.

But! Your application should not matter which user settings, so this is not a good solution ...

Observation 2 - Prompt constructor makes hard codes for children with a black background

If in doubt, go to the source ! Here is the part of prompt.js as of 2017-09-30:

 // ... function Prompt(options) { // ... Box.call(this, options); this._.input = new Textbox({ // ... bg: 'black' }); this._.okay = new Button({ // ... bg: 'black', hoverBg: 'blue', }); this._.cancel = new Button({ // ... bg: 'black', hoverBg: 'blue', }); } // ... 

So, it seems that the only way to fix your problem is to overwrite these children style properties after creating Prompt .

Solution 1 - Overwrite child style properties after creation

After creating the query, you can overwrite the style of each child. Probably the easiest way is to make the foreground white (as it should be) ...

In addition, for ease of maintenance, this hack really should be in its own function.

 function createBlessedPrompt(options) { var prompt = blessed.prompt(options); // NOTE - Not sure if blessed has some sortof `children()` selector. // If not, we probably should create one. // Nevertheless, temporarily hardcoding the children here... // var promptChildren = [prompt._.input, prompt._.okay, prompt._.cancel]; promptChildren.forEach(x => { Object.assign(x.style, { fg: 'white', bg: 'black' }); }); return prompt; } 

Solution 2 - Send the bug fix to the blissful repository

It really looks like a bliss problem. If you can think about how Prompt should properly handle this case, you should fully help your colleague and write a problem / pull request that fixes this.

Good luck

Answer 2

I tried this sample on Win 10 and Ubuntu 16. The only change I made for your code was the definition of screen was transferred to the definition of promt (without it I got the error “No active screen”) and I also added styles to match documentation. My reproducer:

1) run npm install blessed inside an empty folder

2) create index.js in this folder with the following code

 var blessed = require('blessed'); var screen = blessed.screen({}); var prompt = blessed.prompt({ left: 'center', top: 'center', height: 'shrink', width: 'shrink', border: 'line', style: { fg: 'blue', bg: 'black', bold: true, border: { fg: 'blue', bg: 'red' } } }); screen.append(prompt); screen.key(['q', 'C-c'], function quit() { return process.exit(0); }); screen.render(); prompt.input('Search:', 'test', function() {}); 

3) run node index

4) received

Want you to want?