pdsls.dev
1import { createSignal } from "solid-js";
2
3export const themeEvent = () => {
4 if (localStorage.getItem("theme") !== null) return;
5 const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
6 document.documentElement.classList.toggle("dark", isDark);
7};
8
9export const ThemeSelection = () => {
10 const [theme, setTheme] = createSignal(
11 localStorage.getItem("theme") === null ? "system"
12 : localStorage.theme === "dark" ? "dark"
13 : "light",
14 );
15
16 const updateTheme = (newTheme: string) => {
17 setTheme(newTheme);
18 document.documentElement.classList.toggle(
19 "dark",
20 newTheme === "dark" ||
21 (newTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches),
22 );
23 if (newTheme === "system") localStorage.removeItem("theme");
24 else localStorage.theme = newTheme;
25 };
26
27 const ThemeButton = (props: { theme: string; icon: string }) => {
28 return (
29 <button
30 classList={{
31 "p-1.5 flex items-center rounded-full": true,
32 "bg-neutral-200 dark:bg-neutral-600": theme() === props.theme,
33 }}
34 onclick={() => updateTheme(props.theme)}
35 >
36 <span class={"iconify " + props.icon}></span>
37 </button>
38 );
39 };
40
41 return (
42 <div class="mt-2 flex items-center justify-between gap-1 text-base">
43 <ThemeButton theme="system" icon="lucide--monitor" />
44 <ThemeButton theme="light" icon="lucide--sun" />
45 <ThemeButton theme="dark" icon="lucide--moon" />
46 </div>
47 );
48};