Auto Switch Light and Dark Favicon based on CSS prefers-color-scheme and VitePress Light switcher

[babakfp]

vitepressPrefersColorSchemeFaviconAutoSwitcher.ts:

import { HeadConfig } from "vitepress"

export const vitepressPrefersColorSchemeFaviconAutoSwitcher = (
    lightFaviconHref: string,
    darkFaviconHref: string,
): HeadConfig[] => {
    const lightFavicon: HeadConfig = [
        "link",
        {
            rel: "icon",
            href: lightFaviconHref,
            id: "vitepress-prefers-color-scheme-favicon-auto-switcher-light",
        },
    ]

    const darkFavicon: HeadConfig = [
        "link",
        {
            rel: "icon",
            href: darkFaviconHref,
            id: "vitepress-prefers-color-scheme-favicon-auto-switcher-dark",
        },
    ]

    const switcherScript: HeadConfig = [
        "script",
        {},
        `
            ;(() => {
                const iconLight = document.querySelector("#vitepress-prefers-color-scheme-favicon-auto-switcher-light")
                const iconDark = document.querySelector("#vitepress-prefers-color-scheme-favicon-auto-switcher-dark")

                new MutationObserver(mutationsList => {
                    for (const mutation of mutationsList) {
                        if (
                            mutation.type === "attributes" &&
                            mutation.attributeName === "class"
                        ) {
                            if (document.documentElement.classList.contains("dark")) {
                                iconLight?.remove()
                                document.head.append(iconDark)
                            } else {
                                document.head.append(iconLight)
                                iconDark?.remove()
                            }
                        }
                    }
                }).observe(document.documentElement, {
                    attributes: true,
                    attributeFilter: ["class"],
                })
            })()
        `,
    ]

    return [lightFavicon, darkFavicon, switcherScript]
}

.vitepress/config.mts:

export default defineConfig({
    head: [
        ...vitepressPrefersColorSchemeFaviconAutoSwitcher(
            "/logo-light.svg",
            "/logo-dark.svg",
        ),
    ],
})

I'm working on converting Zod docs to VitePress right now, so whenever I move the other favicons like the .png and other version into the new site, I'll be updating the code to make it work with all favicons.