Change dark theme to be based on AYU

[wolfv]

Subjectively I never really liked the dark theme of JupyterLab. It has little constrast and very strong blacks.

Therefore I have taken some CSS variables from the AYU theme (implemented for code mirror here:
https://codemirror.net/demo/theme.html#ayu-dark

Original: https://github.com/dempfi/ayu

This is what it looks like, first the old version, then the new dark theme:

Could we ship this with 2.0? I believe it will give the dark theme a much more refined look.

[jupyterlab-dev-mode]

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link:

[jasongrout]

CC @tgeorgeux, who is doing a ux review for 2.0.

[jasongrout]

Putting on milestone 2.0 for consideration by Tim.

[wolfv]

just to highlight the contrast improvements for dark mode, a small video: https://youtu.be/yxUEwkgrXo0

[vidartf]

Blues keep you awake though 🛌

[wolfv]

nightmares of weird red's on black keep me awake at night. The story regarding blue has mainly been debunked :)

https://www.sciencedaily.com/releases/2019/12/191216173654.htm

[wolfv]

@tgeorgeux Jason just asked me to explain my goals further:

• IMO the current theme is somewhat "black" and low contrast (at the voila workshop 6 months ago we had a UX designer and she basically initially said that)
• I think some of the color values in the dark theme don't fit very well, especially in the code editor. It's a bit: Let's make a dark theme and set the "dark" value to be black

I just went ahead and took one of the existing, nice looking editor themes (AYU) and tried to implement it for JLab. Turns out it's super easy to make a nice theme for JLab! (Which is why we will hopefully soon work on a theme importer using jupyterlab-dynext (https://github.com/wolfv/jupyterlab-dynext) which will allow you to install any jlab-theme from the internet without having to rebuild the application which is otherwise slow.
Also I think the orange highlights of the AYU theme look nice in the context of the orange in the JLab Logo.

But that doesn't really stand in the way of having a nice default theme.

[telamonian]

I guess that (surprisingly), we weren't able to customize these before. Nice improvement!

[telamonian]

One thing I've learned working with ui issues is that any 5 users will hold 6 very strong and possibly contradictory opinions about any given theme.

Subjectively I never really liked the dark theme of JupyterLab. It has little constrast and very strong blacks.

Personally, I agree; I've also never been the biggest fan of the default dark theme. It's why I made telamonian/theme-darcula in the first place. However, I guarantee you that at least some (and possibly many) users will be miffed if we change the default.

I don't think we should rush into changing the default theme. For one thing, though I definitely wouldn't miss the default dark theme and its dark red strings, I can't say that the AYU theme is really my cup of tea either. A more obvious candidate would be jupyterlab_materialdarker:

It's been around for a while and seems to have a decently large following.

[telamonian]

On the other hand, it's not uncommon for apps similar to jlab to ship with multiple themes. For example, Atom ships with 4 (or 8, if you count their separate syntax themes), while VSCode ships with 14.

Thus, my proposal is that we keep the current defaults and add 2 new themes to core, chosen from among the existing community of jlab themes. There are currently about 30 to 40 jlab themes on github. I'll dredge up the (subjectively) best 5 of them (and anyone else is also free to suggest candidates), and we'll collectively pick out the 2 most agreeable ones. If enough people are interested, maybe we can even hold a vote.

Spoiler warning: dark themes have been waaaay more popular. I guess they're in. There might be at least one fully up to date new light theme out there, but I'm not holding my breath.

Now especially seems like a good time to expand our core theme collection, since one of the happy side effects of #7700 is that the set up and maintenance burden for a theme should now be significantly reduced (no icons in themes).

@wolfv If you haven't already done so, it should be easy enough to take your modified dark theme from this PR and break it out in a new theme (I haven't tested this out recently, but it may be enough to simply make a copy of the theme-dark-extension dir with a new name. Alternatively, you can use the theme cookiecutter). We should definitely pull in the codemirror theming improvements, though.

[telamonian]

Also also, we don't necessarily have to pull any new themes into core. Instead we could make them part of an official @jupyterlab/rec-themes package. Though we would effectively be signing up to help maintain them in either case

[tgeorgeux]

I am leaning towards shipping a few options for dark themes with core, in lieu of, or in addition to making an @jupyterlab/rec-themes. One of the reason's I have been shying away from re-working the dark theme is how subjective it truly is, and how painful contrast issues can be.

@isabela-pf would you mind doing a simple inventory of currently existing themes? We can collaborate here and present a top 5. Can you look for any that match, atom, sublime, spyder or VScode's default dark themes?

[wolfv]

One of the reason's I have been shying away from re-working the dark theme is how subjective it truly is, and how painful contrast issues can be.

I don't understand this perspective. Sure, making it possible for users to go back to the previous default should be possible, but this kind of prevents any progress ... should we stay with an ugly theme for forever just because some people might feel attached to it? I certainly don't think so.

There are reasons why the current dark theme doesn't work well, it's not purely subjective – I bet if you were measuring the contrasts you would also find that for some colors it doesn't pass the WCAG standards (contrast standards for visually impaired) (e.g. the dark red on black, and the green that is used for comments right now). So purely from a standpoint of fostering inclusion we should get rid of the dark theme as it is right now.

