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

[CSS] Increase dark mode contrast to meet WCAG requirements and other dark mode things #122

Merged
merged 2 commits into from
Dec 6, 2023

Conversation

sneakers-the-rat
Copy link
Contributor

Main Stuff

The light mode of the packaging guide has a lovely, consistent, white and purple theme. The dark mode leaves a lot of default variables in place, and importantly doesn't switch the H1 color which is a very dark purple (which looks lovely in light mode!) This PR nudges us towards a more consistent style across light and dark modes by extracting some of the colors used elsewhere in the custom css file and creating a set of pyos css variables to use as a palette, and then uses those in the dark mode!

Currently the page looks like this:
Screen Shot 2023-12-05 at 7 58 48 PM

which is not great for accessibility since the contrast is so low, and the teal color is pretty grating against the purples. The contrast is beneath WCAG
Screen Shot 2023-12-05 at 8 01 58 PM

So the after shot is like this:

Screen Shot 2023-12-05 at 8 00 19 PM

which is not perfect but is a step in the right direction.

Screen Shot 2023-12-05 at 8 02 30 PM

Other Stuff

Navbar

There's a big pointless block beneath the navbar stuff, not sure what it it's supposed to do, but at the moment what it does is make a scrollbar always appear and makes the readthedocs version box slide off the page. So I set that things margin to "unset"

Before:
Screen Shot 2023-12-05 at 8 09 22 PM

after:
Screen Shot 2023-12-05 at 8 09 33 PM

Nox Build

The sphinx-autobuild command doesn't copy static files unless you tell it to (same as sphinx), which was super annoying to work on the CSS with, so i added a section there to allow us to explicitly specify files, and then did that (which is overridable by passing positional arguments)

@sneakers-the-rat sneakers-the-rat changed the title Increase dark mode contrast to meet WCAG requirements and other dark mode things [CSS] Increase dark mode contrast to meet WCAG requirements and other dark mode things Dec 6, 2023
@lwasser
Copy link
Member

lwasser commented Dec 6, 2023

AMAZING!!! THANK YOU THANK YOU THANK YOU!!

@lwasser
Copy link
Member

lwasser commented Dec 6, 2023

pre-commit.ci autofix

@lwasser
Copy link
Member

lwasser commented Dec 6, 2023

The sphinx-autobuild command doesn't copy static files unless you tell it to (same as sphinx), which was super annoying to work on the CSS with, so i added a section there to allow us to explicitly specify files, and then did that (which is overridable by passing positional arguments)

this has been driving me crazy. the only way to trigger a css update is to make a random edit to another md file and then it updates. thanks for fixing this all. i'll merge this now!

@lwasser lwasser merged commit 0a05376 into pyOpenSci:main Dec 6, 2023
3 checks passed
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