From 504bc5f80888ebd89d6c6726b18cb6f322ed538f Mon Sep 17 00:00:00 2001 From: Evan You Date: Sat, 9 Mar 2024 18:36:21 +0800 Subject: [PATCH] docs: support using different sponsor images for dark mode --- docs/.vitepress/theme/composables/sponsor.ts | 35 +++++++++++++++++++- docs/public/transloadit-dark.svg | 17 ++++++++++ 2 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 docs/public/transloadit-dark.svg diff --git a/docs/.vitepress/theme/composables/sponsor.ts b/docs/.vitepress/theme/composables/sponsor.ts index ea8a180aa05c35..78fd30a124e331 100644 --- a/docs/.vitepress/theme/composables/sponsor.ts +++ b/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 = { 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 { diff --git a/docs/public/transloadit-dark.svg b/docs/public/transloadit-dark.svg new file mode 100644 index 00000000000000..f402f7a97d4d28 --- /dev/null +++ b/docs/public/transloadit-dark.svg @@ -0,0 +1,17 @@ + + + + + +