r-lib / pkgdown

Generate static html documentation for an R package
https://pkgdown.r-lib.org/
Other
718 stars 336 forks source link

Thinking about dark mode #1696

Closed maelle closed 5 months ago

maelle commented 3 years ago

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 commented 3 years ago

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

maelle commented 3 years ago

Note to self:

maelle commented 3 years ago

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 commented 3 years ago

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

maelle commented 3 years ago

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

maelle commented 3 years ago

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

maelle commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

jayhesselberth commented 1 year ago

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

hadley commented 1 year ago

@cpsievert can you explain how it works?

cpsievert commented 1 year ago

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.