alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

feat: add dark mode swap to logo

Browse Source
This commit is contained in:
Alex Lebens
2026-03-02 22:20:36 -06:00
parent 7f31880b51
commit 97b1fa0316
1 changed files with 3 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/images/ImageTheme.astro
View File

@@ -4,12 +4,11 @@ import { Image } from 'astro:assets';
const { srcLight, srcDark, alt, style, width, height } = Astro.props; const { srcLight, srcDark, alt, style, width, height } = Astro.props;
--- ---
<div class="themed-image-container"> <div class="grid grid-cols-1 grid-rows-1">
<Image <Image
src={srcLight} src={srcLight}
alt={alt} alt={alt}
class={`light-logo ${style}`} class:list={['col-start-1 row-start-1 transition-all duration-400 ease-in-out opacity-100 scale-100 dark:opacity-0 dark:scale-65', style]}
inferSize={true}
width={width} width={width}
height={height} height={height}
inferSize={true} inferSize={true}
@@ -18,29 +17,9 @@ const { srcLight, srcDark, alt, style, width, height } = Astro.props;
<Image <Image
src={srcDark} src={srcDark}
alt={alt} alt={alt}
class={`dark-logo ${style}`} class:list={['col-start-1 row-start-1 transition-all duration-400 ease-in-out opacity-0 scale-65 dark:opacity-100 dark:scale-100', style]}
inferSize={true}
width={width} width={width}
height={height} height={height}
inferSize={true} inferSize={true}
/> />
</div> </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>