Add dark mode support.

[drgrice1]

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.

[pstaabp]

Just a note that you need openwebwork/webwork2#3145 as well for dark mode to work.

On the problem editor, I wonder if making the draggable parts a gray would help. They are pretty stark white right now if the editor side is in dark mode.

[drgrice1]

@pstaabp: With this branch and openwebwork/webwork2#3145 both checked out I see

when dark mode is enabled.

[somiaj]

Some initial testing, most things work well.

I too see the same thing @pstaabp does and have white bars in the editor to change its size. I have freshly checked out the two branches, and ran npm ci.

Another thing I noticed with the editor, is if switching between light/dark mode, it doesn't update the problem. I thought this was due to the iframe, but problems on the library browser update just fine.

Only issues I ran into were my custom macros. What do I need to change text-dark or border-dark to better support dark mode. Does bootstrap have classes for this, or do I need to define my own using light-dark?

[drgrice1]

One thing that is worth pointing out is that all of the comments so far in this pull request should have been made in openwebwork/webwork2#3145. None of them have to do with this pull request, and are all about webwork2 things.

@somiaj: I fixed the issue with the PG problem editor color scheme not changing. The containing div for that page does not have the rpc_render_area class, and so the color-scheme selector was not finding it. I had to add the pgedit-render-area id for that.

I am still seeing the colors I posted in the screenshot above for the editor resize bars. I tested with both Firefox and Chrome to see if there was something different in Chrome. I also tested both with the develop branch and openwebwork/webwork2#3145 with this branch. Note that the colors of the resize bars are not even changed in these pull requests.

[somiaj]

The color of the bars are based off the browser setting it seems, not the webwork setting. If I set firefox to default to dark mode, the bars are the color you see. If I set it to "automatic" or "light mode", I get the light bars showing.

On the other hand if I set firefox to dark mode, but webwork to light mode, I also see dark bars.

[drgrice1]

Ahh, I usually use the browser settings via the developer tools to toggle dark mode, and not the UI selector in the page. I will put in a bug fix for that. Again, that has nothing to do with the PG dark mode pull requests, and is an issue with the develop branch (and main).

[drgrice1]

Only issues I ran into were my custom macros. What do I need to change text-dark or border-dark to better support dark mode. Does bootstrap have classes for this, or do I need to define my own using light-dark?

Bootstrap has some classes that are responsive. For background and border colors use the same classes as usual except add the -subtle suffix to get a responsive coloring. For example, the bg-primary class is not responsive, and is always the themes light mode primary color. However, the bg-primary-subtle class is responsive. For text, use the same classes as usual, except with the -emphasis suffix. For example, use text-primary-emphasis. Those would usually be used together. So use bg-primary-subtly text-primary-emphasis to get a background and foreground color with appropriate contrast in both color modes.

If those aren't what you are looking for, you can use the css light-dark method. That is supported by all recent browsers (any browser released after May of 2024).

[drgrice1]

Remember in reviewing this to consider openwebwork/mathquill#49 as well.

[drgrice1]

Oh, I didn't see that openwebwork/mathquill#49 had already been merged. I needed to refresh that page in my browser.

[drgrice1]

Although, note that openwebwork/mathquill#49 did not bump the @openwebwork/mathquill version, and so it is still not published. That will need to be done yet.

[somiaj]

I merged the mathquill PR so it could be published and added to this.

[drgrice1]

Note that this now includes the published MathQuill changes for it to support dark mode.