Thinking about dark mode

[maelle]

There will be two CSS files, one light and one dark.

I am wondering how users could provide variables especially for dark mode (bslib-dark in YAML?).

bslib:
  variable1: bla
  variable2: blabla
bslib-dark:
  variable1: blop

now what should be the value for variable2 in dark mode: the Bootstrap/pkgdown default, or variable2 as defined under bslib:?

The former seems more logical if this variable is a colour, but if it's a font for instance, it would be a bit annoying to define it twice.

[maelle]

or probably pkgdown itself should only pick a few variables to make the dark mode CSS.

[maelle]

Note to self:

• Use as many BS variables as possible in the syntax highlighting sass;
• For all Pandoc classes, use new variables (I've just tried, it works just by adding variables to pkgdown_bslib_defaults() even if they are not BS variables) and document them.

[maelle]

I wonder how to name the variables for colours of code. E.g. the color for fu, should it be "$fu-color". CC @apreshill as you might have an opinion.

[maelle]

Dark mode example https://solutions.rstudio.com/ (except I can't find code thus no syntax highlighting theme)

[maelle]

Re-surfacing a link shared by @apreshill https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis

[maelle]

Customization logic https://github.com/r-lib/pkgdown/pull/1707/files#r645567663

[maelle]

Just noting that it could be one CSS file with all the rules (and different classes for dark/light) as it is something I saw recently.

[hadley]

There a good general guide at https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

I think we'll probably need to have two separate style sheets (one for light and one for dark), unless there's some hack to generate only the changed rules with bslib (which seems unlikely). We could probably figure out how to combine all the rules into one, but that would double the size of the css.

[maelle]

Things would be easier if the navbar colours only depended on CSS, not HTML, but that's not Bootstrap/Bootswatch logic.

[jayhesselberth]

bslib now has a dark mode toggle on its pkgdown site (top right):: https://rstudio.github.io/bslib/

[hadley]

@cpsievert can you explain how it works?

[cpsievert]

Here's the PR were we added it https://github.com/rstudio/bslib/pull/768

I think it's mostly self-explanatory from the PR and Bootstrap color mode docs, but happy to answer any more specific questions. Also, keep in mind that you'll need the development version of bslib because it requires Bootstrap 5.3 which we only recently updated to.