[REVIEW] Fix issues with day & night modes in python docs #11400

galipremsagar · 2022-07-29T03:08:04Z

Description

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:

After:

In light mode:
Before:

After:

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

Before:

After:

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

Checklist

I am familiar with the Contributing Guidelines.
The documentation is up to date with these changes.

bdice · 2022-07-29T03:59:26Z

From Mark's screenshot in rapidsai/docs#284, it looks like the dark mode font colors (lighter colors) were being applied but the background color remained light (instead of being dark). Are we overriding something elsewhere in our CSS, or do we need a newer version of the theme? I'm looking into this a bit further, but I am surprised we need to add custom code since dark/light switching appears to be a built-in feature of the theme.

bdice · 2022-07-29T04:16:57Z

I was not able to reproduce the error in rapidsai/docs#284 where dark mode was not being applied. This screenshot is building from branch-22.10 with pydata-sphinx-theme 0.9.0.

@harrism @galipremsagar Is this problem specific to a particular browser or operating system? I used Firefox, Chrome, and Edge and did not see an issue. I varied the light/dark system settings in Windows as well. Is there a problem we need to report upstream, or an existing issue/PR in the upstream theme that this was based on?

codecov · 2022-07-29T04:58:37Z

Codecov Report

❗ No coverage uploaded for pull request base (branch-22.08@c11b780). Click here to learn what that means.
The diff coverage is n/a.

❗ Current head da3d576 differs from pull request most recent head a679272. Consider uploading reports for the commit a679272 to get more accurate results

@@               Coverage Diff               @@
##             branch-22.08   #11400   +/-   ##
===============================================
  Coverage                ?   86.47%           
===============================================
  Files                   ?      144           
  Lines                   ?    22856           
  Branches                ?        0           
===============================================
  Hits                    ?    19765           
  Misses                  ?     3091           
  Partials                ?        0

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c11b780...a679272. Read the comment docs.

galipremsagar · 2022-07-29T13:44:45Z

I was not able to reproduce the error in rapidsai/docs#284 where dark mode was not being applied. This screenshot is building from branch-22.10 with pydata-sphinx-theme 0.9.0.

@harrism @galipremsagar Is this problem specific to a particular browser or operating system? I used Firefox, Chrome, and Edge and did not see an issue. I varied the light/dark system settings in Windows as well. Is there a problem we need to report upstream, or an existing issue/PR in the upstream theme that this was based on?

So I suppose there's a typo in Mark's first comment:

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

I think he meant "In light mode", instead.

Are we overriding something elsewhere in our CSS, or do we need a newer version of the theme? I'm looking into this a bit further, but I am surprised we need to add custom code since dark/light switching appears to be a built-in feature of the theme.

Yes, we are overriding certain default color schemes that pydata-sphinx-theme choose to go with. Which is why it is difficult to read in the first place with the default color schemes. I have made changes to the dark theme to be much easier to read for everyone. It is in some ways similar to GitHub dark theme.

Another example of why going with the default color schemes isn't a good idea is this: pydata/pydata-sphinx-theme#649

bdice

Discussed offline. LGTM!

galipremsagar · 2022-07-29T14:51:28Z

This PR also requires rapidsai/docs#285 to be merged.

davidwendt

Thanks for fixing the hover as well.

Fixes similar issue found in: rapidsai/cudf#11400 Authors: - GALI PREM SAGAR (https://github.com/galipremsagar) Approvers: - Brad Rees (https://github.com/BradReesWork) URL: #2471

davidwendt · 2022-07-29T20:30:39Z

cpp/doxygen/Doxyfile

@@ -1156,7 +1156,7 @@ HTML_HEADER            =
 # that doxygen normally uses.
 # This tag requires that the tag GENERATE_HTML is set to YES.

-HTML_FOOTER            =
+HTML_FOOTER            = footer.html



You also need to blank out the filename in this line: HTML_EXTRA_STYLESHEET = rapids.css
Since you've delete the rapids.css

Thanks for the catch, David. Deleted this.

davidwendt · 2022-07-29T20:31:07Z

cpp/doxygen/footer.html

@@ -0,0 +1,3 @@
+<script src="https://docs.rapids.ai/assets/js/custom.js"></script>
+<link rel="stylesheet" href="https://docs.rapids.ai/assets/css/custom.css">
+


Cool. Do these files not need a copyright header?

Yup, added now.

davidwendt

Thanks for fixing this.

harrism · 2022-07-29T22:05:07Z

