Fix dark mode - Githubissues

matplotlib / mpl-brochure-site

Source for the top-level landing page.

Other

3 stars 13 forks source link

Fix dark mode #66

Closed QuLogic closed 1 year ago

QuLogic commented 1 year ago

This fixes a few things when dark mode is enabled.

Use theme colours for borders, callout icons, and link-like things, which were formerly hard-coded blue and too dark.
Re-create the quicklink icons in Inkscape so that they could have a transparent background. I added a slight white border for contrast.
Disable the darkening filter from pydata-sphinx-theme on these images which are meant to work in dark mode. This is a backport of pydata/pydata-sphinx-theme#914 and pydata/pydata-sphinx-theme#942.
Flip the footer gradient in dark mode to preserve the contrast between body and footer.

The plot type images still have the filter from the theme. I don't know if we should turn that off as well, or add a new style for dark mode.

story645 commented 1 year ago

can that slight white border be a slight gray border? It kinda hurts my eyes

timhoffm commented 1 year ago

can that slight white border be a slight gray border? It kinda hurts my eyes

That could be achieved with a semi-transparent white border. I think We don't want grey for the light case.

Maybe also apply to the inner white to make the icons less glaring overall.

QuLogic commented 1 year ago

How does 75% look? (haven't done the documentation one yet since that's a plot)

story645 commented 1 year ago

I think it looks better but hard to tell?

timhoffm commented 1 year ago

LGTM. Let‘s try.

timhoffm commented 1 year ago

AFAICS, the 75% change must still be committed.

QuLogic commented 1 year ago

Yes sorry, should be in now.

timhoffm commented 1 year ago

Maybe also apply to the inner white to make the icons less glaring overall.

What I meant is also making the inner white area (marked red) partly transparaent:

grafik

You can dismiss if you don't want to, but I'm not sure I made my proposal clear.

QuLogic commented 1 year ago

I tried 75% everywhere, but it looks a bit too dark IMO: Screenshot 2022-09-27 at 05-46-07 Matplotlib — Visualization with Python Here are increasing levels of transparency from 80% to 100% in 5% increments across the icons: I think maybe 90-95% (the Reference or Cheat Sheets icon) is fine?

story645 commented 1 year ago

90-95% looks good to me, thanks!

QuLogic commented 1 year ago

OK, moved to 90%, and actually fixed the documentation one directly in the script, so it's actually transparent.