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

[BUG] Dark mode font color is too light #284

Closed
harrism opened this issue Jul 28, 2022 · 1 comment · Fixed by rapidsai/cudf#11400
Closed

[BUG] Dark mode font color is too light #284

harrism opened this issue Jul 28, 2022 · 1 comment · Fixed by rapidsai/cudf#11400
Labels
? - Needs Triage Need team to review and classify bug Something isn't working

Comments

@harrism
Copy link
Member

harrism commented Jul 28, 2022

Describe the bug
This appears in the 22.08 nightly docs, but not in the stable 22.06 docs, so we should get it fixed before 22.08 release.

In dark mode, the paragraph font color is light grey on white, which is hard to read.

image

Here's the same text in light mode, or in the stable 22.06 docs:
image

If you are on a mac with dark mode set, this is the default, which is bad. You can cycle through modes on the site with this button (left one):
image

Note that another bug is that there is no hover hint text on that button. But you can see what it does if you turn on the javascript console, where it prints:

Changed to light mode using the light theme. pydata-sphinx-theme.js:32:63449
Changed to dark mode using the dark theme. pydata-sphinx-theme.js:32:63449
Changed to auto mode using the dark theme.

Verified this on Firefox and Chrome on Mac and Window.

@harrism harrism added ? - Needs Triage Need team to review and classify bug Something isn't working labels Jul 28, 2022
@galipremsagar
Copy link
Contributor

I'm looking into this.

rapids-bot bot pushed a commit to rapidsai/cudf that referenced this issue Aug 1, 2022
Fixes: rapidsai/docs#284

This PR fixes day(light) & night(dark) mode color schemes which makes text and a lot of html elements look unclear.

In dark mode:
Before:
 
<img width="1489" alt="Screen Shot 2022-07-28 at 10 01 38 PM" src="https://user-images.githubusercontent.com/11664259/181674172-48e9dd8f-9fb9-447c-a63b-4a6f359b2c4f.png">

After:
<img width="1569" alt="Screen Shot 2022-07-29 at 3 31 54 PM" src="https://user-images.githubusercontent.com/11664259/181838929-f27d664a-eb4c-4a72-8ad9-cf54246b3098.png">


In light mode:
Before:

<img width="1545" alt="Screen Shot 2022-07-28 at 10 03 36 PM" src="https://user-images.githubusercontent.com/11664259/181674247-2307b7a4-0dd5-410a-9cb2-ca18d641d89d.png">

After:
<img width="1506" alt="Screen Shot 2022-07-29 at 3 31 07 PM" src="https://user-images.githubusercontent.com/11664259/181838856-fd0abb85-cc56-4392-8cef-182bb790fff4.png">



Introduced darker color schemes such that code text highlightings are visible properly in dark mode:

Before:
<img width="741" alt="Screen Shot 2022-07-28 at 10 06 08 PM" src="https://user-images.githubusercontent.com/11664259/181674530-aa78290f-b011-437e-a955-4e85bbbee5e9.png">

After:
<img width="704" alt="Screen Shot 2022-07-28 at 10 06 15 PM" src="https://user-images.githubusercontent.com/11664259/181674545-3d0ba553-8b35-49b1-972a-a5fb1e33b0b9.png">


Introduced custom javascript method that will add hover text to "**Theme switcher**"  button:

<img width="552" alt="Screen Shot 2022-07-28 at 9 59 40 PM" src="https://user-images.githubusercontent.com/11664259/181674649-091c4b27-aa4b-4752-a8c8-45b7e71e3417.png">
<img width="622" alt="Screen Shot 2022-07-28 at 9 59 28 PM" src="https://user-images.githubusercontent.com/11664259/181674651-88bf5388-bf81-4633-9360-88ca5df88b85.png">

Authors:
  - GALI PREM SAGAR (https://github.com/galipremsagar)

Approvers:
  - Bradley Dice (https://github.com/bdice)
  - David Wendt (https://github.com/davidwendt)

URL: #11400
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
? - Needs Triage Need team to review and classify bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants