Make Bootswatch paired light and dark themes available

Discussed in https://github.com/quarto-dev/quarto-cli/discussions/6740

^{Originally posted by allefeld September 6, 2023}

Description

For many of the Bootswatch themes there seem to be paired light and dark versions. For example, on the Cosmo theme page https://bootswatch.com/cosmo/ there is a switch in the upper right corner which toggles between the standard light version and a version which retains fonts, formatting, and many colors, but has light-on-dark text.

I tried to implement that for my own website using

    theme:
      light: cosmo
      dark: cosmo

and

    theme:
      light: cosmo
      dark: cosmo-dark

or

    theme:
      light: cosmo
      dark: cosmo_dark

but none of these work.

I downloaded the source code from the light and the dark version of the Cosmo theme page and compared the files, and the only difference seems to be that the html element has an additional attribute data-bs-theme="dark". Manipulating that manually via the inspector works on the Bootswatch theme page, but it does not work on Quarto-generated pages.

It would be nice if there was a way to take advantage of these paired themes in Quarto, instead of pairing two different light and dark themes.

Start with the YAML theme configuration examples and compare Quarto-generated HTML with Bootswatch's Cosmo light and dark pages, focusing on the html data-bs-theme attribute. Done means a paired light/dark Bootswatch theme can be selected through Quarto without manually editing generated HTML.