Home.md light / dark style.

[Karlstens]

I'm attempting to change the colors used with the default homepage, but have them influenced by the dark / light toggle. Unfortunately the Theme Home Page documentation doesn't cover specifically toggling <style> to work with dark/light theme.

https://vitepress.dev/reference/default-theme-home-page

Within my home page Markdown content (underneath the home.md frontmatter), I have this style for the fancy blur graphic background. I'd like the colors to differ between light / dark toggle. Currently, the colors show the same for both light/dark theme.

<style>
:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #41d1ff 30%, #41d1ff);

  --vp-home-hero-image-background-image: linear-gradient(-45deg, #000000 50%, #47caff 50%);
  --vp-home-hero-image-filter: blur(44px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(68px);
  }
}
</style>

Keen to understand how I may be able to achieve this.

[sharpchen]

May be .dark would work? That's how global style work for adaptive theme.

vitepress/src/client/theme-default/styles/vars.css

Line 13 in e4bf1e4

.dark {

.dark {
  /* ... */
}

[Karlstens]

Ahh perfect. I understand now, thank you! 🌘