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.
The color scheme (dark or light) that is used is automatically detected from the browser's settings initially, but can be set via a color scheme chooser in the page header.
PG problems are still rendered in light mode regardless of the color mode for the rest of the page. Converting PG to honor dark mode will take some work. Note that there are some small changes needed for the image view dialog and knowls of PG to make sure that those dialogs render in light mode. There is also a minor change to make the scaffold buttons stay in light mode as well. These changes are made in openwebwork/pg#1369.
Note that there were some issues with light mode (i.e., the existing themes). The contrast of the links in the site nav were not good when they were focused or hovered over with the mouse. This was due to an override of the link focus styles that made the colors lighter in those cases. That was needed for links in the masthead (the page header), but generally was bad elsewhere. So instead this uses the Bootstrap defaults for the hover/active colors which darkens the colors instead of lightening them. So now there is just a special case for links in the masthead, and the other links use bootstraps default colors which gives higher contrast in the site nav.
One side advantage of the above approach since it darkens links on hover and focus instead of lightening them is that I can finally switch to a link color for the math4-yellow theme that is not off theme. Previously it was a reddish color that I never really like in the scope of the theme, but was needed for contrast. Now it uses a rather dark yellow and gives a more consistent feel for the theme.
The MathJax
no-dark-modeextension has been converted into abs-color-schemeextension which rewrites the MathJax styles to honor thedata-bs-themevalue instead of using media queries for the browser mode. This means that MathJax will display in the correct mode wherever the element is in the page. For example, on a problem page the math in the problem will always be in light mode. On the problem grader page the math in the problem there will also be in light mode, but the formula student answers will be in dark mode if the page is set to that. Note that the MathJax dialogs will always be in dark mode if the page is set to that since those are injected outside of the problem content div. The menu will also always be dark mode in a problem if the page is set to that since there isn't an override for the menu in thedata-bs-themeextension. Its styles work differently.Note that there was a small change needed for the PG CodeMirror editor to give its default light theme a white background. This was done in the
pg-codemirror-editorrepository, and the new npm package published and included in this pull request.I am sure that I missed some colors that need to be adjusted in dark mode and perhaps issues with forcing PG into light mode, but I can't find anything right now. So please check this carefully.
The
READMEfiles in the theme directories have been deleted, and replaced with a singleREADME.mdfile in the parenthtdocs/themesdirectory. It has instructions on how to create a custom theme, and documents the Sass and CSS variables that can be set. There is a small change inConfigValues.pmto only list directories when listing theme directories, and to skip thisREADME.mdfile.