Add dark mode support. - #1521
Open
drgrice1 wants to merge 1 commit into
Open
Conversation
This uses the `data-bs-theme` attribute the same as webwork2 does. Since PG also uses bootstrap components this is necessary to get those to honor dark mode without a lot of effort. Drag and drop "buckets" are forced to light mode so that the colors it currently use don't cause contrast issues. The graphtool is also forced to light mode, rather than heftily reworking it, and because JSXGraph doesn't really support dark mode. The same is true of JSXGraph images for the `plots.pl` macro. "Knowl" dialogs are forced into light mode, because help files are not updated to work well in dark mode. Images always have a white background so that if the image has a transparent background it will not have contrast issues. MathQuill needs a couple of small changes so that it works well in dark mode. The cursor color needs to use the `currentcolor` and the background color of empty blocks needs to be color scheme responsive. That is in a pull request to the https://github.com/openwebwork/mathquill repository. Note that it is not published, so you will need to use the `npm link` approach to test with webwork2. There may be further modifications needed, but all problems I have tested are working fine. Note that one thing this cannot account for is colors that problem authors use. One thing that authors can do is use the CSS `light-dark` function instead of a single color. That will work for recent versions of all browsers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This uses the
data-bs-themeattribute the same as webwork2 does. Since PG also uses bootstrap components this is necessary to get those to honor dark mode without a lot of effort.Drag and drop "buckets" are forced to light mode so that the colors it currently use don't cause contrast issues.
The graphtool is also forced to light mode, rather than heftily reworking it, and because JSXGraph doesn't really support dark mode. The same is true of JSXGraph images for the
plots.plmacro."Knowl" dialogs are forced into light mode, because help files are not updated to work well in dark mode.
Images always have a white background so that if the image has a transparent background it will not have contrast issues.
MathQuill needs a couple of small changes so that it works well in dark mode. The cursor color needs to use the
currentcolorand the background color of empty blocks needs to be color scheme responsive. That is in a pull request to the https://github.com/openwebwork/mathquill repository. Note that it is not published, so you will need to use thenpm linkapproach to test with webwork2.There may be further modifications needed, but all problems I have tested are working fine.
Note that one thing this cannot account for is colors that problem authors use. One thing that authors can do is use the CSS
light-darkfunction instead of a single color. That will work for recent versions of all browsers.