Read current dark/light mode

[icy olive]

Starlight supports a built-in theme switcher for users to decide using light or dark mode. If I have a picture that requires to be displayed differently in light/dark modes, how do I achieve this?

[vivid granite]

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

---

Astro's Starlight framework allows you to display different versions of an image in light and dark modes. Here's how you can achieve this:

1. Add an image file for each variant to src/assets/ directory. For example, you might have light-logo.svg and dark-logo.svg.

2. In your astro.config.mjs, add the path to your logo variants as the light and dark options. Here's an example:

starlight({
  title: 'Docs With My Logo',
  logo: {
    light: './src/assets/light-logo.svg',
    dark: './src/assets/dark-logo.svg',
  },
});

This configuration will ensure that the appropriate image is displayed based on the current theme (light or dark) selected by the user.

For more details, refer to the Add your logo (https://starlight.astro.build/guides/customization/#add-your-logo) guide in the Starlight documentation.

Similarly, if you want to add a hero component with different images for light and dark modes, you can do so in your frontmatter fields. Here's an example:

---
hero:  
  image:    
    alt: A glittering, brightly colored logo    
    dark: ~/assets/logo-dark.png    
    light: ~/assets/logo-light.png
---

For more details, refer to the Frontmatter fields > hero (https://starlight.astro.build/reference/frontmatter/#hero) section in the Starlight documentation.

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