docs: support using different sponsor images for dark mode

docs/.vitepress/theme/composables/sponsor.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 interface Sponsors {
   special: Sponsor[]
@@ -13,6 +13,10 @@ interface Sponsor {
   name: string
   img: string
   url: string
+  /**
+   * Expects to also have an **inversed** image with `-dark` postfix.
+   */
+  hasDark?: true
 }
 
 // shared data across instances so we load only once.
@@ -58,12 +62,40 @@ const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
       name: 'Transloadit',
       url: 'https://transloadit.com/?utm_source=vite&utm_medium=referral&utm_campaign=sponsorship&utm_content=website',
       img: '/transloadit.svg',
+      hasDark: true,
     },
   ],
 }
 
+function toggleDarkLogos() {
+  if (data.value) {
+    const isDark = document.documentElement.classList.contains('dark')
+    data.value.forEach(({ items }) => {
+      items.forEach((s: Sponsor) => {
+        if (s.hasDark) {
+          s.img = isDark
+            ? s.img.replace(/(\.\w+)$/, '-dark$1')
+            : s.img.replace(/-dark(\.\w+)$/, '$1')
+        }
+      })
+    })
+  }
+}
+
 export function useSponsor() {
   onMounted(async () => {
+    const ob = new MutationObserver((list) => {
+      for (const m of list) {
+        if (m.attributeName === 'class') {
+          toggleDarkLogos()
+        }
+      }
+    })
+    ob.observe(document.documentElement, { attributes: true })
+    onUnmounted(() => {
+      ob.disconnect()
+    })
+
     if (data.value) {
       return
     }
@@ -72,6 +104,7 @@ export function useSponsor() {
     const json = await result.json()
 
     data.value = mapSponsors(json)
+    toggleDarkLogos()
   })
 
   return {