Logo instead of Text in Header?

[LamerManuel]

How can I use a logo instead of text in the header that changes when switching from light to dark? Although it currently displays an image that changes, once I delete the text, the logos also disappear.

<img class="block dark:hidden" src="/src/assets/images/logo-dark.svg" />
<img class="hidden dark:block" src="/src/assets/images/logo-light.svg" />

[prototypa]

Hi @LamerManuel

Test this. Go to this file https://github.com/onwidget/astrowind/blob/main/src/components/Logo.astro and add this:

---
import lightLogo from "~/assets/images/logo-light.svg";
import darkLogo from "~/assets/images/logo-dark.svg";

---
<div class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
  <img class="block dark:hidden" src={lightLogo} alt="Your Logo" />
  <img class="hidden dark:block" src={darkLogo} alt="Your Logo" />
</div>

[LamerManuel]

@prototypa

Perfect, thanks for the quick reply. I'll try it right away and let you know if it worked out.

[LamerManuel]

@prototypa

Unfortunately it doesn't work either. Also only shows the logo when I add a text, it looks like this:

---
import lightLogo from "~/assets/images/logo-light.svg";
import darkLogo from "~/assets/images/logo-dark.svg";

---
<div class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
  <img class="block dark:hidden" src={lightLogo} alt="Your Logo" />
  <img class="hidden dark:block" src={darkLogo} alt="Your Logo" />
  My Logo
</div>

That's how I have it at the moment, but then of course the logo isn't centered and it doesn't feel right 😀

---
---

<span class="self-center ml-2 text-lg md:text-base font-bold text-transparent whitespace-nowrap dark:text-transparent">
  <img class="block dark:hidden" src="/src/assets/images/logo-dark.svg" />
  <img class="hidden dark:block" src="/src/assets/images/logo-light.svg" />Some Text</span
>

[ghost]

`---
import lightLogo from '/assets/images/logo-light.svg'
import darkLogo from '/assets/images/logo-dark.svg'

`

but I'm getting the following:
[WARN] [router] A getStaticPaths()route pattern was matched, but no matching static path was found for requested path/[object Object]`.

Possible dynamic routes being matched: src/pages/[...blog]/[category]/[...page].astro, src/pages/[...blog]/[tag]/[...page].astro, src/pages/[...blog]/[...page].astro, src/pages/[...blog]/index.astro.
22:29:28 [404] /[object Object]`