Adding jlab theme support

[martinRenou]

[jtpio]

Looks good!

This will probably need a dependency on the JupyterLab ThemeManager and using the themeChanged signal to be able to switch themes on the fly.

[martinRenou]

Thanks! I'll give it a try :)

[martinRenou]

This will probably need a dependency on the JupyterLab ThemeManager and using the themeChanged signal to be able to switch themes on the fly.

The thing is we want to support the classical Notebook. Do you know if that would play well with this?

[jtpio]

Right, maybe handling that in the activate function and initializing the widget with the themeManager if it exists (or listening to the signal there).

If it doesn't exist (in the case of the classic notebook), then it would default to the light theme.

[martinRenou]

Thanks! I added support for changing the theme dynamically, listening to the ThemeChanged signal

[kaiayoung]

Looks good overall! We may want to experiment with the specific colors/styles being used, but that can be done in a follow-up PR. More specifically, I'm thinking of making the header cells more visually distinct from the body cells. I'm also curious if the border outside the grid is something new, I don't recall seeing that before?

[martinRenou]

I'm also curious if the border outside the grid is something new, I don't recall seeing that before?

I think it was there before, only less visible (because of its color I guess) :) It comes from the css/datagrid.css stylesheet on the repo that defines a border around the grid. I don't remember where this comes from, I think I copied it from the phosphorjs datagrid example. I guess it would be prettier if we remove it, what do you think?

[martinRenou]

Actually without the border the header cells does not get have a border anymore

This comes from the p-Datagrid CSS class that is defined in PhosphorJS, and we override it using the CSS variables.
Maybe we could make it less visible, but we might want to keep it.

[martinRenou]

@kaiayoung Do you like this one better (header background color darker):

Or maybe this one (header background color darker with dark borders):

Same as before but without the outside border: