Open int-y1 opened 1 year ago
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:
/edit/profile/
.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.
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
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
Unsure if we want to just invert the spinner colors, or set a background on the row.
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?
instead of
Headers should be brighter than the content they are heading.
Here's a bug where the editor is dark even though experimental features aren't on.
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?
This is for the many users who requested dark mode. This issue is possibly a subset of #578.
A few general guidelines:
/resources/vars-*.scss
Part of #2035
in your PR description. Don't putCloses #2035
/Fixes #2035
.Important styling bugs:
Less important styling bugs:
background-color: white;
because the image may have transparency.When you're bored:
/edit/profile/
, enable experimental features, and set site theme to dark. Visit any page, and try to find styling bugs.<style>
withgit grep -n "<style"
. At a minimum, migrate the color-specific properties into scss file(s).