Add dark mode support.

[drgrice1]

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-mode extension has been converted into a bs-color-scheme extension which rewrites the MathJax styles to honor the data-bs-theme value 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 the data-bs-theme extension. 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-editor repository, 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 README files in the theme directories have been deleted, and replaced with a single README.md file in the parent htdocs/themes directory. 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 in ConfigValues.pm to only list directories when listing theme directories, and to skip this README.md file.

[pstaabp]

I noticed that in the problem editor using the "Default" theme, which I assume comes up if one doesn't select a theme looks pretty bad in dark mode. Is there a way in CodeMirror to switch to "Basic Dark" as the theme instead if the user hasn't selected a theme. I think basic dark looks fine.

[drgrice1]

I noticed that in the problem editor using the "Default" theme, which I assume comes up if one doesn't select a theme looks pretty bad in dark mode. Is there a way in CodeMirror to switch to "Basic Dark" as the theme instead if the user hasn't selected a theme. I think basic dark looks fine.

The default theme looks fine in dark mode assuming you have run npm ci with this pull request. I am not going to implement what you are asking for. It is the users choice what theme to employ for the CodeMirror editor regardless of the page mode.

Also note that the Basic Dark theme should never be the default for anything. The Basic Dark theme is an add on theme. If anything should be the default it should be the One Dark theme which is actually the only theme put out by the CodeMirror developers that we have listed.

[drgrice1]

I may make the editor auto detect if the theme is not selected at a later time. That requires more changes to the pg-codemirror-editor package. It can't be done directly from the webwork2 code. I don't feel that it is high priority though, because I don't think that the default light theme really does look back in dark mode. Currently, if you select a dark theme then you have to tolerate the light mode everywhere else. Also, the problem renders in light mode regardless, so it is not entirely out of place in the page.

[drgrice1]

I realized there was an issue with the default mode of the CodeMirror editor. The color also needed to be set. That has been done now. That is why you probably thought that the default theme looked bad in dark mode.