Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/flo-bit/shapecraft. flo-bit.dev/shapecraft
Something went wrong. Try again.
4.2 kB · 131 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132---import type { HTMLAttributes } from "astro/types";
export type Props = HTMLAttributes<"button">;
const { class: className, ...props } = Astro.props;---
<button class:list={[ "theme-toggle flex items-center justify-center text-base-500 hover:text-base-700 dark:text-base-500 dark:hover:text-base-300", className, ]} data-theme-toggle {...props}> <span class="sr-only">Theme Toggle</span>
<!-- Dark Mode Icon --> <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 hidden dark:block" > <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd"></path> </svg> --> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 hidden dark:block" > <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" ></path> </svg>
<!-- Light Mode Icon --> <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 block dark:hidden" > <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" ></path> </svg> --> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 block dark:hidden" > <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" ></path> </svg></button>
<noscript> <style> .theme-toggle { display: none; } </style></noscript>
<script> (() => { let darkMode = false;
function setTheme(dark: boolean) { const root = document.documentElement; if (dark) { root.classList.add("dark"); } else { root.classList.remove("dark"); } }
function toggleTheme() { darkMode = !darkMode; localStorage.setItem("darkMode", JSON.stringify(darkMode)); setTheme(darkMode);
// send event to everyone const event = new CustomEvent("theme-toggle", { detail: { darkMode, }, }); document.dispatchEvent(event); }
// Initialize theme on page load const savedDarkMode = localStorage.getItem("darkMode"); if (savedDarkMode !== null) { darkMode = JSON.parse(savedDarkMode); } else { darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; } setTheme(darkMode);
// Listen to system theme changes window .matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", (e) => e.matches && toggleTheme());
window .matchMedia("(prefers-color-scheme: light)") .addEventListener("change", (e) => e.matches && toggleTheme());
// Add click event to toggle button document .querySelector("button[data-theme-toggle]") ?.addEventListener("click", toggleTheme); })();</script>