Show different image for dark and light mode.

[sickerin]

Hi, could I ask what would be the recommended way to do the following, where a different image is shown based on dark and light mode? I believe the code below that I've tried doesn't work because Astro code runs on the server and the localStorage is on the browser. From what I understand I have these options.

• Duplicate the component and use Tailwind CSS to hide and show components based on dark property, similar to how other buttons are done.
• Use React components, etc (https://www.kevinzunigacuellar.com/blog/dark-mode-in-astro/)

I've also seen this post #33 about changing icons.

<Hero2
    callToAction={{ text: 'Add Friend', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
    callToAction2={{ text: 'Learn more', href: '#features' }}
    image={{
      src:
        localStorage.getItem('theme') == 'dark'
          ? import('~/assets/images/hero_many_white.png')
          : import('~/assets/images/hero_many.png'),
      alt: 'AstroWind Hero Image',
    }}
  >

[prototypa]

Hi @sickerin

AstroWind doesn't have direct support for what you need but maybe this can help you:

• https://dev.to/ziratsu/switch-to-a-darker-image-when-on-dark-mode-2lkh
• https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b

[A1vinSmith]

Thanks for sharing, somehow none of them worked for me. The selector "prefers-color-scheme: dark" never worked for me.

Here is my approach:

  <div class="dark-theme-logo">
    <!-- Width and Height has to align with the .dark-theme-logo -->
    <Image src={lightThemeLogoImg} alt='light-logo.png' class="max-h-12 dark:hidden" width={Width} height={Height} layout="fixed" />
  </div>

.dark-theme-logo {
  width: width;
  height: height;
  background: url("https://dark-theme-logo.png") center / cover;
}

[justjulian]

I have just tried to apply this answer, which seems to work nicely:

<div>
  <Image src={logoImg} alt="Logo Light" class="max-h-12 block dark:hidden" width={200} loading="eager" />
  <Image src={logoImgDark} alt="Logo Dark" class="max-h-12 hidden dark:block" width={200} loading="eager" />
</div>