Multi-theme theme keys not added to <code> or <pre> elements style

[alanqchen]

The Shiki dual-themes documentation shows that it adds theme keys to the <pre> element in the in-line styles:

<pre
  class="shiki shiki-themes min-light nord"
  style="background-color:#ffffff;--shiki-dark-bg:#2e3440ff;color:#24292eff;--shiki-dark:#d8dee9ff"
  tabindex="0"
>

And the current rehype-pretty-code documentation seems to imply that the theme keys (--shiki-light and --shiki-light-bg in this example) are added to the <code> element:

code[data-theme*=" "],
code[data-theme*=" "] span {
  color: var(--shiki-light);
  background-color: var(--shiki-light-bg);
}

However, I only see that the theme keys are added to the <span> elements, which also seems to match with my short read of the source code with the theme keys only added on the <span> elements.

Unless I'm missing something, the fix needed is to add the theme keys to <pre>, <code>, or even <figure> (to include <figcaption>) so it's possible to set the background color of the code block based on the theme.

[o-az]

@alanqchen thanks for opening the issue. Do you want to take a shot at fixing this?