Something went wrong. Try again.
version 2 of my website
Something went wrong. Try again.
1.1 kB · 37 lines
Astro
at main
1234567891011121314151617181920212223242526272829303132333435363738---import { Moon, Sun } from "@lucide/astro";import Nav from "./nav.astro";---
<header class:list={["m-3 flex justify-between lg:justify-end items-center"]}> <Nav className="lg:hidden block" isMobile={true} />
<button type="button" id="theme-selector" class="p-2 rounded-lg hover:scale-105 transition-all ease-in-out duration-300 hover:cursor-pointer" > <span class="sr-only"> Enable <span class="dark:hidden">light</span><span class="hidden" >dark</span > mode </span> <Moon class="hidden dark:block w-6 h-6" /> <Sun class="block dark:hidden w-6 h-6" /> </button></header>
<script> document.addEventListener("click", (e) => { const target = e.target as HTMLElement | null; if (!target?.closest("#theme-selector")) return;
if (document.documentElement.classList.contains("dark")) { localStorage.theme = "light"; document.documentElement.classList.remove("dark"); } else { localStorage.theme = "dark"; document.documentElement.classList.add("dark"); } });</script>