Dark mode toggle for code syntax highlight

[dark bloom]

Hello! I have a light dark mode toggle on my site which works great but in my code examples I would like to change the syntax highlighting theme as well. I tried to follow https://github.com/shikijs/shiki/blob/main/docs/themes.md#dark-mode-support but it's unclear how it integrates with Astro's shinki config and is not working (could have done it wrong).

[covert basin]

Hi @dark bloom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hello! Based on the information extracts provided, I can guide you on how to configure Shiki with Astro. However, I don't have specific information on integrating dark mode support from Shiki's documentation with Astro's Shiki config.

To configure Shiki with Astro, you can use the shikiConfig object in your astro.config.mjs file:

import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'dracula', // Choose from Shiki's built-in themes or add your own
      langs: [], // Add custom languages
      wrap: true, // Enable word wrap to prevent horizontal scrolling
    },
  },
});

Source: Astro Documentation - Shiki Configuration (https://docs.astro.build/en/guides/markdown-content#shiki-configuration)

To use a custom theme, you can import it from a local file:

import { defineConfig } from 'astro/config';
import customTheme from './my-shiki-theme.json';

export default defineConfig({
  markdown: {
    shikiConfig: { theme: customTheme },
  },
});

Source: Astro Documentation - Adding Your Own Theme (https://docs.astro.build/en/guides/markdown-content#adding-your-own-theme)

For more information on integrating dark mode support from Shiki's documentation with Astro's Shiki config, I recommend checking the Astro documentation (https://docs.astro.build) and Shiki's documentation (https://github.com/shikijs/shiki/blob/main/docs/themes.md#dark-mode-support) for further guidance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: