Shortcode seems to break dark theme CSS

[jmgirard]

I am trying to help a user of my extension to figure out why using my shortcode breaks dark theme styling.
See the original issue here: jmgirard/lordicon#2

Steps to recreate the problem:

1. Create a new project in RStudio > quarto book

2. Replace _quarto.yml with the following:

project:
  type: book

book:
  title: "reprex_quartobook"
  author: "Jane Doe"
  date: "8.2.2023"
  chapters:
    - index.qmd
    - intro.qmd

format:
  html:
    theme:
      light: cosmo
      dark: darkly

3. Install my lordicon extension via terminal:

quarto install extension jmgirard/lordicon

4. Render the index.qmd file and try the dark mode slider. It works and looks like this:

5. Now add a shortcode from my extension to index.qmd and re-render.

{{< li lupuorrc >}}

Note how the icon appears but some of the CSS styles are not applied correctly:

[dragonstyle]

It looks like the included bundle.js is explicitly setting the body background color (and text color as well):

...body {\r\n  color: #000;\r\n  background: #fff;\r\n}...

I'm not sure why, but that appears to be what is causing the issue.

[jmgirard]

Thank you! I will take a look at the bundle.

[jmgirard]

Yes, I had accidentally bundled a CSS file that styles the body element. Removing that fixed it.

[dragonstyle]

Ok great news! Thanks for writing and sharing that extension!!