Dark Mode

[armanmoztar]

Will there be a dark mode feature implemented for prairielearn?

[jonatanschroeder]

There is an issue for it (#3814). PRs are welcome...

[armanmoztar]

Ah ok, thank you

[nwalters512]

I typically don't want to discourage PRs, but in this case I'm pretty strongly opposed to trying to do anything before Bootstrap officially introduces its dark mode. We do not want to have to maintain our own fork of Bootstrap or override its classes to achieve a dark theme. I've tried to do that before and it generally ends poorly.

[trombonekenny]

There are browser plugins that can add dark mode to sites that don't natively support it. If you explore those and find one that works for you, we could add it to the docs?

[trombonekenny]

We're waiting for Bootstrap to adopt a way to do dark mode (maybe in their v5?), and then for PL to upgrade beyond bootstrap v4.

[jonatanschroeder]

Note that the switch from Bootstrap 4 to 5 requires a significant number of changes in the PrairieLearn codebase itself, since it's not backwards compatible. So this would not as simple as updating a dependency. Besides, several instructor questions rely on Bootstrap 4 classes, and there needs to be some consideration on how to handle those.

[Timothy-Gonzalez]

What would this process look like? Is there some way to migrate these classes over automatically? If you want to delay this until you have to, I understand that too.

[jonatanschroeder]

This is not something to be taken lightly. If bootstrap were used only in the PrairieLearn code base, a transition would look something like this: https://getbootstrap.com/docs/5.0/migration/. However, many courses use bootstrap classes in their questions, and we don't have control over those questions, nor can we force instructors to change them in a whim. Such a transition would likely be a case where we would need to provide access to both versions of bootstrap (at least for a while) and there would need to be some sort of configuration that would allow courses (or individual questions) to use a specific version. It would also require careful consideration of the fact that the main page may use one Bootstrap version while the question itself uses another, so there may be a need to isolate the question panels into iframes or something similar. This transition would likely involve multiple steps with a tonne of additional CI tests and instructor feedback. This should give you an idea of what is entailed, and why a simple "just upgrade bootstrap" is not as simple as it looks.

[echuber2]

In the short term, besides Dark Reader, I think there are some browser addons that let you specify custom CSS overrides. If you're feeling motivated, you could design a community dark theme for PL that people could apply to their own clients. (Someone may have already done this.)

[Timothy-Gonzalez]

In the short term, besides Dark Reader, I think there are some browser addons that let you specify custom CSS overrides. If you're feeling motivated, you could design a community dark theme for PL that people could apply to their own clients. (Someone may have already done this.)

I already have a dark reader extension and all that set up, my issue is I'd like it to be implemented natively, and it would be nice to be able to use themes during exams.

Given the constraints mentioned above, it probably isn't worth switching over to bootstrap 5 just for themes.

[eliotwrobson]

If this is currently an issue, you can install Dark Reader (I think it does a pretty good job for PL, even though it's not native).