In dark mode, I find the purple headings a bit hard to read on a black background (but I'm sitting in a bright room). We should probably evaluate this in a follow-up. For now, thanks for the fixes!

Porting the fixes from rapidsai/cudf#11400 Authors: - Michael Wang (https://github.com/isVoid) Approvers: - GALI PREM SAGAR (https://github.com/galipremsagar) - Mark Harris (https://github.com/harrism) URL: #613

Fixes similar issue found in: rapidsai/cudf#11400 Authors: - GALI PREM SAGAR (https://github.com/galipremsagar) Approvers: - https://github.com/jakirkham URL: #360

Fixes similar issue found in: rapidsai/cudf#11400 Authors: - GALI PREM SAGAR (https://github.com/galipremsagar) Approvers: - Mads R. B. Kristensen (https://github.com/madsbk) URL: #95

shwina · 2022-08-01T19:08:49Z

rerun tests

shwina · 2022-08-01T22:49:16Z

@gpucibot merge

galipremsagar added 2 commits July 28, 2022 17:41

add proper light and dark theme support

1d4f907

custom js file

853e4d5

galipremsagar added 3 - Ready for Review Ready for review by team doc Documentation non-breaking Non-breaking change labels Jul 29, 2022

galipremsagar self-assigned this Jul 29, 2022

misc fixes

0bef956

bdice approved these changes Jul 29, 2022

View reviewed changes

davidwendt approved these changes Jul 29, 2022

View reviewed changes

rename file

520242a

This was referenced Jul 29, 2022

[REVIEW] Fix issues with day & night modes in python docs rapidsai/cugraph#2471

Merged

[REVIEW] Fix issues with day & night modes in python docs rapidsai/cucim#360

Merged

rename

28d3435

centralize all common code

9f2ad9c

github-actions bot added the libcudf Affects libcudf (C++/CUDA) code. label Jul 29, 2022

davidwendt requested changes Jul 29, 2022

View reviewed changes

copyright and deletion

a679272

galipremsagar requested a review from a team as a code owner July 29, 2022 20:45

galipremsagar requested review from hyperbolic2346 and nvdbaranec July 29, 2022 20:45

davidwendt approved these changes Jul 29, 2022

View reviewed changes

galipremsagar mentioned this pull request Jul 29, 2022

[REVIEW] Fix issues with day & night modes in docs rapidsai/kvikio#95

Merged

isVoid mentioned this pull request Jul 29, 2022

Fix issues with day & night modes in python docs rapidsai/cuspatial#613

Merged

rapids-bot bot merged commit 6e0e47e into rapidsai:branch-22.08 Aug 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[REVIEW] Fix issues with day & night modes in python docs #11400

[REVIEW] Fix issues with day & night modes in python docs #11400

galipremsagar commented Jul 29, 2022 •

edited

Loading

bdice commented Jul 29, 2022 •

edited

Loading

bdice commented Jul 29, 2022 •

edited

Loading

codecov bot commented Jul 29, 2022 •

edited

Loading

galipremsagar commented Jul 29, 2022 •

edited

Loading

bdice left a comment

galipremsagar commented Jul 29, 2022

davidwendt left a comment

davidwendt Jul 29, 2022

galipremsagar Jul 29, 2022

davidwendt Jul 29, 2022

galipremsagar Jul 29, 2022

davidwendt left a comment

harrism commented Jul 29, 2022

shwina commented Aug 1, 2022

shwina commented Aug 1, 2022

		@@ -0,0 +1,3 @@
		<script src="https://docs.rapids.ai/assets/js/custom.js"></script>
		<link rel="stylesheet" href="https://docs.rapids.ai/assets/css/custom.css">

[REVIEW] Fix issues with day & night modes in python docs #11400

[REVIEW] Fix issues with day & night modes in python docs #11400

Conversation

galipremsagar commented Jul 29, 2022 • edited Loading

Description

Checklist

bdice commented Jul 29, 2022 • edited Loading

bdice commented Jul 29, 2022 • edited Loading

codecov bot commented Jul 29, 2022 • edited Loading

Codecov Report

galipremsagar commented Jul 29, 2022 • edited Loading

bdice left a comment

Choose a reason for hiding this comment

galipremsagar commented Jul 29, 2022

davidwendt left a comment

Choose a reason for hiding this comment

davidwendt Jul 29, 2022

Choose a reason for hiding this comment

galipremsagar Jul 29, 2022

Choose a reason for hiding this comment

davidwendt Jul 29, 2022

Choose a reason for hiding this comment

galipremsagar Jul 29, 2022

Choose a reason for hiding this comment

davidwendt left a comment

Choose a reason for hiding this comment

harrism commented Jul 29, 2022

shwina commented Aug 1, 2022

shwina commented Aug 1, 2022

galipremsagar commented Jul 29, 2022 •

edited

Loading

bdice commented Jul 29, 2022 •

edited

Loading

bdice commented Jul 29, 2022 •

edited

Loading

codecov bot commented Jul 29, 2022 •

edited

Loading

galipremsagar commented Jul 29, 2022 •

edited

Loading