Option to use light-dark with generated CSS file

[jvatic]

I appreciate that light-dark is used when generating inline styles (#7), and would love if we could extend that to be an option for generated files too.

I'm using color-mode in :root to control light and dark mode, and as such am relying completely on light-dark() to pick the correct colors. (This also means the generated linline styles don't work well for me either, but I'll open a separate issue for that.)

Is this something you're open to having an option for? I'd be happy to attempt a PR if so.

[Keats]

What would the generated output look like?

[jvatic]

It'd be a single CSS file (same as when specifying a single theme) but with both themes merged via the light-dark CSS function, e.g.:

.z-code {
  color: light-dark(#24292E, #E1E4E8);
  background-color: light-dark(#FFFFFF, #24292E);
}

/* ... */

It could also set color-scheme: light dark or not following the same option as in #62, or just leave that up to the user.

I'm thinking theme::generate_css could be updated to take an enum of CompiledTheme (Single(_) vs LightDark(_, _)), and then either add a fn generate_light_dark_css to registry or update registry::generate_css to take an Into<_> for a theme name enum (which would need a From<&str> to main compatability, and could also have a From<(&str, &str)> for the lightdark variant [edit: but that'd be ambiguous if you also wanted to merge generate_dual_css, so maybe not]).

[Keats]

I think to work that way it would have to be combinatorial?

[jvatic]

Sure, yes, I haven't dug too deep into it yet. I take it you're referring to the need to reconcile the StyleMaps and optional properties? We'd either need to change registry::generate_css to return a Result in that case, or introduce a new struct that represents two combined themes with a fallible constructor. The latter probably makes more sense along with a trait representing a compiled theme (single or dual), and could help consolidate other areas of the codebase too (e.g. HtmlRenderer::render).

[Keats]

At compile time you don't know which rules need to be combined so you need to do (light theme rules)x(dark theme rules) which is not good

[jvatic]

Hmm... couldn't it be closer to (light theme rules)+(dark theme rules)? Clearly I need to dig into this more.

Alternatively though, I only ever need the CSS for rules that mach the sum of all highlighter operations, so it may be more reasonable to keep state between those and output that as a stylesheet vs inline styles? The end goal I'm optimizing for is to be able to disable inline styles in my CSP, and that'd also have the benefit of not including rules that aren't used.

[Keats]

Yeah actually that might work light+dark

[jvatic]

Great! :) I hope to have some time this week to work on a PR, is there anything you'd like to go over before I get started?

[tuyen-at-work]

the problem with this approach is the dark and light theme might use different set of matching tokens. if you're able to combine and make it works, the CSS file might very large.
imagine user select tokyo-night as dark theme, and catppuccin-latte as light theme.