Dark theme

[AshleyHenry15]

This PR adds a dark theme and resolves other theme-related issues:

Resolves #57
Resolves #7

Known issues:
#56
#59
Flashing: quarto-dev/quarto-cli#1325

Outstanding items tracking:

• Nav bar drop-down menu: update hover color

Before we merge:

• Update changelog
• Clean up CSS (make sure that I don't have duplicates, that the style sheets follow the same order/org, etc.)
• Maybe clean up examples in files?

Link to view docs:
https://ashley.quarto.pub/theme-testing/

[edavidaja]

more flash than a website in 1999

[m--]

It looks like there are some commented-out lines in the dark mode .scss file, not sure if those are still needed or not? Also, there's some inconsistent whitespace formatting in that file, not sure if you want to fix that (either as part of this, or at some point in the future), but i thought i'd mention it. Hooray dark mode! 😎 🎉

[aronatkins]

Visual feedback for dark-mode. I was testing using Safari. None of this is must-fix; only recording my initial reactions. Also keep in mind that I am not the target audience for this theme.

Code

The font/color choices for code blocks and inline code make them feel more prominent than the surrounding text. Here's one small example, but it also applies to other occurrences.

This felt especially pronounced with the "Output or filenames" code chunk; it drew my eye over everything else on the page.

Table headers

Table headers feel more visually prominent in dark mode than in light mode. This may be because they use a brighter color than the surrounding text. The fact that they are bold makes them more of a visual draw than the accompanying section header.

Table row highlighting

Table row highlighting feels much more subtle in dark mode than in light mode.

Code-nested tabset

The nested tabset beneath the "code" pill is doing some strange things.

First, there appears to be a tiny underline lingering on the left, perhaps because the bubble around RHEL is too large?

Second, on mouseover, the whole set of headings shifts around. This screen recording shows the effect:

Callout icons

The callout icons probably need to be a lighter color.

[AshleyHenry15]

@aronatkins - The nesting of the pills and tabs gets weird. I am assuming that it is due to the nesting of the different styles. I think that I will remove the example from the file for now until I can dive in and figure out if there is a way to make that work nicely.

• Table header color: I had changed it to white for accessibility but I just tested and it passes with the gray. So, I have removed the white coloring to the th class, and it should be fixed now.
• Table rows: Yeah, we went back and forth on the colors for this a lot. I used GitHub tables as an example but the blue complicates things. This will likely be something that I bring up with Veronica for some guidance at some point.