Missing explanation about "themes" from ShikiConfig in syntax highlighting

[gxlpes]

📝 Issue Description

When trying to set a dual theme, one for light mode and another one for dark mode, the themes config can have two themes.

   shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },

How the themeing is detected? Via prefers-color-scheme?

📋 On which page(s) it occurs

https://docs.astro.build/en/guides/markdown-content/#shiki-configuration

🤔 Expected Behavior

I expected to use a dual themed syntax highlighting with Shiki using the themes object prop that is present in the docs.

👀 Current Behavior

The prop themes is not properly explained in the shikiConfig docs.

🖥️ Browser

Chrome 124.0.6367.91

📄 Additional Information

No response

[gxlpes]

I found what is wrong.

In the Shiki docs, these are recommended, using the .shiki classname.

@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

Because of how Astro is implemented, the correct way of using these would be using .astro-code instead of .shiki.

So the correct code and implementation should be

@media (prefers-color-scheme: dark) {
  .astro-code,
  .astro-code span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

html.dark .astro-code,
html.dark .astro-code span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

[sarah11918]

Hi! I'm closing this issue because, as I mentioned in the linked PR here, we have an open PR to address this! 🙌 Thank you for bringing it to our attention, and sorry we didn't get the PR completed before you needed it!