42 lines
1.6 KiB
Plaintext
42 lines
1.6 KiB
Plaintext
---
|
|
import '@/styles/globals.css';
|
|
import { Image } from 'astro:assets';
|
|
import { ModeToggle } from '@/components/ModeToggle';
|
|
|
|
import logoImage from '@/assets/images/logo.png';
|
|
---
|
|
|
|
<script is:inline>
|
|
const getThemePreference = () => {
|
|
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
|
|
return localStorage.getItem('theme');
|
|
}
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
};
|
|
const isDark = getThemePreference() === 'dark';
|
|
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
|
|
|
|
if (typeof localStorage !== 'undefined') {
|
|
const observer = new MutationObserver(() => {
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
});
|
|
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
|
|
}
|
|
</script>
|
|
|
|
<header
|
|
class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4">
|
|
<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
|
|
<a
|
|
href="/"
|
|
class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-medium leading-relaxed text-inherit antialiased">
|
|
<div class="flex items-center gap-2 lg:gap-4">
|
|
<Image src={logoImage} alt="Astro Deploy" class="-my-2 size-10 lg:-my-4 lg:size-14" />
|
|
Astro Deploy
|
|
</div>
|
|
</a>
|
|
<ModeToggle client:load />
|
|
</div>
|
|
</header>
|