Skip to content

Instantly share code, notes, and snippets.

@kkemple
Created November 28, 2021 18:43
Show Gist options
  • Save kkemple/afe693d3a6816b82e286c745b4efe5ea to your computer and use it in GitHub Desktop.
Save kkemple/afe693d3a6816b82e286c745b4efe5ea to your computer and use it in GitHub Desktop.
An image component that supports different images for dark mode.
export default function DarkModeImage({ light, dark, alt }) {
return (
<picture>
<source srcSet={dark} media="(prefers-color-scheme: dark)" />
<img src={light} alt={alt} />
</picture>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment