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

docs: implement dark mode #575

Merged
merged 2 commits into from
Jun 13, 2020
Merged

Conversation

sreetamdas
Copy link
Contributor

@sreetamdas sreetamdas commented May 21, 2020

Picking up from #247, I've implemented changes for the following:

In dark mode:

  • inline code
  • inline code with links

In light mode:

  • inline code with links

There was also a warning with the aria-hidden tag on the landing page that has been fixed.

Attaching a screenshot to highlight the changes for the dark mode below; I had tweak the shade of purple being used for the code a elements. There were infima-based vars available in the custom.css file, so I went ahead and used those.

Since accessibility was one of the reasons that previous attempts didn't go through, I tried to make sure that there was enough contrast with the shades chosen (purple isn't easy to implement dark mode with 😅). Here's the results:

Before:

Mode Element Contrast
Light code a 4.43
Dark code 5.26
Dark code a 1.06

After:

Mode Element Variation Contrast
Light code a 5.15
Dark code 8.38
Dark code a inherited color 2.77
Dark code a "light" purple 3.33
Dark code a "lighter" purple 4.87

Would love to see dark mode getting finally enabled for the docs, please feel free to make any tweaks/suggestions that you'd like.

image

@netlify
Copy link

netlify bot commented May 21, 2020

Deploy preview for redux-starter-kit-docs ready!

Built with commit aa541fd

https://deploy-preview-575--redux-starter-kit-docs.netlify.app

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit aa541fd:

Sandbox Source
modest-shtern-yr6pk Configuration
clever-ritchie-85kv4 Configuration
hidden-dew-jfnem Configuration

@sreetamdas sreetamdas marked this pull request as ready for review May 21, 2020 05:39
@sreetamdas sreetamdas closed this May 28, 2020
@sreetamdas sreetamdas reopened this May 28, 2020
@markerikson
Copy link
Collaborator

Thanks!

@markerikson markerikson merged commit de1282c into reduxjs:master Jun 13, 2020
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