⚠️ Issue - The implementation of themes from Shiki is not working properly.

[gxlpes]

Even tough I have a shikiConfig estabalished with a correct implementation of dark mode

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

<script is:inline>
  const setThemeColor = () => {
    const metaThemeColor = document.querySelector('meta[name=theme-color]')
    if (metaThemeColor) {
      if (document.documentElement.classList.contains('dark')) {
        metaThemeColor.setAttribute('content', 'black')
      } else {
        metaThemeColor.setAttribute('content', 'white')
      }
    }
  }

  const handleToggleClick = () => {
    const htmlElement = document.documentElement
    const bodyElement = document.body

    htmlElement.classList.toggle('dark')
    bodyElement.classList.toggle('dark')

    const isDark = htmlElement.classList.contains('dark')
    localStorage.setItem('theme', isDark ? 'dark' : 'light')

    if (isDark) {
      htmlElement.setAttribute('data-color-scheme', 'dark')
    } else {
      htmlElement.removeAttribute('data-color-scheme')
    }

    setThemeColor()
  }

  document.getElementById('theme-toggle').addEventListener('click', handleToggleClick)

  document.addEventListener('astro:after-swap', () => {
    localStorage.theme === 'dark'
      ? document.documentElement.classList.add('dark')
      : document.documentElement.classList.remove('dark')
  })

  const theme = localStorage.getItem('theme') || 'light'
  if (theme === 'light') {
    document.documentElement.classList.remove('dark')
  } else {
    document.documentElement.classList.add('dark')
    document.body.classList.add('dark') // Also add 'dark' class to body
  }
  setThemeColor()
</script>

My Shiki is not changing its theme.

[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!