Extend theme-dark idea to bootswatch-dark and other customizations?

[maelle]

When using the light switch it is possible to specify a different syntax highlighting theme for dark mode. Could that same idea be extended to Bootswatch theme and other variables? I know pkgdown's dark mode is different from the Quarto one #2679 (comment) but the Quarto interface is actually quite handy. 😸

[jayhesselberth]

Could this also be accomplished via custom CSS / JS?

[maelle]

Probably, but the idea of picking different Bootswatch themes / Bootstrap variables for light and dark might not be too niche? (Or maybe it is, as probably most pkgdown websites use the default 😅)

[gadenbuie]

Yes, bslib's (and therefore pkgdown's) light/dark mode is a bit different from Quarto's, which is mostly a historical accident. Quarto developed their approach to light/dark color modes just before Bootstrap provided a built-in approach.

The core approaches are roughly:

1. Quarto: compile two distinct themes for light and dark mode and then use JavaScript to load only one of these in the browser.
2. bslib/Bootstrap: One theme provides both light and dark mode. Dark mode is activated in the browser and largely depends on CSS variables.

My personal opinion is that, as much as possible, Quarto should align with Bootstrap's approach. Quarto's need to compile two themes and to manage correctly applying them is fraught with gotchas and is hard to maintain. Bootstrap's approach compiles only one CSS file and leans into web standards with wide browser support. I can't speak for the Quarto team as they need to consider their current user base and backwards compatibility, but I'd caution against replicating their approach.

I found this thread in part because I'm looking at making sure that brand.yml is supported in pkgdown via bslib. The brand.yml project may alleviate some of these issues. In brand.yml we currently follow Bootstrap's lead and expect a single color palette (i.e. info is the same color in both light and dark mode), but we have the syntax that we could reconsider and allow every theme color to have a light/dark counterpart.

To summarize, for Bootstrap 5, in my experience most people will get the best results by starting with a "light" Bootstrap theme and using Bootstrap's color mode feature for the dark mode variant. From there, if needed, you can usually use a little bit of CSS or Sass to tweak the dark mode styles.