35 lines
807 B
TypeScript
35 lines
807 B
TypeScript
import { useState, useEffect } from "react";
|
|
import { useTheme } from "next-themes";
|
|
import { Sun, Moon } from "phosphor-react";
|
|
|
|
import Button from "./Button";
|
|
|
|
const ThemeChanger = () => {
|
|
const { theme, setTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => setMounted(true), []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<Button
|
|
outline
|
|
onClick={() => {
|
|
setTheme(theme && theme === "light" ? "dark" : "light");
|
|
}}
|
|
css={{
|
|
display: "flex",
|
|
marginLeft: "auto",
|
|
cursor: "pointer",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
color: "$muted",
|
|
}}
|
|
>
|
|
{theme === "dark" ? <Sun size="15px" /> : <Moon size="15px" />}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default ThemeChanger;
|