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

Use default line colors for better contrast and distinction of auxiliary plots #1008

Merged
merged 5 commits into from
Mar 11, 2022

Conversation

axelboc
Copy link
Contributor

@axelboc axelboc commented Mar 11, 2022

Part of silx-kit/jupyterlab-h5web#82

The --secondary-dark color gets a bit lost if I try to give auxiliary plots more distinct colours. Changing to the default colour for the main plot, midnightblue, makes it pop out more, which means I can also use the default aux colours: orangered, forestgreen, crimson, mediumslateblue, sienna.

We've had that green for a long time, so it's going to take some getting used to, but it's not shocking. It's also closer to Matplotlib I think (that's where we got the default colours from, if I recall).

image

image

@axelboc axelboc requested a review from loichuder March 11, 2022 09:30
Copy link
Member

@loichuder loichuder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me likes it ✨

@loichuder
Copy link
Member

Here is the aspect on the dark mode for the record:

image

I find the colours less distinguishable than on the light mode but maybe that is just my deuteranomaly 🙈

@axelboc
Copy link
Contributor Author

axelboc commented Mar 11, 2022

I've managed to implement dark mode support for the line vis colors. I use data-keep-canvas-colors to stop inverting colors and let users define their own light/dark mode colors.

If the user doesn't specify colors, I pass my own defaults (either one value used for both light and dark, or two separate values) to useCSSCustomProperties, now renamed to useCustomColors. The hook then checks whether dark mode is active and returns the corresponding default color.

Of course, I've then reviewed all the default colors so that they are now consistent and contrasting in both light and dark mode:

image

image

packages/lib/src/vis/models.ts Show resolved Hide resolved
packages/lib/src/vis/line/LineVis.tsx Show resolved Hide resolved
packages/lib/src/vis/hooks.ts Show resolved Hide resolved
@axelboc
Copy link
Contributor Author

axelboc commented Mar 11, 2022

/approve

@axelboc axelboc merged commit aa78ef8 into main Mar 11, 2022
@axelboc axelboc deleted the aux-colors branch March 11, 2022 14:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants