hydrogen: Insufficient contrast when running code with error

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:

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)
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.

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 16
Comments: 23 (9 by maintainers)

Most upvoted comments

@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.

mattiasarro on Aug 1, 2019

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; }

andreas-wolf on Oct 28, 2018

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.

bigheadming on Aug 19, 2018

@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:

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"
}

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.

n-riesco on Apr 10, 2018

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

hefayed on Aug 1, 2019