buzzword-bingo/src/app/components/themeswitcher.tsx

"use client";

import React from "react";
import DarkIcon from "./darkicon";

export default function ThemeSwitcher(){
	const [theme, setTheme] = React.useState("dark");

	React.useEffect(() => {document.body.setAttribute("data-theme", theme)});

	return(
		<ul className="p-2 right-0 text-base-content z-10">
			<li><a onClick={() => setTheme("light")}>Light</a></li>
			<li><a onClick={() => setTheme("cyberpunk")}>Cyberpunk</a></li>
			<li><a onClick={() => setTheme("valentine")}>Valentine</a></li>
			<li><a onClick={() => setTheme("pastel")}>Pastel</a></li>
			<li><a onClick={() => setTheme("aqua")}>Aqua</a></li>
			<li><a onClick={() => setTheme("dark")}><DarkIcon/>Dark</a></li>
			<li><a onClick={() => setTheme("synthwave")}><DarkIcon/>Synthwave</a></li>
			<li><a onClick={() => setTheme("coffee")}><DarkIcon/>Coffee</a></li>
			<li><a onClick={() => setTheme("dim")}><DarkIcon/>Dim</a></li>
		</ul>
	);
}