How do I enable custom styling for dark & light mode themes in an extension?

[coatless]

Description

I'd like to style custom elements that an extension creates available in a Quarto document with both dark and light theme variants. What is the best way to include these assets? Would the registration allow for users to re-style with their own preferences (through a similarly named stylesheet or later specified user-stylesheet)?

The two possible approaches would be:

1. Including a css registration within the lua filter; and,
2. overriding the theme option under formats.

For the first option, I think this would mean two calls into quarto.doc.add_html_dependency(). This gives:

-- extension-logic.lua 

quarto.doc.add_html_dependency({
  name = "themify-dark",
  version = "0.1.0",
  stylesheets = {"base_theme_dark.scss"}
})

quarto.doc.add_html_dependency({
  name = "themify-light",
  version = "0.1.0",
  stylesheets = {"base_theme.scss"}
})

For the overriding the format option, I think the following should yield the desired overrides based on theme option description.

# _extension.yaml

title: themify
author: JJB
version: 0.1.0
quarto-required: ">=1.4.0"
contributes:
  formats:
    common:
      filters: 
        - extension-logic.lua
    html:
      theme:
        light: [base_theme.scss]
        dark: [base_theme.scss, base_theme_dark.scss]
    html+light:
       theme: [base_theme.scss]
    html+dark:
       theme: [base_theme.scss, base_theme_dark.scss]

[mcanouil]

These would be the default in the YAML. If a user wants to modify the themes, by either replacing or adding to it, it will work as with default formats, i.e., users will need to include your default and their theme to have something complementary.

Now regarding what's the best way to include the assets by LUA or path. I am not sure, but it can be checked easily I think.