Additionally, some of the color values for the current dark theme have simply been copied from the light theme (such as comment!! color, string color, operator color, meta color, qualifier color (-> #555 – very dark!)
Clearly this was not something where someone has invested a lot of time to get the details right, and I don't see a point in keeping the current default as default.

I would be very happy if we could fix this for 2.0 :) I also don't even want to argue specifically for AYU, I am more than happy with any other theme, as long as someone has taken the time to find some colors that are in harmony with each other! :)

Why not make JupyterLab look awesome, light and dark, for 2.0??

@telamonian yeah! I should make it a package! I will invest some cycles soon to make a simple theme manager based on the dynamic extension loader that I was working on the last couple of days, that will make switching (and testing!) new themes very straight forward and will not involve re-building JLab!).

[isabela-pf]

I recommend @oriolmirosa's Material Darker, @burglarbenson’s Jupyter-Atom-Dark-Theme, and as was already mentioned @telamonian’s theme-darcula. These are some of the highest starred repos for JupyterLab dark extensions, and they are also all referenced in other repos.

@karosc’s Dracula Theme seems to have less attention, but still looks reliable and is referenced in other repos, so I want to mention it as well.

All of these themes are also recommended on @Yogayu’s awesome-jupyterlab-extension, something I only found after collecting them all.

Most of these themes do look like they have similar approaches to dark modes, however, so I can easily see why people would still be motivated to make alternates that meet different sets of goals for a dark mode.

[burglarbenson]

I too found the built in dark theme rather lacking in contrast, hence the reason for creating the port of the Atom Dark theme. As others have said it's so subjective and I see colleagues using the default dark theme on a daily basis with no complaints.

Would be happy to work on turning my quick and dirty css into a package/extension.

[arbennett]

For what it's worth I was also not a huge fan of the default dark theme and built a number of themes + a basic theme template here: https://github.com/arbennett/jupyterlab-themes

In my mind there would be several light and dark themes available by default. Along these lines I'd like to see the theme/UI CSS cleaned up so that templating and theming is easier overall.

[vidartf]

I'd like to see the theme/UI CSS cleaned up so that templating and theming is easier overall.

Any input you have on how to this would be greatly appreciated 👍

[wolfv]

I think theming in particular is very easy with jupyter lab, just changing a couple of variables for color is already quite nice.
The bad part is how slow it is to get themes installed because of the time it takes to rebuild jlab.

[arbennett]

I suppose I should elaborate a bit more. I think theming in jupyter lab is certainly easier than some of the other big development environments (having flashbacks to Jeeeyul's eclipse theme customizer), but considerably harder than a vim/terminal environment that I personally prefer. Still, I think it could be streamlined a bit more based on the mucking around I've been doing.

My main thought is that not all themes need to completely redefine so much of the css. What I found with my jupyterlab-themes repo and associated themes was really you can do pretty good with just 8 colors that you use to define all of the other variables. Now, I don't think that all color themes must be defined by 8 colors and I think that there is a lot of value in having well curated and grounded color themes (agreeing wholeheartedly on the red on black thing often being terrible).

However, as someone who just wanted to drop in and replace a couple of colors with minimal web development experience the thing that I found took longer than necessary was just finding out what all of the variables that I needed to redefine were. This is the first point that I think could be streamlined - just have the definitions somewhere separate in the theme templates themselves. Mainly, this means just pulling all color definitions to the top and not having mixes of rgba, md-$color-$weight, jp-$component-$color, and hex values intermixed in a way that seems confusing to an outsider. Here's an example of all four of these within ~10 lines of css in the default light theme:

jupyterlab/packages/theme-light-extension/style/variables.css

Lines 322 to 334 in a31a4cf

	--jp-input-box-shadow: inset 0 0 2px var(--md-blue-300);
	--jp-input-active-background: var(--jp-layout-color1);
	--jp-input-hover-background: var(--jp-layout-color1);
	--jp-input-background: var(--md-grey-100);
	--jp-input-border-color: var(--jp-border-color1);
	--jp-input-active-border-color: var(--jp-brand-color1);
	--jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);
	/* General editor styles */
	--jp-editor-selected-background: #d9d9d9;
	--jp-editor-selected-focused-background: #d7d4f0;
	--jp-editor-cursor-color: var(--jp-ui-font-color0);

The second thing that I think could be nice is the use of some CSS templating language/tech (again, this is not really something I'm familiar with so I'm not sure if these are the right terms). I used scss/sass for my themes, just because they allowed some functionality like darken/lighten but I think something like this could provide drastically simpler theme templates for users to create their own themes.

Finally, I fully agree with @wolfv - having to rebuild jupyter lab to install some css and having all of the potential issues of yarn and npm and etc (not to mention the disk space!) is less than ideal.

Those are my few basic thoughts on the improvements I personally would like to see. That said, I was still able to figure out how to theme juptyer lab based on a couple of examples in a handful of evenings so things are actually pretty good overall and I'm pretty happy with my toy results.

[vidartf]

Note that the JupyterLab theme manager allows for one extension to register as many themes that it wants, and at whatever time it wants (AFAICT). This means that anyone could build an extension on top of this to add functionality. E.g you could make an extension that:

• Translates 8-color profile themes to a full JupyterLab theme (e.g. by setting the CSS vars).
• Allows users to store such color profiles in the user settings (no rebuild would be required for installing a new theme).
• Adds an 8-color profile editor widget so users can change their theme by using HTML color pickers.