Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Makes matplotlib figs with dark text legible in the dark theme (and related fixes) #5232

Merged
merged 2 commits into from Aug 29, 2018

Conversation

@telamonian
Copy link
Member

@telamonian telamonian commented Aug 28, 2018

This is the sister PR of ipython/ipykernel#336.

This PR fixes a number of Matplotlib/Jupyterlab legibility issues. Given appropriate metadata (which the sister PR adds to ipykernel), Jupyterlab will now, if needed, set a background behind figures based on the luminance (ie light or dark) of the colors of its tick labels. This fix does not monkeypatch or change the actual figure in any way.

Based on the value of the needs-background metadata entry, Jupyterlab will now add either a needs-light-background or a needs-dark-background class (or nothing, if needs-background is not passed) to the img node that displays the figure. The background of the img node is then styled using a CSS selector that matches on the light/dark nature of the current theme and on the needs-x-background class. This is nice, since it means that the figure backgrounds will update as needed if the theme changes.

Here's what the fix looks like in action:

Light theme

Pre-fix

image

Post-fix

image

Dark theme

Pre-fix

image

Post-fix

image

What happens when the ticks have different colors?

This PR is meant to fix the Jupyterlab dark theme/Matplotlib default style conflict, and also to deal with any similar issues. This fix is not meant to cover ever possible visibility/legibility edge case out there. In particular, when the ticks of a figure have different colors, a background is added only if all of the ticks are light or if all are dark:

image

If the luminance of the ticks does not match, then no background is added:

image

Thanks to @bollwyvl, @Carreau, and @ian-r-rose for helping me figure out all of the moving parts needed for this fix during the Jupytercon sprint. This PR has a dependency on the extra figure metadata ('needs-background') added by ipython/ipykernel#336. If, for whatever reason, 'needs-background' is not present in the metadata, the current Jupyterlab behavior is left completely unchanged.

@telamonian telamonian changed the title fixes #3886, #3922, and a bunch of others Makes matplotlib figs with dark text readable in the dark theme (and fixes related legibility issues) Aug 28, 2018
@telamonian telamonian changed the title Makes matplotlib figs with dark text readable in the dark theme (and fixes related legibility issues) Makes matplotlib figs with dark text readable in the dark theme (and related fixes) Aug 28, 2018
@telamonian telamonian changed the title Makes matplotlib figs with dark text readable in the dark theme (and related fixes) Makes matplotlib figs with dark text legible in the dark theme (and related fixes) Aug 28, 2018
@blink1073
Copy link
Member

@blink1073 blink1073 commented Aug 29, 2018

Thanks, @telamonian, this is great! Fixes #4172. Fixes #3886. Fixes #3922.

@blink1073 blink1073 added this to the 0.35 milestone Aug 29, 2018
@blink1073 blink1073 merged commit 5f45d75 into jupyterlab:master Aug 29, 2018
2 checks passed
@ian-r-rose
Copy link
Member

@ian-r-rose ian-r-rose commented Aug 29, 2018

Thanks @telamonian! Way to push on a really tough issue.

@blink1073 blink1073 removed this from the 0.35 milestone Sep 5, 2018
@blink1073 blink1073 added this to the 1.0 milestone Sep 5, 2018
@blink1073 blink1073 removed this from the 1.0 milestone Sep 28, 2018
@blink1073 blink1073 added this to the 0.35 milestone Sep 28, 2018
@blink1073 blink1073 mentioned this pull request Sep 28, 2018
31 tasks
@sarahefcarroll
Copy link

@sarahefcarroll sarahefcarroll commented Oct 21, 2018

so, i need help finding where on my computer to fork these fixes for the dark theme of jupyter lab.
I'm in this weird place where I know enough programming to just barely not be a beginner, but I don't really know anything about git and forking and how anaconda is installed to know where to put the files...but the lack of readability of plots in the dark theme of jupyter lab has been driving me nuts. Can anyone give me a hand?

@bloaphant1
Copy link

@bloaphant1 bloaphant1 commented Oct 22, 2018

@sarahefcarroll I had the same problem. I compared my jupyter lab version and made sure it is up to date. The problem was, as mentioned in the last paragraph, it has a dependency to ipykernel. Just conda install it and the fix should take effect.

@Carreau
Copy link
Contributor

@Carreau Carreau commented Oct 22, 2018

Hi @sarahefcarroll ,

I'm going to give you a few pointers.

  • You don't need to cake about forking until you want to contribute back.
  • You can clone where you like to. I personally clone in ~/dev/<projectname>, some people prefer ~/github/.. or ~/Documents

Usually you would start by reading Getting Started and Developpement, which shoudl walk you through:

  • Cloning on your machine.
  • Installing this clone into anaconda, so that changes you make are reflected when you run jupyterlab.
    You can try to hang out in the chat when people are around if you need more live feedback.

Hope that helps

@sarahefcarroll
Copy link

@sarahefcarroll sarahefcarroll commented Oct 22, 2018

@bloaphant1 thanks, I'm working on that now. I really appreciate the help.

@Carreau I have to admit, I've been trying to learn so much so fast that I'm constantly getting terms mixed up. I just joined an astrophysics research group that uses python to do analysis of SDSS data, and I'm sure I learned how to clone and fork lame codes onto the group server at the same time. I meant clone. (I'm also being bombarded by various people in the department with strong opinions about where everything should go and how everything should be done, which only adds to the chaos of all the information intake)
I was thinking what I would do would be to clone the files for the fix and then replace the older versions saved in my computer within the C:\ProgramData\Anaconda3 parent folder or within the C:\user\username.jupyter parent folder. I also really appreciate the help and advice. thank you.

@Carreau
Copy link
Contributor

@Carreau Carreau commented Oct 22, 2018

No problem, we're here to help.

I would advise against replacing files, that would likely put anaconda in an inconsistant state.
Usually using pip install -e . or other instructions in above links will just make your clone "shadow" the anaconda installed one, and allow proper uninstall/removal.

@lock lock bot locked as resolved and limited conversation to collaborators Aug 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants