47 lines
786 B
Plaintext
47 lines
786 B
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
|
|
const { srcLight, srcDark, alt, style, width, height } = Astro.props;
|
|
---
|
|
|
|
<div class="themed-image-container">
|
|
<Image
|
|
src={srcLight}
|
|
alt={alt}
|
|
class={`light-logo ${style}`}
|
|
inferSize={true}
|
|
width={width}
|
|
height={height}
|
|
inferSize={true}
|
|
/>
|
|
|
|
<Image
|
|
src={srcDark}
|
|
alt={alt}
|
|
class={`dark-logo ${style}`}
|
|
inferSize={true}
|
|
width={width}
|
|
height={height}
|
|
inferSize={true}
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
.themed-image-container {
|
|
display: grid;
|
|
grid-template-areas: "stack";
|
|
}
|
|
|
|
.themed-image-container :global(img) {
|
|
grid-area: stack;
|
|
}
|
|
|
|
:global(.dark) .light-logo {
|
|
display: none !important;
|
|
}
|
|
|
|
:global(.dark) .dark-logo {
|
|
display: block !important;
|
|
}
|
|
</style>
|