posit-dev / product-doc-theme

Shared theme for Posit product documentation
https://docs.posit.co/
MIT License
5 stars 1 forks source link

Dark theme #45

Closed AshleyHenry15 closed 4 months ago

AshleyHenry15 commented 5 months ago

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

Resolves #57 Resolves #7

Known issues:

56

59

Flashing: https://github.com/quarto-dev/quarto-cli/issues/1325

Outstanding items tracking:

Before we merge:

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

aronatkins commented 4 months ago

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.

image

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.

image

Table row highlighting

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

image

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?

image

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

tab-hop

Callout icons

The callout icons probably need to be a lighter color.

image
AshleyHenry15 commented 4 months ago

@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.