Option to invert nav logo on dark mode

[pandermatt]

Hey, I used VitePress in some projects already, and I noticed that every logo i used looks bad on dark mode.
I think this might be also the issue for others and instead of having two different icons (light and dark)
it would maybe be preferable to auto invert the icon with filter: grayscale(1) invert(1);

I was thinking about adding logoInverted (or silhouetteLogoInDark) themeConfig and then in VPNavBarTitle.vue

<VPImage v-if="theme.logo" class="logo" :image="theme.logo" :class="{ inverted: theme.logoInverted }" />

with the class

.dark .logo.inverted {
  filter: brightness(0) invert(1);
  # or (both have the same effect)
  filter: grayscale(1) invert(1);
}

If this idea does not fit the project, the workaround would be to use following in styles.css

.dark .VPImage.logo {
  filter: brightness(0) invert(1);
}

[pandermatt]

Something similar is already in vp-sponsor.css

.dark .vp-sponsor-grid-image {
  filter: grayscale(1) invert(1);
}

[pandermatt]

@brc-dd what do you think about that? If you like it, I would create a PR

[brc-dd]

Navbar supports different logos for light and dark mode. You probably should use them instead of just inverting/grayscaling images.

instead of having two different icons (light and dark) it would maybe be preferable to auto invert the icon with filter: grayscale(1) invert(1);

This might not work for every user. Every logo is different. For example with our site, it looks like this with that CSS in dark mode:

Nothing will work for everyone. Specifying separate images is more customizable.

[pandermatt]

Thanks for your answer. Ah, I see the problem.

Specifying separate images is more customizable.

Yes that's true