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.

Sign up for GitHub

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

Jump to bottom

Adaptive theme #27

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Adaptive theme #27

wants to merge 3 commits into from

Conversation

s-rog
Copy link

@s-rog s-rog commented Feb 5, 2021 •
edited
Loading

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:
image
After:
image

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
Copy link
Owner

karolzak commented Feb 5, 2021

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

@karolzak karolzak added the enhancement New feature or request label Feb 5, 2021
@s-rog
Copy link
Author

s-rog commented Feb 6, 2021

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

@s-rog
Copy link
Author

s-rog commented Feb 6, 2021 

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
Copy link
Author

s-rog commented Feb 8, 2021

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
Copy link
Owner

karolzak commented Feb 8, 2021

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
Copy link
Author

s-rog commented Feb 18, 2021

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

@karolzak karolzak mentioned this pull request Mar 1, 2021
Open
@karolzak karolzak linked an issue Feb 4, 2024 that may be closed by this pull request
labels color issues #60
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

labels color issues
2 participants
@s-rog @karolzak