Add dark mode by vsalvino · Pull Request #931 · nedbat/coveragepy (original) (raw)

Yea, the media query is pretty fun, and newer within the past year or so (MDN).

Regarding the fonts, I thought the serif font looked a bit odd in dark mode, and it also seemed odd to see the names of source code files in a book-style font. Purely personal opinion. As it is your project you get the final say :) It is easy to change the fonts with the sass variables.

Here are a few screenshots to compare:

Using Georgia/serif (current style):

Using the OS's system font stack, which is quite popular with websites nowadays (including github) - this is probably the most "natural" looking.

$font-normal:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font-code:    SFMono-Regular, Menlo, Monaco, Consolas, monospace;

Using OS system font plus monospace for the index (looks most natural to me... probably due to seeing those modules as imports in the source code frequently):

Of course, the least controversial design would be to use the browser defaults:

$font-normal: sans-serif;
$font-code:   monospace;

Feel free to check out my branch and play with the sass. Let me know what we think. On a related note, I would appreciate you trying it on a robust test suite that triggers every possible UI element to thoroughly test that it looks good in light and dark mode.