Adaptive theme

[s-rog]

I'm currently using the following css to make the ipyplot html match the user jupyter theme as well as make the text visible in dark themes (dracula shown below).

[class^="ipyplot-content-div-"] {
    background: var(--jp-layout-color0) !important;
    border: var(--jp-border-width) solid var(--jp-cell-editor-border-color) !important;
}

Before: After:

This PR should make this the default. The only concern I have is usage outside of the jupyter environment or versions missing these vars. The above screenshots are from the latest jupyter lab 3.x, built-in dark and light modes look correct as well.

[karolzak]

Thanks for your contribution @s-rog ! This indeed looks great! I always used the default theme for Jupyter so I never even considered this as an issue - thanks for bringing that up! I'll try testing it on as many platforms as possible but unfortunately I'm pretty sure it will fail ungracefully there. I'm not gonna lie - I'm not great with CSS but I wonder if there would be an option to set multiple values for modified params so that it always adjusts to the platform it's running on (basically to the styles and variables that are available on given platform)??

[s-rog]

@karolzak Seems like it's pretty trivial to add a default/fallback property, let me know if anything breaks!

[s-rog]

Supported notebook platforms:

    Jupyter
    Google Colab
    Azure Notebooks
    Kaggle Notebooks

I assume there are style vars for these as well, but I'm not sure if you can automatically determine from from within python... maybe env vars? Or perhaps the platform can simply be user specified.

[s-rog]

In this stackoverflow post:

For multiple fallbacks try: background-color: var(--my-background, var(--my-var, pink));

So we can have a prioritized style order according to the order on your README

[karolzak]

In this stackoverflow post:

For multiple fallbacks try: background-color: var(--my-background, var(--my-var, pink));

So we can have a prioritized style order according to the order on your README

Nice, that's exactly what we need. I'll snoop around and see what kind of vars we can use on different platforms

[s-rog]

Can this PR be merged first with the other platforms added in subsequent PRs?