flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
4.2 kB
131 lines
1---
2import type { HTMLAttributes } from "astro/types";
3
4export type Props = HTMLAttributes<"button">;
5
6const { class: className, ...props } = Astro.props;
7---
8
9<button
10 class:list={[
11 "theme-toggle flex items-center justify-center text-base-500 hover:text-base-700 dark:text-base-500 dark:hover:text-base-300",
12 className,
13 ]}
14 data-theme-toggle
15 {...props}
16>
17 <span class="sr-only">Theme Toggle</span>
18
19 <!-- Dark Mode Icon -->
20 <!-- <svg
21 xmlns="http://www.w3.org/2000/svg"
22 viewBox="0 0 24 24"
23 fill="currentColor"
24 class="w-5 h-5 hidden dark:block"
25 >
26 <path
27 fill-rule="evenodd"
28 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"
29 clip-rule="evenodd"></path>
30 </svg> -->
31 <svg
32 xmlns="http://www.w3.org/2000/svg"
33 fill="none"
34 viewBox="0 0 24 24"
35 stroke-width="1.5"
36 stroke="currentColor"
37 class="size-5 hidden dark:block"
38 >
39 <path
40 stroke-linecap="round"
41 stroke-linejoin="round"
42 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"
43 ></path>
44 </svg>
45
46 <!-- Light Mode Icon -->
47 <!-- <svg
48 xmlns="http://www.w3.org/2000/svg"
49 viewBox="0 0 24 24"
50 fill="currentColor"
51 class="w-5 h-5 block dark:hidden"
52 >
53 <path
54 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"
55 ></path>
56 </svg> -->
57 <svg
58 xmlns="http://www.w3.org/2000/svg"
59 fill="none"
60 viewBox="0 0 24 24"
61 stroke-width="1.5"
62 stroke="currentColor"
63 class="size-5 block dark:hidden"
64 >
65 <path
66 stroke-linecap="round"
67 stroke-linejoin="round"
68 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"
69 ></path>
70 </svg>
71</button>
72
73<noscript>
74 <style>
75 .theme-toggle {
76 display: none;
77 }
78 </style>
79</noscript>
80
81<script>
82 (() => {
83 let darkMode = false;
84
85 function setTheme(dark: boolean) {
86 const root = document.documentElement;
87 if (dark) {
88 root.classList.add("dark");
89 } else {
90 root.classList.remove("dark");
91 }
92 }
93
94 function toggleTheme() {
95 darkMode = !darkMode;
96 localStorage.setItem("darkMode", JSON.stringify(darkMode));
97 setTheme(darkMode);
98
99 // send event to everyone
100 const event = new CustomEvent("theme-toggle", {
101 detail: {
102 darkMode,
103 },
104 });
105 document.dispatchEvent(event);
106 }
107
108 // Initialize theme on page load
109 const savedDarkMode = localStorage.getItem("darkMode");
110 if (savedDarkMode !== null) {
111 darkMode = JSON.parse(savedDarkMode);
112 } else {
113 darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
114 }
115 setTheme(darkMode);
116
117 // Listen to system theme changes
118 window
119 .matchMedia("(prefers-color-scheme: dark)")
120 .addEventListener("change", (e) => e.matches && toggleTheme());
121
122 window
123 .matchMedia("(prefers-color-scheme: light)")
124 .addEventListener("change", (e) => e.matches && toggleTheme());
125
126 // Add click event to toggle button
127 document
128 .querySelector("button[data-theme-toggle]")
129 ?.addEventListener("click", toggleTheme);
130 })();
131</script>