Use a different hero image for light/dark themes.

[NThorp]

Hello, I am trying to set a different hero image for light and dark themes. The logo has an easy way to do this:

logo: { light: './src/assets/black-image.png', dark: './src/assets/white-image.png', },

But I am unable to figure out how to do something similar with the hero image config:

hero: image: file: ../../assets/white-image.png

Is there any documentation on setting a light and dark image in the hero config that I am missing?

[HiDeoo]

👋 The hero image accepts a dark & light variations as documented in the second example of this docs section:

---
title: Welcome to Starlight
description: Get started building your docs site with Starlight.
template: splash
hero:
  tagline: Congrats on setting up a new Starlight project!
  image:
    alt: My amazing logo
    dark: ../../assets/dark-hero.webp
    light: ../../assets/light-hero.webp
---

You can also check this Stackblitz example I made using 2 different images for the hero section.