Insufficient contrast when running code with error

[ghost]

Description:

Insufficient contrast with dark color schemes when running code with error makes it hard to read the error message.

Error messages should use the Atom syntax scheme or use a white background or other background color to increase contrast.

Steps to Reproduce:

1. Set Atom UI theme to One Dark and Atom Syntax theme to Atom Dark (or other dark theme like in https://nteract.gitbooks.io/hydrogen/docs/Usage/GettingStarted.html)
2. Run Python code with error in it

def permute(string_so_far, string_rest):
    if len(string_rest) <= 0:
        print(string_so_far)

    for i in range(len(string_rest)):
        print(i)
        remaining_string = string_rest[0, i] + string_rest[i + 1]
        permute(string_so_far + string_rest[i], remaining_string)

permute('', 'hello')

Versions:

Which OS and which version of Hydrogen and Atom are you running?

Atom : 1.18.0
Electron: 1.3.15
Chrome : 52.0.2743.82
Node : 6.5.0

You can get this information from copy and pasting the output of atom --version from the command line.

Logs:

N / A

Please post any error logs and the output of the developer tools as described in our Debugging Guide.

[n-riesco]

IPython has an option to configure the colour scheme, see InteractiveShell.colors in http://ipython.readthedocs.io/en/stable/config/options/kernel.html .

[rgbkrk]

I'd like to have a way to override these for the sake of nteract as well, similar to how it's done in iTerm2. We currently just interpret ANSI codes as is for ansi-to-react.

[lgeiger]

Part of the problem here is that we cannot easily get the colors used by the current Atom theme (at least I don't know of any good way).

We only have access to the official syntax colors.

[BenRussert]

Could/does ansi-to-react optionally return w/ class names instead of color style?

If not, it could be enhanced to do so I think. Anser has the option:

to set use_classes: true in the options argument. This will instead set classes on the spans so the colors can be set via CSS. The class names used are of the format ansi--fg/bg and ansi-bright--fg/bg where * is the color name, i.e black/red/green/yellow/blue/magenta/cyan/white.

We could style these classes in hydrogen.less using color variables so they apply the user's theme.

[rgbkrk]

I'd certainly be in favor of having class name support for ansi-to-react.

[lgeiger]

Do we have a way to get the syntax colors from the Atom color theme?

If I recall correctly they aren't exposed anywhere.

[BenRussert]

@lgeiger i'm just talking about the ones from @import "syntax-variables";

For example @syntax-text-color and others just from the styleguide like @text-color-error

[jasonleonhard]

For now you might consider adding this to your styles.less

atom-text-editor {
  .hydrogen {
    .hydrogen_cell_display{
        background-color: black;
    }
  }
}

[lgeiger]

I like the suggestion of @BenRussert, though we wouldn't ensure that the colors aren't mixed up when using different themes. But at least they would match the overall color schema and have enough contrast.

atom-terminal-tab does the same: https://github.com/jsmecham/atom-terminal-tab/blob/master/styles/terminal.less

[mattiasarro]

@n-riesco where and how can I configure IPython / Hydrogen to for example disable syntax highlighting in stack traces?

Though CSS-configurable color scheme would be very nice.

[n-riesco]

@mattiasarro The IPython kernel provides a small number of color schemes (see here). The one you want to use with dark backgrounds is named Linux.

If you're happy editing the kernel spec installed in your machine, you could do so like this:

1. to locate where the kernel spec is installed, run:

$ jupyter kernelspec list
Available kernels:
  python3        /home/user/.local/share/jupyter/kernels/python3

$ cat /home/user/.local/share/jupyter/kernels/python3/kernel.json
{
 "argv": [
  "/usr/bin/python3",
  "-m",
  "ipykernel",
  "-f",
  "{connection_file}"
 ],
 "display_name": "Python 3",
 "language": "python"
}

2. in my case the kernel spec to edit is /home/user/.local/share/jupyter/kernels/python3/kernel.json. After adding the color option, this is how the kernel spec looks like:

{
 "argv": [
  "/usr/bin/python3",
  "-m",
  "ipykernel",
  "--colors='Linux'",
  "-f",
  "{connection_file}"
 ],
 "display_name": "Python 3",
 "language": "python"
}

---

The CSS route, judging by the comments above, would be a bit more involved.

[BenRussert]

@bigheadming Check the above issue out related to error message backgrounds you mentioned.

[bigheadming]

Thanks @BenRussert. However, it does not change after I added "--colors='Linux'" to my kernel.json. The color is still the same:

{
"argv": [
"/home/xxx/anaconda3/bin/python",
"-m",
"ipykernel_launcher",
"--colors='Linux'",
"-f",
"{connection_file}"
],
"display_name": "Python 3",
"language": "python"
}

There is a bit difference between my kernel.json and @n-riesco 's. His 3rd argument is "ipykernel" while mine is "ipykernel_launcher". May be that's the reason mine it doesn't apply to my case.

Thanks but do not work in my case :(

You mentioned about ansi-to-react, however I'm not sure what to do and where to do. Could you please show more?

Thanks

[bigheadming]

I think I found a solution. In my case, --colors='Linux' does not work, but --colors='NoColor' work. Now all error messages have no color (ie white), and I can change the background color to black.

[andreas-wolf]

After trying a lot with ipython themes and stuff I came back to @jasonleonhard 's solution and did a bit of refinement. I added this to my styles to overwrite the blue colored spans with a color fitting for my theme:

.nteract-display-area-traceback > span[style*="rgb(0, 0, 187)"] { color: #abb2bf!important; }

[xieve]

Is there no way to just use

color	class
red	syntax--invalid.syntax--illegal
green	syntax--keyword
turquoise	syntax--object

...and so on, based on what IPython uses those for?

Also, basically, there's also the possibility to highlight the output in the plugin rather than translating those ANSI colors, right?

[hefayed]

Hi,

i was not able to apply @andreas-wolf suggested , it didn't change the blue color, may be i didnt put in the right place in the style.less. can you help me how to change the blue color when i have an error.

[wadethestealth]

@hefayed your styles.less is located by opening atom, clicking File, then clicking Stylesheet... You can add the provided code to the end of file as is. You don't have to put it inside anything. However you probably wont be able to change the color of the text, but you change change the background to black for better readability.

[mattiasarro]

@hefayed the CSS you need to apply on newer versions of hydrogen is

.hydrogen_cell_display span[style*="rgb(0, 0, 187)"] { color: #abb2bf!important; }

That's because apparently hydrogen has changed the HTML classes and nesting, so the one based on .nteract-display-area-traceback no longer works.

On MacOS go to "Atom" menu and select "Stylesheet...", (or "File > Stylesheet..." on other operating systems) and paste the line in there.

If the above stops working, you can find out the new CSS selector by using the Developer Tools (View > Developer > Toggle Developer Tools) and use the element inspector (arrow button on the top left of the Developer Tools). With the element inspector you can click on the HTML tag that contains the blue text and see what's its class name / CSS selector.

[hefayed]

@mattiasarro thanks allot it worked nicely , thank you for detailed explanation and for the pointer for developer tools.

[schmidtlennart]

@mattiasarro This does not change anything for me. As I read it, this should change the dark blue to light blue, right? My styles.less is empty except for that one line of yours. Do I have to load anything else? (MacOS 10.14.6, Atom 1.46.0 x64, Hydrogen 2.14.1). Thanks heaps!

[mattiasarro]

@schmidtlennart there's a good chance Hydrogen has changed the HTML structure / classes again. I don't use Atom anymore (discovered that VSCode has almost all the good parts of Atom + many other nice aspects that Atom doesn't) so I can't check it out myself, but you can try to find out what's the right CSS rule you need to apply based on the second part of my suggestion:

If the above stops working, you can find out the new CSS selector by using the Developer Tools (View > Developer > Toggle Developer Tools) and use the element inspector (arrow button on the top left of the Developer Tools). With the element inspector you can click on the HTML tag that contains the blue text and see what's its class name / CSS selector.

Also you may need to restart your editor after you apply new styles.

[lmoerenhout]

@mattiasarro This does not change anything for me. As I read it, this should change the dark blue to light blue, right? My styles.less is empty except for that one line of yours. Do I have to load anything else? (MacOS 10.14.6, Atom 1.46.0 x64, Hydrogen 2.14.1). Thanks heaps!

Apologies if this is a necro, but I was able to get it working using:
.nteract-display-area-stdout span[style*="rgb(0, 0, 187)"] { color: #5490c4!important; }

This applies a lighter blue that's a bit easier on the eyes ;)