Port labs 11-13

[votroto]

Request to port labs 11 to 13 from CW.

[nmheim]

ahh, cool! I just didn't worry about dark versions of images that much yet so it would be great to have an automatic way to do this.

somehow for me only the dark versions of the images are showing up now though. I think there is a way of using two different files for everything by adding a .vitepress/theme/index.js file with:

// .vitepress/theme/index.js
import DefaultTheme, { VPImage } from 'vitepress/theme';

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // https://github.com/vuejs/vitepress/issues/2813#issuecomment-1683915241
    app.component('Image', VPImage);
  }
};

according to vuejs/vitepress#2814. so in the md files we could then do something like

<Image alt="Logo" :image="{ light: '/logo.svg', dark: '/logo-dark.svg' }" />

but I have no idea how to do that with the css invert (which I really like because then we only need one image :P) any ideas?