53 lines
1.0 KiB
Plaintext
53 lines
1.0 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
import { blurStyle } from '@support/image';
|
|
|
|
const { srcLight, srcDark, alt, style, disableBlur, width, height } = Astro.props;
|
|
|
|
const showBlur = !disableBlur;
|
|
|
|
const blurLight = (srcLight?.fsPath && showBlur) ? await blurStyle(srcLight.fsPath) : {};
|
|
const blurDark = (srcDark?.fsPath && showBlur) ? await blurStyle(srcDark.fsPath) : {};
|
|
---
|
|
|
|
<div class="themed-image-container">
|
|
<Image
|
|
src={srcLight}
|
|
alt={alt}
|
|
class={`light-logo ${style}`}
|
|
style={blurLight}
|
|
inferSize={true}
|
|
width={width}
|
|
height={height}
|
|
/>
|
|
|
|
<Image
|
|
src={srcDark}
|
|
alt={alt}
|
|
class={`dark-logo ${style}`}
|
|
style={blurDark}
|
|
inferSize={true}
|
|
width={width}
|
|
height={height}
|
|
/>
|
|
</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>
|