Dark mode online judge

[int-y1]

This is for the many users who requested dark mode. This issue is possibly a subset of #578.

A few general guidelines:

• I will try to keep this description up to date. For any bugs that I missed, feel free to post them in this issue.
• Feel free to make a PR for any of these bugs. A few tips to make review easier:
  • If you're working with SCSS, you'll find these files useful: /resources/vars-*.scss
  • You can put Part of #2035 in your PR description. Don't put Closes #2035/Fixes #2035.
  • Post a screenshot of before change + after change.
  • For small changes, average review time is ~2 days. For big changes, review will take longer.

Important styling bugs:

• [ ] https://dmoj.ca/problem/2dperm Blockquote sidebar is too dark. (Thanks, @Xyene)
• [ ] https://dmoj.ca/edit/profile/ The editor's header and sidebars are light.

Less important styling bugs:

• [ ] https://dmoj.ca/stats/language/?dark Pie chart's labels are black.
• [ ] When hovering over the X on alerts (e.g., https://dmoj.ca/problem/cco21p6/tickets/new), the X blends in to the background. It's also pretty light to begin with. (Thanks, @Xyene)
• [ ] Images need background-color: white; because the image may have transparency.
• [ ] https://dmoj.ca/edit/profile/ Set site theme to dark and disable experimental features. The editor uses dark mode. (Thanks, @Riolku)

When you're bored:

• Go to /edit/profile/, enable experimental features, and set site theme to dark. Visit any page, and try to find styling bugs.
• Find page-specific <style> with git grep -n "<style". At a minimum, migrate the color-specific properties into scss file(s).

[int-y1]

This issue has reached a milestone.

The site will serve dark mode if the user specifies ?dark in the URL. For example: https://dmoj.ca/problem/aplusb?dark This new feature is intended for developers who want to test in prod, and work on this issue. There is a lot of work remaining. Possible future milestones:

• Dark mode looks ok when a logged-out user is browsing the site.
• Dark mode looks ok when a new user is browsing the site.
• Dark mode looks ok when an admin is browsing the site.
• A user can specify dark mode in /edit/profile/.

[Xyene]

• [x] SVG/PNG math isn't color-inverted, though MathJax is. The PNG may fall under image color inversion.

[Xyene]

• [x] User profile images should have a background set, see e.g. comments on https://dmoj.ca/problem/fibonacci

This is a subset of

Images need background-color: white; because the image may have transparency.

but we might want to address it separately, since images in problem statements may be fine with color inversion.

• [x] Text fields are black, but checkboxes and select2 fields are not, e.g. on https://dmoj.ca/problems/

[jdabtieu]

This might be a little nitpicky, but purple text can be hard to read against the dark background Lightening the color in dark mode to something like #a600a6 (from #800080) would help Same for blue users, though I don't have a better suggestions for it

[Xyene]

Here's a CSS export of pygment's github-dark theme: https://gist.github.com/Xyene/e0cac053b28507cd5e65478ae44eba22

This could be used in place of https://github.com/DMOJ/online-judge/blob/master/resources/pygment-github.css

[Xyene]

• [ ] Grading / processing submission status rows are janky

Unsure if we want to just invert the spinner colors, or set a background on the row.

[Ninjaclasher]

• [ ] Use a different default editor theme for dark mode.

[Xyene]

We should import more ace.js themes, upstream has many more dark themes than we do: https://ace.c9.io/build/kitchen-sink.html

Maybe we should add a "Default" editor theme, that does different things for light/dark mode?

[Xyene]

• [ ] Blockquote sidebar is too dark, I think we want to make it lighter than the background rather than darker:

[Xyene]

• [ ] When hovering over the X on alerts (e.g., https://dmoj.ca/problem/cco21p6/tickets/new), the X blends in to the background. It's also pretty light to begin with.
• [ ] We should soften whites and blacks, e.g.

instead of

Headers should be brighter than the content they are heading.

[Riolku]

Here's a bug where the editor is dark even though experimental features aren't on.

[jdabtieu]

Header of the user-script editor is light when dark mode is on. Also not a bug, but could we get darker scrollbars in dark mode?