// src/hooks/createUserTheme.ts
import { createAsync, cache, action, json, reload } from "@solidjs/router";
import { createEffect, onCleanup } from "solid-js";
import { getCookie, setCookie } from "vinxi/http";
type Theme = "light" | "dark";
const DEFAULT: Theme = "dark",
THEME_KEY = "user-theme";
export const getThemeCookie = () => (getCookie(THEME_KEY) || "dark") as Theme;
export const getTheme = cache(async () => {
"use server";
return getThemeCookie();
}, THEME_KEY);
export const updateTheme = action(async (formData: FormData) => {
"use server";
const theme = formData.get(THEME_KEY)?.toString() || DEFAULT;
setCookie(THEME_KEY, theme);
return reload({ status: 200, revalidate: [THEME_KEY] });
}, THEME_KEY);
export const createUserTheme = () => {
const theme = createAsync(() => getTheme());
createEffect(() => {
const t = theme();
if (!t) return;
document.documentElement.classList.add(t);
onCleanup(() => {
document.documentElement.classList.remove(t);
});
});
return [theme, updateTheme] as const;
};
// src/components/ThemeToggle.tsx
import { createUserTheme, getTheme } from "~/hooks/createUserTheme";
export default function ThemeToggle() {
const [theme, updateTheme] = createUserTheme();
return (
<form action={updateTheme} method="post">
<input
type="hidden"
name={getTheme.key}
value={theme() === "light" ? "dark" : "light"}
/>
<button class="dark:bg-white bg-black text-white dark:text-black py-1.5 px-3 rounded-xl font-monument-regular ">
Toggle Theme
</button>
</form>
);
}